WebSocket接收流媒体服务的消息，通过MSE播放视频

    
    
    
    //window.onload = function () { }
    var ws;//WebSocket对象
    var wsUrl = "ws://192.168.1.120:2012";//支持WebSocket协议的服务器端地址
    //var wsUrl = "ws://192.168.1.233:559/192.168.1.205:8000:admin:admin12345:0:33?live=0";    
    function connection() {       
        //判断该使用哪种WebSocket对象
        if ("WebSocket" in window) {
        }        
        else if ("MozWebSocket" in window) {
            ws = new MozWebSocket(wsUrl);
            ws.binaryType = 'arraybuffer';//获取字节数据
        } else {
            alert("您的浏览器不支持 WebSocket!");
            return;
        }
 
        try {
            var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接");           
            ws = new WebSocket(wsUrl);
            var message = document.getElementById("message");
            message.innerHTML += "
Socket状态 连接尚未建立：" + readyState[ws.readyState] + "
";
          
            //注册各类回调
            //与服务器建立连接
            ws.onopen = function () 
            {
                message.innerHTML += "
Socket状态 连接已建立：" + readyState[ws.readyState] + "
";
            }
 
            //接收数据
            ws.onmessage = function (msg) 
            {
                message.innerHTML += "
接收信息：" + msg.data + "
";
                console.log(msg.data);
            }
 
            //与服务器断开连接
            ws.onclose = function () 
            {
                message.innerHTML += "
Socket状态 断开：" + readyState[ws.readyState] + "
";
            }
 
            ws.onerror = function () {
 
                message.innerHTML += "
Socket状态：" + "数据传输发生错误" + " " + readyState[ws.readyState] + "
";
            }
 
 
           
 
        }
        catch (exception)
        {
            message.innerHTML += "
有错误发生
";
        }
    }
 
    //向服务端发送消息
    function sendMessage()
    {
        var text = document.getElementById("text").value;
        var message = document.getElementById("message");
        if (text == "") {
            message.innerHTML += "
请输入一些文字
";
            return;
        }
        try {
            ws.send(text);
            message.innerHTML += "
发送数据：" + text + "
";
        }
        catch (exception) {
            message.innerHTML += "
发送数据出错
";
        }
        document.getElementById("text").value = "";
    }
 
    //关闭连接
    function disconnect() {
        ws.close();
    }
 
 
    function sendMessageEx() {        
        ws.onmessage = function (e) {
            sourceBuffer.appendBuffer(e);
        };
    }
    function MediaSource()
    {
        var videoMp4 = document.querySelector('.js-player-mp4');
        if (window.MediaSource) {
            // 创建MediaSource对象，并使用URL.createObjectURL来创建指向MediaSource对象的URL供video播放
            let mediaSource = new MediaSource();
            //video.src 通过 URL.createObjectURL 链接 mediaSource
            videoMp4.src = URL.createObjectURL(mediaSource);
            //监听sourceopen
            mediaSource.addEventListener('sourceopen', sourceOpen);
        } else {
            console.log("您的浏览器不支持 Media Source");
            return;
        }
        //异步处理
        function sourceOpen(e) {
            URL.revokeObjectURL(videoMp4.src);
            // 设置 媒体的编码类型
            //var mime = 'video/webm; codecs="vorbis, vp8"';
            var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'//video/webm、audio/mpeg、audio/mp4 
            var mediaSource = e.target;
            //创建一个新的 SourceBuffer 对象，然后会将它追加到 MediaSource 的 SourceBuffers 列表中。
            var sourceBuffer = mediaSource.addSourceBuffer(mime);           
            var videoUrl = videoMp4.src;
 
            //监听 SourceBuffer 上的 updateend 事件，确定空闲后，再加入新的 chunk
            fetchAB(videoUrl, function (buf) {
                sourceBuffer.addEventListener('updateend', function (_) {
                    //在数据请求完成后,调用 endOfStream()。改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。
                    mediaSource.endOfStream();// 结束当前的接受
                    videoMp4.play(); //可以播放当前获得的流
                    console.log(mediaSource.readyState); // ended
                });
                console.log("buf", buf);
                sourceBuffer.appendBuffer(buf);  //请求资源
            });          
            
        }
      
        function fetchAB(url, cb) {
            console.log(url);
            var xhr = new XMLHttpRequest;
            xhr.open('get', url);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                cb(xhr.response);
            };
            xhr.send();
        };
    }
    

 
 

       WebSocket客户端