01_WebRtc_一对一视频通话

embedded/2024/9/25 6:02:34/

文章目录

    • 通话网页的设计
    • 客户端实现
      • 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.ppmy.cn/embedded/116477.html

相关文章

线程池和JUC

1. 线程池 1.1 线程状态介绍 当线程被创建并启动以后&#xff0c;它既不是一启动就进入了执行状态&#xff0c;也不是一直处于执行状态。线程对象在不同的时期有不同的状态。那么Java中的线程存在哪几种状态呢&#xff1f;Java中的线程 状态被定义在了java.lang.Thread.Stat…

Springboot Mybatis对数据库增删改查

Springboot中&#xff0c;用Mybatis对数据库进行增删改查 Mapper类 package com.wzb.MybatisExercise20240924;import com.wzb.Pojo20240924.Emp; import org.apache.ibatis.annotations.*;Mapper public interface EmpMapper {// 根据id查询数据Select("select * from e…

交换机和路由器的区别

目录 工作层次 数据转发依据 域的处理 功能 工作层次 交换机&#xff1a;工作在OSI模型的第二层&#xff0c;即数据链路层&#xff0c;通过MAC地址表来识别和转发数据帧。 路由器&#xff1a;工作在OSI模型的第三层&#xff0c;即网络层&#xff0c;使用IP地址来确定数据包…

微服务之网关

1.网关需要的依赖 <!--网关--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency><!--nacos discovery--><dependency><groupId>com…

WordPress 要求插件开发人员进行双因素身份验证

全球超过40%的网站由 WordPress 提供支持&#xff0c;其庞大的插件和主题生态系统在全球范围内提供了灵活性和定制性。然而&#xff0c;这种受欢迎程度也使其成为网络攻击的主要目标。 WordPress 将为所有插件和主题开发人员引入强制性双因素身份验证 (2FA)&#xff0c;以应对…

如何修改音频的音量增益

一、前言 在开发音频相关的功能&#xff08;比如说语音通话、播放音乐&#xff09;时&#xff0c;经常会遇到音量太小的问题&#xff0c;这时候就需要我们对原始数据进行处理。本文将介绍如何通过修改原始音频数据来增加增益&#xff0c;本文包含如下内容&#xff1a; 1.音频数…

python全栈学习记录(十八)re、os和sys、subprocess

re、os和sys、subprocess 文章目录 re、os和sys、subprocess一、re1.正则字符2.正则表达式的使用3.group的使用4.贪婪匹配与惰性匹配5.其他注意事项 二、os和sys1.os2.sys 三、subprocess四、打印进度条 一、re python中的re模块用来使用正则表达式&#xff0c;正则就是用一系…