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

01_WebRtc_一对一视频通话

news 2025/9/20 16:40:37

文章目录

    • 通话网页的设计
    • 客户端实现
      • 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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/9/17 7:32:01

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/9/11 12:54:47

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/9/16 2:11:19

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/9/18 23:35:19

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/9/13 8:23:57

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/6/16 10:20:03

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/7/6 1:54:27

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15