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

https://github.com/phoboslab/jsmpeg/assets/443987/ba47caf7-c386-4f17-a08b-3b3564c3997c

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.