Problem switching videos

[TXMengXue]

const canvas = document.getElementById('videoCanvas');

if (player) { 
    player.destroy();
}
player = new JSMpeg.Player(url, {canvas: canvas}); 

[TXMengXue]

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}); 

[phoboslab]

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.