WebSocket 视频通话 （延迟较大）

发送端

<div>
    <canvas id="canvas"></canvas>
    <video id="srcvideo"></video>
</div>
<div id="xs"></div>
<button id="startBtn" onclick="setRecorder(format);">开始</button>
<button id="stopBtn" onclick="stop()">结束</button>

<script>
    let stream
    let recorder
    ws = new WebSocket('ws://127.0.0.1:8081')

    navigator.mediaDevices.getUserMedia({video: true}).then(s => stream = s)
    format = 'video/webm;codecs=vp8'
    function setRecorder(format) {
         recorder = new MediaRecorder(stream, {
            mimeType: format
        });
        recorder.ondataavailable = e => {
            ws.send(e.data)
        }
        recorder.start(10);
    }

    function stop() {
        recorder.stop();
    }

</script>

接收端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<video controls autoplay ></video>
<script>
    var video = document.querySelector('video');
    var sourceBuffer

    var mediaSource = new MediaSource;
    video.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen);
    function sourceOpen (_) {
        sourceBuffer = this.addSourceBuffer('video/webm;codecs=vp8');
        sourceBuffer.addEventListener('updateend', function (_) {})//video.play();});
    };

    ws=new WebSocket('ws://127.0.0.1:8081')
    ws.onopen= function () {}
    ws.onmessage=function onMessage(event){
        var reader = new FileReader();
        reader.onloadend = function(e){	sourceBuffer.appendBuffer(reader.result);}
        reader.readAsArrayBuffer(event.data);
    }

</script>
</body>
</html>

服务端

const express = require('express');
const app = express();

app.use(express.static('client'));
const wsInstance = require('express-ws')(app);

app.ws('/', ws => {
    ws.on('message', data => {
        wsInstance.getWss().clients.forEach(server => {
            if (server !== ws) {
                server.send(data);
            }
        });
    });
});

app.listen(8081);
posted @ 2024-03-07 09:04  vx_guanchaoguo0  阅读(33)  评论(0)  编辑  收藏  举报