01_WebRtc_一对一视频通话

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/145766.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

《 LiteFlow 规则引擎(1) - 入门篇》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

品牌力是什么?如何评估企业品牌影响力?

品牌影响力&#xff0c;其实就是指品牌在消费者心智中所占据的位置&#xff0c;以及它对消费者购买决策和行为的影响力。如果一个企业的品牌影响力越强&#xff0c;它在消费者心中的印象就越深刻&#xff0c;能够更有效地驱动消费者的购买行为&#xff0c;形成品牌忠诚度&#…

Windows用管理员运行cmd命令后无法切换盘符

解决方法&#xff1a;在你的切换的盘符前面加上/d&#xff0c;如原本命令是&#xff1a;cd d:\。变为&#xff1a;cd /d d:\。

C++的扩充和封装

作业&#xff1a; 手动封装一个顺序表&#xff08;SeqList&#xff09;,分文件编译实现 有私有成员&#xff1a;顺序表数组的起始地址 ptr、 顺序表的总长度&#xff1a;size、顺序表的实际长度&#xff1a;len 成员函数&#xff1a;初始化 init(int n) 判空&#xff1a;em…

Zabbix 6.4添加中文语言

/usr/share/zabbix/include/locales .inc .phplocale -agrep “zh_CN" yum install langpacks-zh_CN.noarch y y y

浅谈死锁以及判断死锁的方法

引言 我们在并发情况下见过很多种锁&#xff0c;synchronized&#xff0c;ReentrantLock 等等&#xff0c;这些锁是为了保证线程安全&#xff0c;使线程同步的锁&#xff0c;与今天所要学习的死锁并不相同&#xff0c;死锁并不是一种锁&#xff0c;而是一种现象。 官方定义&a…

【CTF Reverse】XCTF GFSJ1101 Mine- Writeup(反编译+动态调试+Base58编码)

Mine- 运气怎么这么差&#xff1f; 原理 Base58 Base58是用于比特币&#xff08;Bitcoin&#xff09;中使用的一种独特的编码方式&#xff0c;主要用于产生Bitcoin的钱包地址。 相比Base64&#xff0c;Base58不使用数字"0"&#xff0c;字母大写"O"&…

想要监控电脑?这十款电脑监控软件推荐!

在选择电脑监控软件时&#xff0c;重要的是要明确你的监控目的&#xff0c;并确保所选软件符合法律法规和道德标准。以下是我为你推荐的十款电脑监控软件&#xff0c;它们各自具有不同的特点和功能&#xff0c;适用于不同的场景和需求&#xff1a; 1.安企神&#xff1a; 作为…

从混乱到清晰!借助Kimi掌握螺旋型论文结构的秘诀!

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 写学术论文有时会让人感到头疼&#xff0c;特别是在组织结构和理清思路时&#xff0c;往往觉得无从下手。 其实&#xff0c;找到合适的结构不仅能帮你清晰地表达研究成果&#xff0c;还能让你的论文更有说…

数据建模无法满足复杂业务需求?别慌,数据开发平台可以完美互补!

前言 数据可视化建模无论是对于企业的数字化转型&#xff0c;还是对数据资源的价值开发来说&#xff0c;都是至关重要的工具&#xff0c;小兵在前文《数据可视化建模平台介绍》。中有详细介绍过他的能力&#xff0c;包括面向多源异构的企业数据&#xff0c;为企业提供数据集成…

PCL 读取txt格式点云并可视化

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff09; 一、概述 1.1原理 TXT格式的点云文…

4.5 pandas 实战 分析抖音播放数据(1)

课程目标 基于pandas对抖音播放数据做数据分析 数据准备 点此去下载 课程内容 导包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns plt.rcParams["font.family"] "SimHei" plt.rcParams["ax…

焦化行业的变革力量:智能巡检机器人

根据相关数据&#xff0c;2024年1-2月份&#xff0c;焦炭产量为8039.5万吨&#xff0c;同比增长2.1%&#xff0c;这表明&#xff0c;我国焦化行业仍是全球最大的焦炭生产国和消费国&#xff0c;其市场规模占据了重要地位。焦化企业主要集中在山西省&#xff0c;其合计焦炭产能约…

c++的decltype关键字

它可以将变量声明为表达式指定的类型

Hash入门

unordered_set void test_unordered_set() {unordered_set<int> us;us.insert(4);us.insert(2);us.insert(1);us.insert(5);us.insert(6);us.insert(2);us.insert(2);//去重unordered_set<int>::iterator it us.begin();while (it ! us.end()){cout << *it…

MyBatis-Plus代码一键生成

官网地址&#xff1a;MyBatis-Plus &#x1f680; 为简化开发而生 开始&#xff1a; 添加依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.5.7</version&g…

IMS 在线计费 IMS 离线计费

目录 1. IMS 在线计费 1.1 主要内容 1.2 IMS 在线计费架构 ​编辑1.3 IMS 在线计费方案 1.4 IMS 在线计费的关键步骤 1.5 在线计费的基本流程 1.6 IMS Information AVP 2. IMS 离线计费 2.1 IMS 离线计费架构 2.2 IMS 离线计费概述 2.3 什么时候 AS 给 CG 发送 ACR?…

独立站技能树/工具箱1.0 总纲篇丨出海笔记

正所谓要把一件事做到90分很难&#xff0c;但做到60分基本上照着SOP做到位都没问题&#xff0c;如果我们能把每件事都做到60分&#xff0c;那绝对比至少60%的人都强&#xff0c;除非你的对手不讲武德——那就是他很可能看了我这篇文章&#xff0c;不但每方面都超过及格线&#…

油耳拿什么清理比较好?比较推荐哪种可视耳勺

相信很多小伙伴都有挖耳朵方面的困扰&#xff0c;尤其是油性耳朵的人&#xff0c;用棉签掏耳朵时感觉越掏越往里去&#xff0c;而使用普通耳勺又因为材质过硬&#xff0c;在使用过程中容易刮伤耳道。于是市面上出现了可视挖耳勺&#xff0c;让人们可以在看得见的情况下取出耳道…

解决novnc1.2.0不能使用剪切板的问题

1.下载资源文件asciidef.js,在rfb.js中引入 2.修改rfb.js中clipboardPasteFrom方法如下 clipboardPasteFrom(text) {if (this._rfbConnectionState !== connected || this._viewOnly) {return; }if (this._clipboardServerCapabilitiesFormats[extendedClipboardFormatText] &…