- 首先需要一个信令服务器,我们使用nodejs来搭建。两个端:发送端和接收端。
- 我的目录结构如下图:
- 流程
-
创建一个文件夹 WebRTC-Test。
-
进入文件夹中,新建一个node的文件夹。
-
使用终端并进入node的目录下,使用
npm init
创建package.json。
-
新建server.js,复制一下代码
javascriptconst 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');
-
下载信令服务器的依赖。
javascriptnpm install express; npm install express-ws; npm install cors;
-
使用node server.js启动node的服务。
-
准备接收方的代码(receive.html)。
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)。
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() 就行
-
使用js搭建简易的WebRTC实现视频直播
姚*鸿的博客2023-09-09 23:45
相关推荐
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建lyj1689976 小时前
el-tree选中数据重组成树lonelyhiker7 小时前
javascript的原型链MarkHD9 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互柴柴的小记9 小时前
前端vue引入特殊字体不生效bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)程序员黄同学10 小时前
请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ?