How to play websocket video data by Javascript and Html5?

Question

I'm building a live system. Now I want to make a player that gets video data(raw) from the server and show them via <video> to my customers.

My code goes like this:

var ws=new WebSocket("wss://******");
var Ms=new MediaSource();
var mime='video/webm; codecs="vorbis,vp8"';
var rec=0; var que=[];
var video=document.getElementById("vid1");
video.src=URL.createObjectURL(Ms);
Ms.addEventListener('sourceopen',sourceOpen);
function sourceOpen(ee){
        URL.revokeObjectURL(video.src);
        var Ms=ee.target;
        var buffer=Ms.addSourceBuffer(mime);
        ws.onmessage=function(e){
            buffer.appendBuffer(e.data);
            buffer.addEventListener('updateend',function(e){
                if(!buffer.updating&&Ms.readyState==='open'){
                        Ms.endOfStream(); video.play();
                }
            });
        }
ws.binaryType='arraybuffer';

Notice: i'm not sure if i have written the correct code.

Now, i can get only blank from the video, Google Chrome doesn't throw out errors either.

New progress: The code works well in Firefox, but Chrome still showed blank T_T Please help.

question from:https://stackoverflow.com/questions/66062430/how-to-play-websocket-video-data-by-javascript-and-html5

Answer 1

Waitting for answers