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

webRtc 示例

news 2025/9/18 22:24:31

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程目录 Web 项目 Docker 化部署概述Dockerfile 详解构建阶段生产阶段构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/8/12 16:28:43

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/9/6 5:44:49

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/9/18 14:42:40

springboot 百货中心供应链管理系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...

编程新知 2025/9/17 8:08:37

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/9/14 12:35:23

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/9/18 12:54:00

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/9/2 17:48:09

GitHub 趋势日报 (2025年06月06日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

C++ 设计模式《小明的奶茶加料风波》

👨‍🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...

编程新知 2025/9/1 17:56:35

在 Spring Boot 中使用 JSP

jsp？ 好多年没用了。重新整一下还费了点时间，记录一下。项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/9/7 8:49:20

相关文章：