WebSocket接收流媒体服务的消息，通过MSE播放视频（待测试，仅供参考）

最新推荐文章于 2024-06-12 14:07:56 发布

yc_1224

最新推荐文章于 2024-06-12 14:07:56 发布

阅读量3.8k

点赞数

分类专栏： WebSocket 文章标签： WebSocket

本文链接：https://blog.csdn.net/cn_514/article/details/98735739

版权

WebSocket 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
    //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 += "<p>Socket状态 连接尚未建立：" + readyState[ws.readyState] + "</p>";
          
            //注册各类回调
            //与服务器建立连接
            ws.onopen = function () 
            {
                message.innerHTML += "<p>Socket状态 连接已建立：" + readyState[ws.readyState] + "</p>";
            }

            //接收数据
            ws.onmessage = function (msg) 
            {
                message.innerHTML += "<p>接收信息：" + msg.data + "</p>";
                console.log(msg.data);
            }

            //与服务器断开连接
            ws.onclose = function () 
            {
                message.innerHTML += "<p>Socket状态 断开：" + readyState[ws.readyState] + "</p>";
            }

            ws.onerror = function () {

                message.innerHTML += "<p>Socket状态：" + "数据传输发生错误" + " " + readyState[ws.readyState] + "</p>";
            }


           

        }
        catch (exception)
        {
            message.innerHTML += "<p>有错误发生</p>";
        }
    }
 
    //向服务端发送消息
    function sendMessage()
    {
        var text = document.getElementById("text").value;
        var message = document.getElementById("message");
        if (text == "") {
            message.innerHTML += "<p>请输入一些文字</p>";
            return;
        }
        try {
            ws.send(text);
            message.innerHTML += "<p>发送数据：" + text + "</p>";
        }
        catch (exception) {
            message.innerHTML += "<p>发送数据出错</p>";
        }
        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();
        };
    }
    </script>
</head>


<body>
       <h1>WebSocket客户端</h1>
       <input id="text" type="text">
       <input type="button" value="连接服务" onclick="connection()" />
       <input type="button" value="发送消息" onclick="sendMessage()" />
       <input type="button" value="发送MSE" onclick="MediaSource()" />
       <input type="button" value="断开连接" onclick="disconnect()" />
      
     <div style="width:100%;margin-top:20px;">
         <!--<img id ="receiver" style="width:100%;height:900px;" />-->
         <video class="js-player-mp4" autoplay="autoplay" controls="controls" style="width:400px;height :400px; border:3px solid blue;" src="Video/movie.mp4">
             <!--    <source src="Video/movie.mp4" type="video/mp4">-->
         </video>         
</div>
    <div id="message"></div>
</body>
</html>

yc_1224

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
WebSocket接收流媒体服务的消息，通过MSE播放视频（待测试，仅供参考）

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> ...
复制链接

扫一扫