使用 JSMpeg 播放多个流

Question

我正在使用 nodejs 和 angularjs 开发 Web 应用程序。 我需要在单个页面中显示多个 rtsp 流。 为此，我使用 JSmpeg 库使用 node-rtsp-stream。 我的客户端代码如下所示：

<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>

流媒体已成功显示，但问题是当我评论其中一位播放器时，流媒体显示正常。 但是，当我同时启动两个播放器时，jsmpeg 播放器无法流畅播放。 那么，有什么解决办法吗？

Answer 1

您应该使用iframe标签来执行此任务

Answer 2

我知道现在已经晚了，但我最近尝试使用 react 做同样的事情，也许它会对某人有所帮助，这里有一个组件，它实际上对我有多个提要：

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;