Problem switching videos #424

Activity

1. TXMengXue commented on Feb 21, 2024

   

   TXMengXue

   on Feb 21, 2024

   Author

   More actions

   var elementCanvas = document.getElementById('videoCanvas');
   if (player) {
       player.destroy();
       var ctx = elementCanvas.getContext("2d");
       ctx.fillStyle = "black"; 
       ctx.fillRect(0, 0, elementCanvas.width, elementCanvas.height); 
   }
   player = new JSMpeg.Player('ws://localhost:8083/', {canvas: elementCanvas}); 
   

   
2. phoboslab commented on Feb 24, 2024

   

   phoboslab

   on Feb 24, 2024

   Owner

   More actions

   Works for me™

   Tested with

   html:

   <canvas id="video-canvas"></canvas>
   <script type="text/javascript" src="jsmpeg.min.js"></script>
   <script type="text/javascript">
   	let player = null;
   	let port = '8082';
   	let canvas = document.getElementById('video-canvas');
   	let toggleStreams = function() {
   		port = port === '8082' ? '8084' : '8082';
   		if (player) {
   			player.destroy();
   		}
   		let url = 'ws://'+document.location.hostname+':'+port;
   		player = new JSMpeg.Player(url, {canvas: canvas});
   	}
   	toggleStreams();
   </script>
   <button onclick="toggleStreams()">switch</button>

   Terminal 1:

   node websocket-relay.js zomg 8081 8082

   Terminal 2:

   ffmpeg -stream_loop -1 -re -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 http://127.0.0.1:8081/zomg

   Terminal 3:

   node websocket-relay.js zomg 8083 8084

   Terminal 4:

   # same input video but different size (`-s wxh`)
   ffmpeg -stream_loop -1 -re -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -s 320x180 -b 0 http://127.0.0.1:8083/zomg

   Video_2024-02-24_21-57-03.mp4

   It's curious that you were able to do canvas.getContext("2d");, because the default canvas context will be WebGL, if disableGl:true is not specified.