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

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

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

      创建package.json。

    4. 新建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');
    5. 下载信令服务器的依赖。 
      npm install express;
npm install express-ws;
npm install cors;
    6. 使用node server.js启动node的服务。
    7. 准备接收方的代码（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>
    8. 准备发送方的代码（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>
    9. 使用vscode的插件live server启动两个html文件。
      下载live server插件。

      启动live server。

      启动后两个端口号。


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

相关文章：

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

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

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

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

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

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

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

文章目录 一&#xff1a;模板方法设计模式概述1.1 简介1.2 定义和目的1.3 关键特点1.4 适用场景 二&#xff1a;模板方法设计模式基本原理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从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 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. 解决&#xff1a;在测试文件上方加上 django.setup() django.setup()是Django框架中的一个函数。它用于在非Django环境下使用Django的各种功能、模型和设置。 在常规的Django应用…...

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

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

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

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

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

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

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

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

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

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

Redis之哨兵模式解读

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

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

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

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

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

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

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

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

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

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

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

blender 场景灯光基础设置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

oracle 解锁表

操作的前提 用 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&#xff0c;官网地址 2.安装软件&#xff0c;打开软件&#xff0c;点击数据库->驱动管理器&#xff0c;具体操作如下图&#xff1a; 3、选择新建后进行参数设置&#xff0c;如下图&#xff1a; 具体参数如下图 驱动名称: GS #随便定义 驱动类型&#…...

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

WSL使用技巧 / 虚拟机对比

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

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/7 11:50:28

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/7/7 15:15:24

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/7/6 17:08:17

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/7/6 18:35:52

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/7/7 20:58:52

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/7/6 6:16:10

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/6 3:14:03

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/7/7 19:19:37

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/7/7 3:33:18

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/6/16 8:33:36