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

01_WebRtc_一对一视频通话

news 2026/4/4 19:23:28

文章目录

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

终端设备可靠性检测报告：读懂设备耐用密码

日常使用手机、智能手表、家用路由器等终端设备时&#xff0c;我们总希望它“扛造耐用”&#xff0c;不轻易出故障。这份终端设备可靠性检测报告&#xff0c;就用通俗的话拆解设备耐用的核心密码&#xff0c;让大家明白&#xff0c;一台靠谱的设备&#xff0c;背后都经过了哪些…...

编程新知 2026/4/4 18:28:09

如何进行 SEO 效果追踪和数据分析_SEO 优化与社交媒体营销的结合方式是什么

SEO 效果追踪和数据分析的重要性 在当今数字化时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;和社交媒体营销已经成为企业推广和品牌建立的重要手段。如何进行有效的SEO效果追踪和数据分析&#xff0c;以及如何将SEO优化与社交媒体营销结合起来&#xff0c;是每一个…...

编程新知 2026/4/4 18:03:51

实战即用：通过快马ai快速构建配置完备的flask web api项目

最近在做一个前后端分离的小项目&#xff0c;需要快速搭建一个轻量级的Web API服务。之前每次新建项目都要手动配置Python环境、安装依赖&#xff0c;特别容易出错。这次尝试用InsCode(快马)平台来生成配置好的Flask项目&#xff0c;整个过程意外地顺畅。 环境配置一步到位 传统…...

编程新知 2026/4/4 17:55:50

亚马逊Alexa集成至NASA飞船的技术解析

将Alexa集成至某机构猎户座飞船背后的技术故事 从物理限制到声学挑战&#xff0c;了解与某机构和洛克希德马丁公司合作让Alexa在太空工作的技术实现。 作者&#xff1a;Arun Krishnan | 2022年11月16日 | 8分钟阅读 技术约束与挑战 在太空环境中设置语音设备远比在地球上复杂得…...

编程新知 2026/4/4 17:05:03

MogFace人脸检测模型-WebUI多场景：儿童早教APP中注意力区域动态追踪

MogFace人脸检测模型在儿童早教APP中的实战应用&#xff1a;注意力区域动态追踪 1. 引言&#xff1a;从“看见”到“理解”&#xff0c;AI如何守护孩子的专注力&#xff1f; 想象这样一个场景&#xff1a;在儿童早教APP的互动学习环节&#xff0c;一个5岁的孩子正跟着屏幕上的…...

编程新知 2026/4/4 16:16:22

AirPodsDesktop：Windows平台苹果耳机功能缺失的突破性解决方案

AirPodsDesktop&#xff1a;Windows平台苹果耳机功能缺失的突破性解决方案 【免费下载链接】AirPodsDesktop ☄️ AirPods desktop user experience enhancement program, for Windows and Linux (WIP) 项目地址: https://gitcode.com/gh_mirrors/ai/AirPodsDesktop 在数…...

编程新知 2026/4/4 14:26:40

从理论到模型：HFSS仿真平面发夹滤波器的关键步骤与参数优化

1. HFSS仿真前的理论准备 在开始HFSS仿真之前&#xff0c;我们需要先完成一些理论计算工作。这就像盖房子要先画图纸一样&#xff0c;没有理论指导的仿真就像无头苍蝇。我刚开始做滤波器设计时就犯过这个错误&#xff0c;直接上手建模&#xff0c;结果调参调到怀疑人生。 平面发…...

编程新知 2026/4/4 13:52:25

IwrQk实战指南：跨平台Iwara视频社区客户端从安装到精通

IwrQk实战指南&#xff1a;跨平台Iwara视频社区客户端从安装到精通 【免费下载链接】iwrqk Unofficial Iwara Flutter Client 项目地址: https://gitcode.com/gh_mirrors/iw/iwrqk IwrQk是一款基于Flutter开发的跨平台Iwara视频社区客户端&#xff0c;专为技术爱好者和普…...

编程新知 2026/4/4 13:42:15

探索法律AI深度应用：在快马平台集成多模型驱动openlaw智能法律问答助手

最近在做一个法律AI相关的项目&#xff0c;发现用AI辅助开发法律问答系统真的能大幅提升效率。这里分享一下我在InsCode(快马)平台上搭建智能法律问答原型的经验&#xff0c;整个过程特别适合想尝试法律科技的朋友。 项目背景与需求分析 法律咨询场景中&#xff0c;用户的问题往…...

编程新知 2026/4/4 12:43:18

魔兽争霸III现代兼容性终极指南：用Warcraft Helper重获完美体验

魔兽争霸III现代兼容性终极指南&#xff1a;用Warcraft Helper重获完美体验 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为魔兽争霸III在现代电…...

编程新知 2026/4/4 12:04:19