Play multiple streaming using JSMpeg

Question

I'm developing web application using nodejs and angularjs. I need to display multiple rtsp streaming in single page. For which i use node-rtsp-stream using JSmpeg library. My client side code look like this:

<canvas id="can1" style="width: 480px; height: 280px"></canvas>
<canvas id="can2" style="width: 480px; height: 280px"></canvas>

<script type="text/javascript">
  var can1 = document.getElementById('can1');
  let player1 = new JSMpeg.Player('ws://192.168.0.72:89', {
    canvas: can1, autoplay: true, audio: false, loop: true
  })
  var can2 = document.getElementById('can2');
  let player2 = new JSMpeg.Player('ws://192.168.0.72:88', {
    canvas: can2, autoplay: true, audio: false, loop: true
  })
</script>

Streaming was displayed successfully but the issue is when i comment one of the player then streaming displayed fine. But, when i start two player simultaneous jsmpeg player not able to stream smoothly. So, Is there any solution ?

Does it work, if you put the second one in a timeout? To me it looks like a problem if all canvas are started together… But not shure yet… — Martin Schilliger, Apr 06 '20 at 08:10

score 0 · Answer 1 · answered Jul 29 '20 at 02:42

0

You should use iframe tag to perform this task

answered Jul 29 '20 at 02:42

nOpe

97
2
11

score 0 · Answer 2 · answered Mar 21 '21 at 19:45

I know it is late but I was trying to do the same lately using react, maybe it will help someone, here is a component that actually works for me with multiple feeds:

import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';

import JSMpeg from '@cycjimmy/jsmpeg-player';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
}));

const VideoPlayerComponent = ({ name, url }) => {
  const classes = useStyles();
  const ref = useRef();
  useEffect(() => {
    const player = new JSMpeg.Player(url, {
      canvas: ref.current,
      autoplay: true,
    });
    return () => {
      player.destroy()
    };
  }, [ref]);

  return (
    <div id={`${name}`}>
      <canvas ref={ref} className={classes.root}></canvas>
    </div>
  );
};

VideoPlayerComponent.props = {
  name: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
};

export default VideoPlayerComponent;

Play multiple streaming using JSMpeg

2 Answers2