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

webRtc 示例

news 2026/2/9 0:15:00

1、使用socket.io进行会话

2、为了方便，参数写死在前端了，前端界面1代码如下（由界面1发起视频）：

<!DOCTYPE html>
<html><head><title>Socket.IO chat</title><meta charset="utf-8"><meta name="description" content="WebRTC code samples"><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"><meta itemprop="description" content="Client-side WebRTC code samples"><meta itemprop="name" content="WebRTC code samples"><meta name="mobile-web-app-capable" content="yes"><meta id="theme-color" name="theme-color" content="#ffffff"><!-- 引入2.0版本的socket.io文件 --><script src="socket.io.js"></script><script src="webrtc.js"></script><script src="jquery-3.6.4.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"><link rel="stylesheet" href="css/main.css" /><link rel="stylesheet" href="css/c1/main.css" /></head><body><div id="container"><video id="localVideo" title="a" playsinline autoplay muted></video><video id="remoteVideo" title="b" playsinline autoplay></video><div><button id="prepareBtn" type="button" onclick="prepare()">准备</button><button id="callBtn" type="button" onclick="callVideo()">呼叫</button><button id="cancelBtn" type="button" onclick="cancelVideo()">挂断</button></div></div><script>const prepareButton = document.getElementById('prepareBtn');const callBtn = document.getElementById('callBtn');const cancelBtn = document.getElementById('cancelBtn');const localVideo = document.getElementById('localVideo');const remoteVideo = document.getElementById('remoteVideo');let localStream;let pc1;let pc2;let to = '2';var iceServer = {{// urls: 'stun:stun.l.google.com:19302'urls: 'stun:stun.services.mozilla.com'}]};const offerOptions = {offerToReceiveAudio: 1,offerToReceiveVideo: 0};//建立socket连接const socket = io("https://192.168.3.21", {reconnectionDelayMax: 10000,auth: {token: "123"},query: {"userId": "1"}});socket.on("connect", () => {console.log("通道已建立")});//监听服务端发送的 topic1 消息socket.on("exchange", (msg) => {console.log("收到新的数据了");var data = JSON.parse(msg)console.log(data);var type = data.typeif (type === 'invite') {to = data.from} else if (type === 'recive') {to = data.from} else if (type === 'canditate') {if (data.data != undefined) {pc1.addIceCandidate(new RTCIceCandidate(data.data))}} else if (type === 'offer') {//设置远程应答pc1.setRemoteDescription(new RTCSessionDescription(data.data))pc1.createAnswer().then(function (answer) {send({type: 'answer',data: answer})return pc1.setLocalDescription(answer)}).then(sdp => {})} else if (type === 'answer') {if (data.data != undefined) {pc1.setRemoteDescription(new RTCSessionDescription(data.data))}}});function gotStream(stream) {localVideo.srcObject = stream;localStream = stream;}async function init() {navigator.mediaDevices.getUserMedia({audio: true,video: false}).then(gotStream).catch(e => alert(`getUserMedia() error: ${e.name}`));}async function prepare() {init();var data = {type: 'invite',data: 'video',from: '1',toUserId: '2'};// send(data);prepareButton.disabled = true;}function call() {pc1 = new RTCPeerConnection(iceServer);pc1.onicecandidate = e => onIceCandidate(pc1, e);// 有远程视频流时，显示远程视频流 pc1.addEventListener('track', event => {// remoteVideo.srcObject = event.streams[0]// remoteVideo.onloadedmetadata = function (e) {//     remoteVideo.play()// }})pc1.addEventListener('addstream', e => {console.log("AAAAAAAAAAA")console.log(e);remoteVideo.srcObject = e.stream})//初始化本人的视频流navigator.mediaDevices.getUserMedia({audio: false,video: true}).then(stream => {// 将视频流写入到video标签localVideo.srcObject = stream;localStream = stream;stream.getTracks().forEach(track => {pc1.addTrack(track, stream)});//向对方发送应答pc1.createOffer().then(sdp => {pc1.setLocalDescription(sdp)send({type: 'offer',data: sdp})})})localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));callBtn.disabled = true;}function onIceCandidate(pc, event) {if (event.candidate) {send({type: 'canditate',data: event.candidate})}}function send(data) {data.toUserId = data.toUserId || toconsole.log(data)socket.emit("exchange", JSON.stringify(data))}function callVideo() {call();}function cancelVideo() {if (pc1 != null && pc1 != undefined) {pc1.close();}}</script><style>#video {background-color: black;height: 30vh;}</style>
</body></html>

3、前端界面2代码如下（当界面1发起视频呼叫后，该界面被动应答）：

<!DOCTYPE html>
<html lang="zh"><head><title>Socket.IO chat</title><meta charset="utf-8"><meta name="description" content="WebRTC code samples"><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"><meta itemprop="description" content="Client-side WebRTC code samples"><meta itemprop="name" content="WebRTC code samples"><meta name="mobile-web-app-capable" content="yes"><meta id="theme-color" name="theme-color" content="#ffffff"><!-- 引入2.0版本的socket.io文件 --><script src="socket.io.js"></script><script src="webrtc.js"></script><script src="jquery-3.6.4.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"><link rel="stylesheet" href="css/main.css" /><link rel="stylesheet" href="css/c1/main.css" />
</head><body><div id="container"><video id="localVideo" title="a" playsinline autoplay muted></video><video id="remoteVideo" title="b" playsinline autoplay></video></div><script>const localVideo = document.getElementById('localVideo');const remoteVideo = document.getElementById('remoteVideo');let localStream;let pc1;let pc2;let to = '1';var iceServer = {{// urls: 'stun:stun.l.google.com:19302'urls: 'stun:stun.services.mozilla.com'}]};//建立socket连接const socket = io("https://192.168.3.21", {reconnectionDelayMax: 10000,auth: {token: "123"},query: {"userId": "2"}});socket.on("connect", () => {console.log("通道已建立")});//监听服务端发送的 topic1 消息socket.on("exchange", (msg) => {console.log("收到新的数据了");var data = JSON.parse(msg)var type = data.typeconsole.log({"name": "接收方",data});if (type === 'invite') {to = data.from//打开自己的摄像头init();} else if (type === 'recive') {to = data.from} else if (type === 'canditate') {if (pc1 == null) {init();}if (data.data != undefined) {pc1.addIceCandidate(new RTCIceCandidate(data.data))}} else if (type === 'offer') {if (pc1 == null) {init();}pc1.setRemoteDescription(new RTCSessionDescription(data.data))pc1.createAnswer().then(function (answer) {send({type: 'answer',data: answer})return pc1.setLocalDescription(answer)}).then(sdp => {})} else if (type === 'answer') {if (data.data != undefined) {pc1.setRemoteDescription(new RTCSessionDescription(data.data))}}});function gotStream(stream) {localVideo.srcObject = stream;localStream = stream;}function init() {navigator.mediaDevices.getUserMedia({audio: true,video: false}).then(gotStream).catch(e => alert(`getUserMedia() error: ${e.name}`));call();}function onIceCandidate(pc, event) {if (event.candidate) {send({type: 'canditate',data: event.candidate})}}function call() {pc1 = new RTCPeerConnection(iceServer);//获取本地网络信息，并发送给通信方 pc1.onicecandidate = e => onIceCandidate(pc1, e);// 有远程视频流时，显示远程视频流 // pc1.addEventListener('track', event => {//     console.log("BBBBBBBBBBBBBBBBBBBBBBBBB")//     console.log(event);//     console.log(localVideo.srcObject)//     console.log("BBBBBBBBBBBBBBBBBBBBBBBBB+")//     remoteVideo.srcObject = event.streams[0]//     remoteVideo.onloadedmetadata = function (e) {//         console.log("加载完毕")//         remoteVideo.play()//     }// })pc1.addEventListener('addstream', e => {// 将对方的视频流写入到video标签中remoteVideo.srcObject = e.stream})//本地视频流量，打开视频流navigator.mediaDevices.getUserMedia({audio: false,video: true}).then(stream => {// 将视频流写入到video标签中                localVideo.srcObject = stream;localStream = stream;stream.getTracks().forEach(track => {pc1.addTrack(track, stream)})pc1.createOffer().then(sdp => {pc1.setLocalDescription(sdp)send({type: 'offer',data: sdp})})})}function send(data) {data.toUserId = data.toUserId || toconsole.log({"name": "发送",data})socket.emit("exchange", JSON.stringify(data))}</script><style>#video {background-color: black;height: 30vh;}</style>
</body></html>

WebRTC学习（六）端对端传输_51CTO博客_webrtc学习

webRTC结合webSocket实时通信 - 掘金

4、关于 coturn 信令服务的安装，参考以下文档：coturn安装以及报错“coturn/src/apps/relay/netengine.c:316：对‘SSL_CTX_up_ref’未定义的引用“_coturn 启动报错_Mango酱的博客-CSDN博客

5、coturn 安装后的测试：Trickle ICE (webrtc.github.io)

6、代码中进行如下设置：

  //该参数为了var iceServer = {// iceServers: [{//     urls: 'stun:stun.l.google.com:19302'// }]iceServers: [{urls: 'stun:stun.services.mozilla.com'},{urls: 'turn:ip:3478',credential: '密码',username: '账号'}]};

webRtc 示例

1、使用socket.io进行会话 2、为了方便，参数写死在前端了，前端界面1代码如下（由界面1发起视频）： <!DOCTYPE html> <html><head><title>Socket.IO chat</title><meta charset"…...

编程日记 2023/9/2 11:40:29

【RabbitMQ】服务启动成功，无法访问localhost:15672（RabbitMQ Management）

问题描述 RabbitMQ 服务已经启动成功，已经安装rabbitmq_management插件，无法访问RabbitMQ Management（http://localhost:15672/）。原因分析 15672端口被Microsoft Edge占用。解决方案打开cmd终端，输入指令&#…...

编程日记 2023/9/2 11:39:29

【操作记录】pytorch_geometric安装方法

pytorch_geometric安装方法 github地址主要不要直接pip install安装，会由于依赖无法安装而失败点击here手动安装依赖选择对应的pytorch版本，我的是Win10 Python3.8.3Pytorch1.8.1CUDA10.2 手动下载四个依赖包本地安装： 主要不要直接&am…...

编程日记 2023/9/2 11:38:27

EventSystem 事件系统

EventSystem 事件系统事件系统在开发中必不可少事件系统使用观察者模式可以极大程度降低程序的耦合，之前的文章也讲过事件系统但是不够高效简洁，如何轻便高效优雅的实现一个事件呢？依然基于之前的AssemblyManager 程序集管理器和SingletonS…...

编程日记 2023/9/2 11:37:26

2.2 Vector＜T＞动态数组（模板语法）

C数据结构与算法目录本文前驱课程 1 C自学精简教程目录(必读) 2 动态数组 Vector（难度1） 其中，2 是 1 中的一个作业。2 中详细讲解了动态数组实现的基本原理。本文目标 1 学会写基本的C类模板语法； 2 为以后熟练使用 S…...

编程日记 2023/9/2 11:36:24

dockerfile 例子（二）

Dockerfile由一行一行的命令语句组成，#开头的为注释行。Dockerfile文件内容分为四个部分：基础镜像信息、维护者信息、镜像操作指令以及容器启动执行指令。接下来给大家列出Dockerfile中主要命令的说明。 FROM，指定所创建镜像的基础镜像。 …...

编程日记 2023/9/2 11:35:22

openssh---Windows下git安装配置gitlab

安装openssh 1. 专业版Win10/11默认自带，可以查看是否开启 1. Get-WindowsCapability -Online | Where-Object Name -like OpenSSH* 2. Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0 3. Add-WindowsCapability -Online -Name OpenSSH.Serve…...

编程日记 2023/9/2 11:34:21

vscode宏键绑定

开发语言php 实现输入[ 得到 [];的效果 [win]ctrlp,[mac]superp 输入>keyboard 选择在json文件里增加(目前有缺陷,sublime的设置是比较完美的.或者phpstorm默认不需要配置): {"key": "[","command": "editor.action.insertSnippet&…...

编程日记 2023/9/2 11:33:20

外贸企业如何借助CRM提升企业发展？

外贸企业竞争激烈，提高自身竞争力，扩大海外业务市场，是每个外贸企业的目标。为了实现这一目标，不少外贸企业借助CRM系统，优化业务流程，管理维护客户，从而实现可持续发展。那么，外贸企…...

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

初步了解ES

一、ES基础查询 1、es基础查询 1.1 准备数据 # 准备数据 PUT test_index/_doc/1 {"name":"顾老二","age":30,"from": "gu","desc": "皮肤黑、武器长、性格直","tags": ["黑", &…...

编程日记 2023/9/2 11:31:17

Linux基础（三）

一.系统基本优化关闭selinux:getenforce 查看selinux状态setenforce 0 临时关闭vim /etc/sysconfig/selinux 永久关闭SELINUXdisabled 关闭防火墙：systemctl stop firewalld 临时关闭防火墙systemctl disable firewalld 永久关闭防火墙sys…...

编程日记 2023/9/2 11:30:16

python函数调用的四种方式

第一种：参数按顺序从第一个参数往后排#标准调用 def normal_invoke(x, y):print("--normal_invoke:--" )print("x is %d" %x )print("y is %d" %y) # 标准调用 normal_invoke(1, 2) 运行结果： --normal_invoke:-- x is 1 …...

编程日记 2023/9/2 11:29:14

如何将两个pdf合并成一个？pdf合并技巧分享

在日常工作过程当中，我们经常需要处理一些文件，而文件的处理往往是琐碎的，想要提高工作效率，需要选择一些合适的方法，并掌握一定的技巧，那么，如何将两个pdf合并成一个?pdf合并技巧有哪些呢?接…...

编程日记 2023/9/2 11:28:13

qt : day 3

1.完成登录框的按钮操作，并在登录成功后进行界面跳转 ------------------------------------------------------------------ .pro ------------------------------------------------------------------ QT core gui texttospeech greaterThan(QT_MAJOR_V…...

编程日记 2023/9/2 11:27:11

flutter高德地图大头针

1、效果图 2、pub get #地图定位 amap_flutter_map: ^3.0.0 amap_flutter_location: ^3.0.0 3、上代码 import dart:async; import dart:io;import package:amap_flutter_location/amap_flutter_location.dart; import package:amap_flutter_location/amap_location_option…...

编程日记 2023/9/2 11:26:10

【线性代数】矩阵求导的本质与分子布局、分母布局的本质（矩阵求导——本质篇）

矩阵求导的本质与分子布局、分母布局的本质（矩阵求导——本质篇） 说在前面一. 函数与标量、向量、矩阵二. 矩阵求导的本质三. 矩阵求导结果的布局四. 分子布局、分母布局的本质五. 向量变元的实值标量函数说在前面我将严谨地说明矩阵求导的本质与分子布…...

编程日记 2023/9/2 11:25:09

快速了解状态管理库Pinia及其使用方法

目录 1.pinia是什么 2.为什么要使用pinia 3.pinia的优点 4.pinia在项目中使用 ①创建一个使用pinia的Vue3项目 ②在页面使用store 1.pinia是什么 Pinia 起源于一次探索 Vuex 下一个迭代的实验，如果你学过Vue2，那么你一定使用过Vuex。Vuex在Vue2中主…...

编程日记 2023/9/2 11:24:07

scratch绘制同心圆 2023年5月中国电子学会图形化编程少儿编程 scratch编程等级考试四级真题和答案解析

目录 scratch绘制同心圆一、题目要求 1、准备工作 2、功能实现二、案例分析 <...

编程日记 2023/9/2 11:23:05

【LeetCode】3. 无重复字符的最长子串

3. 无重复字符的最长子串（中等） 方法：滑动窗口哈希表思路这道题主要用到思路是：滑动窗口什么是滑动窗口？ 其实就是一个队列,比如例题中的 abcabcbb，进入这个队列（窗口）为 ab…...

编程日记 2023/9/2 11:22:03

苹果macOS 14开发者预览版Beta 7发布新增超过100款视频壁纸和屏保

8 月 31 日，苹果向 Mac 电脑用户推送了 macOS 14 开发者预览版 Beta 7 更新（内部版本号：23A5337a），本次更新距离上次发布隔了 8 天。苹果发布 Beta 7 更新的同时，还发布了第 6 个公测版，正式版…...

编程日记 2023/9/2 11:20:44

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制指定固定的延迟级别通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/8 21:59:25

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下：隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

Day131 | 灵神 | 回溯算法 | 子集型子集

Day131 | 灵神 | 回溯算法 | 子集型子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤运行安装程序： 双击下载的.exe安装文件如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

相关文章：