首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >是否可以在不使用WebRTC的情况下通过websocket进行视频通话?

是否可以在不使用WebRTC的情况下通过websocket进行视频通话?
EN

Stack Overflow用户
提问于 2021-09-29 14:16:58
回答 1查看 1K关注 0票数 3

我想要流视频(与音频)通过websocket的一个方向,而不使用眩晕/转服务器。写这样一个网络应用程序是可能的吗?

数据将像这样流动:

点对点A -> Websocket服务器-> Peer B

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-26 12:45:14

是的是可能的。如果你可以延迟0.5s

彩带:

代码语言:javascript
复制
navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(stream=>{
var ws,mediaRecorder;
var options = {
        mimeType: "video/webm;codecs=opus, vp8",
        bitsPerSecond:5000 //quality
        };

function handleVideo(){
  
    try{
        mediaRecorder.stop()
    }catch(e){}
    mediaRecorder=null;
    mediaRecorder = new MediaRecorder(stream,options);
    mediaRecorder.ondataavailable =function(e) {

        if(e.data&&e.data.size>0) {
            e.data.arrayBuffer().then(buffer=>{
                    ws.send(buffer)
              })
        }
    }
    mediaRecorder.start(300);
   }

   function connect(){
    ws = new WebSocket("wss://yourwebsocket.com")
    ws.binaryType = "arraybuffer"
    ws.onopen=handleVideo
    ws.onmessage=handleVideo
    ws.onclose=connect
   }
connect()

})
// so onmessage function neccessary for when someone join the socket stream again, because webm format need embl header

观察者:

代码语言:javascript
复制
var media,sourceBuffer,ws;
var video = document.getElementById('yourvideoid')

function handleStream(e){
    const buffer=e.data
    const data= new Uint8Array(buffer)
    
        if(data[0]===26&&data[1]===69&&data[2]===223){
            if(media){
            URL.revokeObjectURL(media)
            sourceBuffer=null;  
                 }
        
        media= new MediaSource();
        video.src = URL.createObjectURL(media);
        video.onloadedmetadata=function(){
            video.muted=false
            video.play()
        }
        
        media.onsourceopen=function(){
        sourceBuffer= media.addSourceBuffer("video/webm;codecs=opus, vp8");
        sourceBuffer.appendBuffer(buffer)
      }
    
        }
        
        else {
        if(!media)return;
        
            sourceBuffer.appendBuffer(buffer)
            
        }
}
function connect(){
    ws = new WebSocket("wss://yourwsserver.com")
    ws.binaryType = "arraybuffer"
    ws.onmessage=handleStream
    ws.onclose=connect
}
connect()
// we fetch data from websocket then add data to video buffer

nodejs服务器:

代码语言:javascript
复制
const EventEmitter = require('events');
const https = require('https');
const {Server} = require('ws'); //npm i ws

const emitter= new EventEmitter();
const app = https.createServer(options,function (req, res) {})
const wss = new Server({ server: app });


wss.on('connection', (socket,req) => {
    var isStreamer=false
    socket.fn=function(e){socket.send(e)}
    const interval= setInterval(socket.ping, 5000);
    emitter.on('data',socket.fn)
    emitter.emit('refresh','0')    

    socket.on('message', (data) => {
        isStreamer||(emitter.on('refresh',socket.fn),emitter.off('data',socket.fn),(isStreamer=true))
        emitter.emit('data',data)
    });

    socket.on('close', () => {
        clearInterval(interval)
        emitter.off('data',socket.fn)
        emitter.off('refresh',socket.fn)
        
    })
    socket.on('ping',socket.pong)
    socket.on("error", (err) => {})
});

app.listen(PORT,'0.0.0.0')

//u need to set option for https or use http instead
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69378155

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档