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

01_WebRtc_一对一视频通话

news 2025/11/12 14:41:08

文章目录

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

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2025/11/12 5:39:28

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/11/7 14:02:20

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/10/27 2:28:51

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/30 14:27:04

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/11/11 18:49:38

相机从app启动流程

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

编程新知 2025/11/7 13:59:49

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35