使用JSMpeg播放多个流
使用JSMpeg播放多个流
提问于 2020-03-12 20:38:15
我正在使用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播放器无法流畅地播放。那么，有什么解决方案吗？
回答 2
Stack Overflow用户
发布于 2020-07-29 10:42:54
您应该使用iframe标签来执行此任务
Stack Overflow用户
发布于 2021-03-22 03:45:02
我知道现在已经很晚了，但我最近也在尝试使用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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60654310
复制相关文章
相似问题
腾讯云开发者
