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 ?
您应该使用iframe
标签来执行此任务
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.