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

首先需要一个信令服务器，我们使用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）。


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>Receivertitle>
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）。


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>Sendtitle>
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() 就行

相关阅读:
前进永无止境！Pipeline更新又双叒叕来了！
基于PB的企业人力资源信息系统设计与实现
 计算机组成原理之浮点四则运算
 ubuntu、linux in window安装docker教程
 Stable Diffusion基础：ControlNet之重新上色（黑白照片换新颜）
设计模式 — 抽象工厂模式
 04【C语言 & 趣味算法】“抓交通肇事犯”问题。算法改进：设置“标识变量”，有效减少循环次数。
猿创征文｜开发微信小程序入门到入土②（复习笔记）
Python 文件加密
 ET-G2-D24-4A-A、ET-G2-D24-2A-V两路独立设置比例控制器
原文地址：https://blog.csdn.net/weixin_38441229/article/details/132693113