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

01_WebRtc_一对一视频通话

news 2026/1/24 18:36:26

文章目录

    • 通话网页的设计
    • 客户端实现
      • Web的API
    • 服务端实现

2024-9-20
很久没有写博客啦，回顾总结这段时间的成果，
写下博客放松下（开始偷懒啦）主要内容：实现网页（html）打开摄像头并显示到页面需要通过websocket连接

请添加图片描述

通话网页的设计

会前端的博友可以自己好好设计一下布局和样式
主要实现网页的通话界面

<html><head><title>The first to test</title></head><h1>Client_Meeting</h1><div id="buttons"><input id="zero_RoomId" type="text" placeholder="请输入房间ID" maxLengh="48"/><button id="joinBtn" type="button">加入</button><button id="leaveBtn" type="button">离开</button></div><div id="videos"><video id="localVideo" autoplay muted playsinline>本地窗口</video><video id="remoteVideo" autoplay playsinline>远端窗口</video></div><!-- autoplay: 这是一个布尔属性，表示视频在页面加载完成后立即开始播放。如果设置为autoplay，视频将自动播放。muted: 这也是一个布尔属性，表示视频在播放时默认静音。这对于自动播放视频非常有用，因为许多浏览器要求自动播放的视频必须静音。playsinline: 这是一个布尔属性，表示视频在移动设备上播放时不会进入全屏模式，而是在页面内播放。这对于提供更好的用户体验很有帮助。--><script src="js/main.js"></script><!--导入js路径-->
</html>

客户端实现

实现与网页，服务端交互，个人认为需要格外注意
构造函数（ZeroRTCEngine）与全局变量（zeroRTCEngine）,全局变量如何实现调用其方法等

/*用于启用严格模式,
严格模式是一种使得JavaScript引擎以更严格的规则来运行代码的模式,
这有助于防止某些常见的编码错误,并确保代码的安全性和健壮性*/
'use strict';//document.querySelector: 这是一个方法,用于选择文档中的一个元素
var localVideo=document.querySelector('#localVideo');
var remoteVideo=document.querySelector('#remoteVideo');
var localStream =null;var zeroRTCEngine;//ZeroRTCEngine 构造函数
//将实例赋值给全局变量 zeroRTCEngine，以便在其他地方引用。
var ZeroRTCEngine = function(wurl) {this.init(wurl);zeroRTCEngine = this;return this;
}
......
//创建一个ZeroRTCEngine实例
zeroRTCEngine = new ZeroRTCEngine("ws://192.168.80.130:8099");
zeroRTCEngine.createwebsocket();/*document.getElementById('joinBtn'): 这是一个调用document.getElementById方法的语句，
用于获取页面上ID为joinBtn的元素。这个方法返回一个DOM对象，通常是一个按钮。
.onclick: 这是DOM对象的属性，用于设置该元素的点击事件处理函数。*/
document.getElementById('joinBtn').onclick=function(){
console.log("加入按钮被点击");
//初始化本地码流
initLocalStream();
}

Web的API

 zeroRTCEngine.signaling = new WebSocket(this.wurl);console.log("onError: " + event.data);//使用console.log输出一条消息到控制台navigator.mediaDevices.getUserMedia({ audio: true, video: true })//请求用户的媒
//体设备（如摄像头和麦克风）的访问权限。document.getElementById('joinBtn').onclick=function()//获取页面上ID为joinBtn的元素。这个方法返回一个DOM对象，通常是一个按钮。
.onclick: 这是DOM对象的属性，用于设置该元素的点击事件处理函数

服务端实现

实现与客户端交互，以及信令服务器等的部署比较困难

var ws = require("nodejs-websocket")
var port = 8099;//回调函数
//conn 是一个新的连接对象，代表与客户端的 WebSocket 连接。
var server = ws.createServer(function(conn){console.log("创建一个新的连接--------")conn.sendText("我收到你的连接了....");//为连接对象添加一个监听器，用于处理接收到的文本消息。conn.on("text", function(str) {//当服务器接收到客户端发送的文本消息时，控制台会输出这条消息。console.info("recv msg:" + str);});conn.on("close", function(code, reason) {console.info("连接关闭 code: " + code + ", reason: " + reason);});/*conn：这是一个 WebSocket 连接对象，通常由 WebSocket 服务器创建并用于管理与客户端的连接。.on("error", ...)：.on 是 Node.js 事件监听器的常用方法，用于给对象添加一个事件监听器。"error" 是一个字符串，指定了要监听的事件类型。在这个例子中，它指定了错误事件，当与 WebSocket 连接相关的错误发生时，这个事件会被触发。function(err) {...}：这是一个回调函数，它将在指定的事件（在这个例子中是 "error" 事件）被触发时执行。err 是回调函数的参数，它代表错误对象。这个对象包含了错误的详细信息，例如错误消息、错误码等。*/conn.on("error", function(err) {console.info("监听到错误:" + err);});
}).listen(port);

相关文章：

01_WebRtc_一对一视频通话

文章目录 通话网页的设计客户端实现Web的API 服务端实现 2024-9-20 很久没有写博客啦&#xff0c;回顾总结这段时间的成果&#xff0c; 写下博客放松下&#xff08;开始偷懒啦&#xff09;主要内容&#xff1a;实现网页&#xff08;html&#xff09;打开摄像头并显示到页面需要…...

编程日记 2024/9/20 16:57:05

【小程序 - 大智慧】深入微信小程序的渲染周期

目录 前言应用生命周期页面的生命周期组件的生命周期渲染顺序页面路由运行机制更新机制同步更新异步更新 前言 跟 Vue、React 框架一样&#xff0c;微信小程序框架也存在生命周期&#xff0c;实质也是一堆会在特定时期执行的函数。 小程序中&#xff0c;生命周期主要分成了三…...

编程日记 2024/9/20 16:56:04

《深入了解 Linux 操作系统》

在计算机领域中&#xff0c;Linux 作为一种强大而重要的操作系统&#xff0c;有着广泛的应用场景&#xff0c;尤其在服务器端占据着举足轻重的地位。 一、Linux 简介 Linux 是一种操作系统&#xff0c;主要应用于服务器端。不同的厂商或个人会对 Linux 的内核进行封装&#xff…...

编程日记 2024/9/20 16:55:03

批评他人也需要技术

俗话说“人无完人&#xff0c;尺有所短&#xff0c;寸有所长”&#xff0c;每个人都有可能犯错误。我们犯错误&#xff0c;并不能说明我们一无是处&#xff1b;一个人做了一件好事&#xff0c;也不能说他做的每件事都是好的。 营造良好的氛围。一说到批评&#xff0c;我们许多…...

编程日记 2024/9/20 16:49:55

安装SQL Server遇到的问题

出现了一和二的问题&#xff0c;最后还是通过三完全卸载sqlserver安装成功了 一.安装过程中依次报错 1.MOF编译器无法连接WMI服务器。原因可能是语义错误(例如&#xff0c;与现有WMI知识库不兼容)或实际错误(例如WMI服务器启动失败)。 2.PerfLib 2.0计数器removal失败&#xf…...

编程日记 2024/9/20 16:48:54

java项目之编程训练系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的编程训练系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 编程训练系统的主要使用者管…...

编程日记 2024/9/20 16:41:45

MySQL的登陆错误：ERROR 1049 (42000): Unknown database ‘root‘

MySQL的登陆错误&#xff1a;ERROR 1049 (42000): Unknown database ‘root’ 安装MySQL的时候&#xff0c;到网上查的命令行登陆MySQL的方法都是mysql -u root -p password mysql -r root -p 123456但是奇怪的是这条命令我输进去死活都不对&#xff0c;它都会要求再输入一遍…...

编程日记 2024/9/20 16:40:44

vue使用vue-i18n实现国际化

我使用的是vue2.6版本&#xff0c;具体使用其他版本可以进行修改 一、安装 npm install vue-i18n -D 二、配置 1、文件配置 ①在src下创建 i18n 目录 ②在 i18n 目录下创建 langs 文件夹 和 index.js文件&#xff0c;具体如下 2、index.js代码如下&#xff0c;这里使用了…...

编程日记 2024/9/20 16:39:43

微信小程序如何设置左侧导航栏跟随页面滑动

一、使用 scroll-view 组件实现页面滚动 在页面的 wxml 文件中&#xff0c;将需要滚动的内容包裹在scroll - view组件内&#xff0c;例如&#xff1a; <scroll-view scroll-y"true" style"height: 800rpx;"><!-- 这里放置页面的主要内容 -->…...

编程日记 2024/9/20 16:38:41

个人小结（2.0）

离谱&#xff0c;困扰着几周的问题今天偶然发现了解决方法。 问题如下&#xff1a;就是对应的模块引入爆红&#xff0c;但是单击进入引入的文件没有问题 然后它的提示是&#xff1a; 无法找到模块“../views/screen/index.vue”的声明文件。“c:/Users/10834/Desktop/0716_pro…...

编程日记 2024/9/20 16:37:40

探索自动化的魔法：Python中的pyautogui库

文章目录 探索自动化的魔法&#xff1a;Python中的 pyautogui 库背景&#xff1a;为什么选择pyautogui&#xff1f;pyautogui是什么&#xff1f;如何安装pyautogui&#xff1f;五个简单的库函数使用方法场景应用常见Bug及解决方案总结 探索自动化的魔法&#xff1a;Python中的 …...

编程日记 2024/9/20 16:35:37

YOLOv9改进策略【Neck】| GSConv+Slim Neck：混合深度可分离卷积和标准卷积的轻量化网络设计

一、本文介绍 本文记录的是利用GsConv优化YOLOv9的颈部网络。深度可分离卷积&#xff08;DSC&#xff09;在轻量级模型中被广泛使用&#xff0c;但其在计算过程中会分离输入图像的通道信息&#xff0c;导致特征表示能力明显低于标准卷积&#xff08;SC&#xff09;&#xff0c…...

编程日记 2024/9/20 16:34:35

EasyExcel的基本使用——Java导入Excel数据

使用EasyExcel导入Excel数据有两种方式 无论哪种方式我们都需要建立Excel表格和Java对象的绑定 首先我们需要根据Excel表头定义一个对应的类 excel表示例&#xff1a; 对应的类&#xff1a; 使用ExcelProperty将excel列名和字段名绑定&#xff0c;括号里面填列名 package co…...

编程日记 2024/9/20 16:32:32

Apache Iceberg 试用

启动 spark-sql 因为 iceberg 相关的 jars 已经在 ${SPARK_HOME}/jars 目录&#xff0c;所以不用 --jars 或者 --package 参数。 spark-sql --master local[1] \--conf spark.sql.extensionsorg.apache.iceberg.spark.extensions.IcebergSparkSessionExtensions \--conf spar…...

编程日记 2024/9/20 16:29:11

速通汇编（六）认识栈，SS、SP寄存器，push和pop指令的作用

一&#xff0c;栈 &#xff08;一&#xff09;栈的特点 栈是一种具有特殊访问方式的存储空间&#xff0c;特殊在于&#xff0c;进出这块存储空间的数据&#xff0c;“先进后出&#xff0c;后进先出” 由于栈的这个“先进后出”的特点&#xff0c;我们可以利用其来很好的操作内…...

编程日记 2024/9/20 16:25:06

【Python机器学习】NLP信息提取——值得提取的信息

目录 提取GPS信息 提取日期 如下一些关键的定量信息值得“手写”正则表达式&#xff1a; GPS位置&#xff1b;日期&#xff1b;价格&#xff1b;数字。 和上述可以通过正则表达式轻松捕获的信息相比&#xff0c;其他一些重要的自然语言信息需要更复杂的模式&#xff1a; 问…...

编程日记 2024/9/20 16:21:00

代理IP批理检测工具,支持socks5,socks4,http和https代理批量检测是否可用

代理IP批理检测工具,支持socks5,socks4,http和https代理批量检测是否可用 工具使用c编写&#xff1a; 支持ipv4及ipv6代理服务器。 支持http https socks4及socks5代理的批量检测。 支持所有windows版本运行&#xff01; 导入方式支持手工选择文件及拖放文件。 导入格式支持三…...

编程日记 2024/9/20 16:19:58

AI视觉算法盒是什么？如何智能化升级网络摄像机，守护全方位安全

在智能化浪潮席卷全球的今天&#xff0c;以其创新技术引领行业变革&#xff0c;推出的集高效、智能、灵活于一体的AI视觉算法盒。这款革命性的产品&#xff0c;旨在通过智能化升级传统网络摄像机&#xff0c;为各行各业提供前所未有的安全监控与智能分析能力&#xff0c;让安全…...

编程日记 2024/9/20 16:17:56

【Vue】VueRouter路由

系列文章目录 第七章 VueRouter路由 文章目录 系列文章目录第一节&#xff1a;VueRouter基础一、安装&#xff1a;二、基本使用&#xff1a;1. 创建路由代码&#xff1a;Single Page Application&#xff1a;SPA2. 使用路由3. 展示路由&#xff1a; 二、嵌套路由三、路由传参1…...

编程日记 2024/9/20 16:13:51

idea多模块启动

文章目录 idea多模块启动2018版本的idea2019版本的idea idea多模块启动 2018版本的idea 1.首先看一下view> Tool Windows下有没有Run Dashboard 如果有&#xff0c;点击一下底部的窗口就会出现 如果不存在&#xff0c;执行下一步 2.查看自己项目的工作空间位置 点击 File&…...

编程日记 2024/9/20 16:12:50

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/15 6:38:00

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2026/1/5 0:33:43

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2026/1/1 23:11:45