当前位置：首页 > news >正文

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

news 2026/4/3 4:59:59

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

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

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

编程日记 2023/9/6 2:25:21

LeetCode 2707. Extra Characters in a String【动态规划,记忆化搜索,Trie】1735

本文属于「征服LeetCode」系列文章之一，这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁，本系列将至少持续到刷完所有无锁题之日为止；由于LeetCode还在不断地创建新题，本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/9/6 2:24:21

设计模式行为型-模板模式

文章目录一：模板方法设计模式概述1.1 简介1.2 定义和目的1.3 关键特点1.4 适用场景二：模板方法设计模式基本原理2.1 抽象类2.1.1 定义和作用2.1.2 模板方法2.1.3 具体方法 2.2 具体类2.2.1 定义和作用2.2.2 实现抽象类中的抽象方法2.2.3 覆盖钩子方法 …...

编程日记 2023/9/6 2:23:20

9.3.tensorRT高级(4)封装系列-自动驾驶案例项目self-driving-车道线检测

目录前言1. 车道线检测总结前言杜老师推出的 tensorRT从零起步高性能部署课程，之前有看过一遍，但是没有做笔记，很多东西也忘了。这次重新撸一遍，顺便记记笔记。本次课程学习 tensorRT 高级-自动驾驶案例项目self-driving-车道…...

编程日记 2023/9/6 2:22:16

django.core.exceptions.AppRegistryNotReady: Apps aren‘t loaded yet.

运行django测试用例报错django.core.exceptions.AppRegistryNotReady: Apps arent loaded yet. 解决：在测试文件上方加上 django.setup() django.setup()是Django框架中的一个函数。它用于在非Django环境下使用Django的各种功能、模型和设置。在常规的Django应用…...

编程日记 2023/9/6 2:21:15

【C#】C#调用进程打开一个exe程序

文章目录一、过程二、效果总结一、过程新建WinForm程序，并写入代码，明确要调用的程序的绝对路径（或相对路径）下的exe文件。调用代码： 这里我调用的另一个程序的路径是： F:\WindowsFormsApplication2…...

编程日记 2023/9/6 2:20:12

宝塔面板定时监控和重启MySQL数据库(计划任务)

往期教程如果还有不了解宝塔面板怎么使用的小伙伴，可以看下我总结的系列教程，保证从新手变老鸟： 【建站流程科普】个人和企业搭建网站基本流程及六个主要步骤常见的VPS主机运维面板汇总—网站运维面板云服务器，VPS&#xff0…...

编程日记 2023/9/6 2:19:11

Beats：安装及配置 Metricbeat （二）- 8.x

这篇文章是继文章 “Beats：安装及配置 Metricbeat （一）- 8.x” 的续篇。你可以先阅读之前的那篇文章再继续阅读这篇文章。我们在这篇文章中继续之前的探讨。使用 fingerprint 来代替证书在实际的使用中，我们需要从 Elasticsear…...

编程日记 2023/9/6 2:18:10

Redis之哨兵模式解读

目录基本介绍单哨兵模式多哨兵模式哨兵的本质配置哨兵模式故障恢复原理哨兵监控工作流程哨兵模式缺点基本介绍当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用。这不是一种推荐的方式,更多…...

编程日记 2023/9/6 2:17:06

题目：2644.找出可整除性得分最大的整数

题目来源： leetcode题目，网址：2644. 找出可整除性得分最大的整数 - 力扣（LeetCode） 解题思路： 遍历计算即可。解题代码： class Solution {public int maxDivScore(int[] nums, int[] di…...

编程日记 2023/9/6 2:16:05

报错：axios 发送的接口请求 404

axios 发送的接口请求 404 一、问题二、分析一、问题二、分析 axios 发送的接口请求 404，根本没有把接口信息发送到后端，这个时候你可以查看检查一下自己的接口名字，或让后端配合换一个接口名字再发送一次接口请求...

编程日记 2023/9/6 2:15:04

三年前端还不会配置Nginx？刷完这篇就够了

什么是Nginx Nginx是一个开源的高性能HTTP和反向代理服务器。它可以用于处理静态资源、负载均衡、反向代理和缓存等任务。Nginx被广泛用于构建高可用性、高性能的Web应用程序和网站。它具有低内存消耗、高并发能力和良好的稳定性，因此在互联网领域非常受欢迎。为…...

编程日记 2023/9/6 2:14:02

blender 场景灯光基础设置

在 blender 中，打光分为两个部分，一个是世界光，一个是场景光； 世界光： 世界光：在 Blender 中，世界光指的是用于设置场景整体照明的环境光。它可以通过调整颜色、强度、阴影等参数来影响场景的…...

编程日记 2023/9/6 2:12:59

如何查看 SQLyog 中数据库连接信息中的密码

SQLyog 数据库连接信息中的密码无法选择明文展示，也无法复制可以将数据库连接信息导出到文本查看明文密码工具--》导入/导出连接详情：...

编程日记 2023/9/6 2:11:58

【SpringSecurity】八、集成图片验证码

文章目录 1、生成图片验证码2、创建验证码过滤器3、将过滤器加入SpringSecurity过滤链4、修改登录页 SpringSecurity是通过过滤器链来完成的，接下来的验证码，可以尝试创建一个过滤器放到Security的过滤器链中，在自定义的过滤器中比较验证码。…...

编程日记 2023/9/6 2:10:57

【本地代码问题】启动程序，报错：java.lang.IllegalArgumentException: No selectors

启动程序的时候报错了问题怎么出现的解决方式，注释掉jetty的内容，回归tomcat的使用问题怎么出现的我本地启动程序的时候报错了：报的是这个错误，可能和容器的选择有关吧解决方式，注释掉jetty的内容，回…...

编程日记 2023/9/6 2:09:56

手写RPC框架--4.服务注册

RPC框架-Gitee代码(麻烦点个Starred, 支持一下吧) RPC框架-GitHub代码(麻烦点个Starred, 支持一下吧) 服务注册服务注册a.添加服务节点和主机节点b.抽象注册中心c.本地服务列表服务注册 a.添加服务节点和主机节点主要完成服务注册和发现的功能，其具体流程如下&…...

编程日记 2023/9/6 2:08:54

操作的前提用 sys 用户以 SYSDBA 角色登录第一种解锁方式 1.查询被锁的表 select object_name,machine,s.sid,s.serial# from v$locked_object l,dba_objects o ,v$session s where l.object_id　　o.object_id and l.session_ids.sid;2.查询那个session引起表被锁 sele…...

编程日记 2023/9/6 2:07:53

使用Dbeaver连接GaussDB

1.下载DBeaver，官网地址 2.安装软件，打开软件，点击数据库->驱动管理器，具体操作如下图： 3、选择新建后进行参数设置，如下图： 具体参数如下图驱动名称: GS #随便定义驱动类型&#…...

编程日记 2023/9/6 2:06:52

WSL使用技巧 / 虚拟机对比

WSL使用技巧 / 虚拟机对比前言虚拟机比较VMware使用技巧WSL使用技巧官方文档工具安装WSL基本命令运行命令关闭卸载磁盘管理导入导出指定安装路径前言本文介绍了VMware和WSL的区别，并详细介绍了WSL的使用方法和技巧。虚拟机比较 VMware 比较灵活，拥…...

编程日记 2023/9/6 2:05:51

Oak安全最佳实践：10个防范常见Web攻击的终极指南

Oak安全最佳实践：10个防范常见Web攻击的终极指南【免费下载链接】oak A middleware framework for handling HTTP with Deno 🐿️ 🦕 项目地址: https://gitcode.com/gh_mirrors/oa/oak Oak是一个基于Deno的现代化中间件框架&#xf…...

编程新知 2026/4/3 4:13:22

ChatGLM3-6B-128K vs ChatGLM3-6B：Ollama环境下的8K/128K场景选型指南

ChatGLM3-6B-128K vs ChatGLM3-6B：Ollama环境下的8K/128K场景选型指南 1. 两种模型的核心差异 ChatGLM3-6B和ChatGLM3-6B-128K都是基于ChatGLM3系列的开源对话模型，但它们在处理长文本能力上有着本质区别。 ChatGLM3-6B是标准版本，支持最多…...

编程新知 2026/4/3 3:51:11

神马网站 SEO 优化对网站转化率的影响

神马网站 SEO 优化对网站转化率的影响在当今互联网时代，网站的流量和转化率直接关系到企业的销售和品牌的知名度。仅仅拥有流量并不意味着一切都顺风顺水，如何把这些流量转化为实际的业务和销售，这就涉及到神马网站的SEO优化对网站转化率的…...

编程新知 2026/4/3 3:39:01

东华OJ-基础题-33-数字之和（C++）

问题描述输入一个正整数，求这个正整数的各位数字之和。输入说明你的程序需要从标准输入设备（通常为键盘）中读入多组测试数据。每组测试数据为正整数，每行一个N，N小于20000输出说明对每组测试数据，你的程…...

编程新知 2026/4/3 3:24:48

TimesFM时间序列预测模型实战：从基础模型到高效部署的完整路径

TimesFM时间序列预测模型实战：从基础模型到高效部署的完整路径【免费下载链接】timesfm TimesFM (Time Series Foundation Model) is a pretrained time-series foundation model developed by Google Research for time-series forecasting. 项目地址: https://…...

编程新知 2026/4/3 3:24:48