当前位置:首页 » 《随便一记》 » 正文

使用js搭建简易的WebRTC实现视频直播

19 人参与  2024年02月15日 13:26  分类 : 《随便一记》  评论

点击全文阅读


首先需要一个信令服务器,我们使用nodejs来搭建。两个端:发送端和接收端。我的目录结构如下图:
流程 创建一个文件夹 WebRTC-Test。进入文件夹中,新建一个node的文件夹。使用终端并进入node的目录下,使用
npm init

创建package.json。

新建server.js,复制一下代码
const app = require('express')();const wsInstance = require('express-ws')(app);const cors = require('cors');app.use(cors({ origin: 'http://localhost:3000' }));app.ws('/', ws => {ws.on('message', data => {// 未做业务处理,收到消息后直接广播wsInstance.getWss().clients.forEach(server => {if (server !== ws) {server.send(data);console.log(data,)}});});});console.log("服务启动: http://localhost:8080");app.listen(8080, '0.0.0.0');
下载信令服务器的依赖。
npm install express;npm install express-ws;npm install cors;
使用node server.js启动node的服务。准备接收方的代码(receive.html)。
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">    <title>Receiver</title></head><body>    <video autoplay id="remote"></video></body><script>    const remoteVideo = document.querySelector('#remote')    const socket = new WebSocket('ws://localhost:8080');    socket.onopen = function () {        console.log("Socket Success")    }    let buddy = new RTCPeerConnection()    // 如果接收到对方的视频    socket.onmessage = function (e) {        const { type, sdp, iceCandidate } = JSON.parse(e.data)        console.log(type)        switch (type) {            case "offer":                buddy.setRemoteDescription(                    new RTCSessionDescription({ type, sdp })                )                buddy.createAnswer().then(answer => {                    buddy.setLocalDescription(answer)                    socket.send(JSON.stringify(answer))                })                break;            case "offer_ice":                buddy.addIceCandidate(iceCandidate)                break;            default:                break;        }    }    buddy.ontrack = function (e) {        remote.srcObject = e.streams[0]    }    buddy.onicecandidate = function (e) {        if (e.candidate) {            socket.send(JSON.stringify({                type: "answer_ice",                iceCandidate: e.candidate            }))        }    }</script></html>
准备发送方的代码(send.html)。
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">    <title>Send</title></head><body>    <script>        const socket = new WebSocket('ws://localhost:8080');        socket.onopen = function () {            console.log("Socket Success")        }        let peer = new RTCPeerConnection()        navigator.mediaDevices.getUserMedia({            video: true,            audio: true        }).then(stream => {            stream.getTracks().forEach(track => {                peer.addTrack(track, stream);            })            peer.createOffer().then(offer => {                peer.setLocalDescription(offer);                socket.send(JSON.stringify(offer));            })        })        peer.onicecandidate = function (e) {            if (e.candidate) {                socket.send(JSON.stringify({                    type: "offer_ice",                    iceCandidate: e.candidate                }))            }        }        // 如果接收到对方的视频        socket.onmessage = function (e) {            const { type, sdp, iceCandidate } = JSON.parse(e.data)            console.log(type)            switch (type) {                case "answer":                    peer.setRemoteDescription(                        new RTCSessionDescription({ type, sdp })                    )                    break;                case "answer_ice":                    peer.addIceCandidate(iceCandidate)                    break;                default:                    break;            }        }    </script></body></html>
使用vscode的插件live server启动两个html文件。
下载live server插件。

启动live server。

启动后两个端口号。


等全部启动后,查看接收端的页面,要等一段时间,可以看到摄像头拍到的画面。
接受端播放不了,在浏览器控制台中输入 remoteVideo.play() 就行
 


点击全文阅读


本文链接:http://zhangshiyu.com/post/68570.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1