อาเหว่ย 2021-08-24 17:35 采纳率: 100%
浏览 124
已结题

html5 websocket 实现视频聊天

目前实现了 本地摄像头可以打开视频,可以拍照。
使用WEBSOCKET发送出去了。也接收了。但是接收到的数据无法显示视频。
可能是发送的问题。也可能是解析的问题。但是发送和接收的数据我检查了确实都是相同的BLOB数据。

有写过原生的指点一下。不要引用三方。完全原生JS。
目前实现了 本地摄像头可以打开视频,可以拍照。
使用WEBSOCKET发送出去了。也接收了。但是接收到的数据无法显示视频。
可能是发送的问题。也可能是解析的问题。但是发送和接收的数据我检查了确实都是相同的BLOB数据。

有写过原生的指点一下。不要引用三方。完全原生JS。

const videoMimeType
let myConstraints =
let myWebSocket = null;
//Remote
let remoteMediaSource;
let remoteSourceBuffer;

  • 写回答

5条回答 默认 最新

  • อาเหว่ย 2021-08-24 17:40
    关注
        let myVideo = document.getElementById("myVideo");
        let remoteVideo = document.getElementById("remoteVideo");
    
        async function openVideo() {
    
            try {
                //本地VIDEO-本地正常
                var curStream = await navigator.mediaDevices.getUserMedia(myConstraints);
                myVideo.srcObject = curStream;
                myVideo.onloadedmetadata = function(evt) {
                    myVideo.play();
                };
                remoteVideo.onloadedmetadata = function(evt) {
                    remoteVideo.play(); //
                };
    
                //远程VIDEO-一直没办法显示                    
                remoteMediaSource = new MediaSource();
                remoteVideo.src = URL.createObjectURL(remoteMediaSource);
    
    
                remoteMediaSource.addEventListener('sourceopen', () => {
                    //URL.revokeObjectURL(remoteVideo.src);                        
                    remoteSourceBuffer = remoteMediaSource.addSourceBuffer(videoMimeType);
                    remoteSourceBuffer.addEventListener('updateend', () => {
                        remoteMediaSource.endOfStream();
                        remoteVideo.play();
                    });
    
    
                });
    
                //////////////
                //录制发送
                let myMRecord = new MediaRecorder(curStream);
                myMRecord.ondataavailable = function(curBlob) {
                    var txtLocal = document.getElementById("txtLocal");
                    txtLocal.value = (curBlob.data.size); //blob流
                    //data流;size为流大小
                    if (myWebSocket == null) {
                        ConnectWebSocket();
    
                    } else {
                        if (curBlob.data && curBlob.data.size > 0) {
    
    
                            if (myWebSocket != null) {
    

    //这里的发送也是使用了两个方法,都不行;
    //var fr = new FileReader();
    //fr.readAsDataURL(curBlob.data);
    //fr.onload = function (e) {
    // myWebSocket.send(fr.result);
    //};

                                myWebSocket.send(curBlob.data);
                            }
    
    
                        }
    
                    }
                };
                myMRecord.start(1000);
            } catch {
                alert("打开摄像头失败.");
            }
        }
    
        function ConnectWebSocket() {
            if (myWebSocket != null) return;
             
            var wsUrl = "wss://www.address.com/ws/test";//自乙的地址一定要是HTTPS
         
            myWebSocket = new WebSocket(wsUrl); //这个定义必须在方法前
            myWebSocket.binaryType = 'arraybuffer'; //获取字节数据
    
            myWebSocket.onopen = function(evt) {
                //ViewLog("连接成功");
            };
            myWebSocket.onmessage = function(evt) {
    

    //这里接收到的数据不知道如何解析;始终没有显示

                remoteSourceBuffer.appendBuffer(evt.data);
                // var fr = new FileReader();
                // fr.onload = function(e) {
                //     remoteSourceBuffer.appendBuffer(e.target.result);
                // };
                // // Convert blob to ArrayBuffer
                // fr.readAsArrayBuffer(evt.data);
    
            };
            myWebSocket.onclose = function(evt) {
                myWebSocket = null;
                alert("连接断开");
            };
            myWebSocket.onerror = function(evt) {
    
                var msg = evt.data;
                alert("错误:" + msg);
            }
        }
    
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 10月5日
  • 已采纳回答 9月27日
  • 修改了问题 8月24日
  • 创建了问题 8月24日

悬赏问题

  • ¥15 关于#linux#的问题(输入输出错误):出现这个界面接着我重新装系统,又让修电脑的师傅帮我扫描硬盘(没有问题)用着用着又卡死(相关搜索:固态硬盘)
  • ¥15 cv::resize不同线程时间不同
  • ¥15 web课程,怎么做啊😭没好好听课 根本不知道怎么下手
  • ¥15 做一个关于单片机的比较难的代码,然后搞一个PPT进行解释
  • ¥15 python提取.csv文件中的链接会经常出现爬取失败
  • ¥15 数据结构中的数组地址问题
  • ¥15 maya的mel里,怎样先选择模型A,然后利用mel脚本自动选择有相同名字的模型B呢。
  • ¥15 Python题,根本不会啊
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题