网站建设需要什么人员,免费微信快速开发平台,建电子商务网站注意事项,七台河新闻联播回放文章目录 通话网页的设计客户端实现Web的API 服务端实现 2024-9-20
很久没有写博客啦#xff0c;回顾总结这段时间的成果#xff0c;
写下博客放松下#xff08;开始偷懒啦#xff09;主要内容#xff1a;实现网页#xff08;html#xff09;打开摄像头并显示到页面需要… 文章目录 通话网页的设计客户端实现Web的API 服务端实现 2024-9-20
很久没有写博客啦回顾总结这段时间的成果
写下博客放松下开始偷懒啦主要内容实现网页html打开摄像头并显示到页面需要通过websocket连接 通话网页的设计
会前端的博友可以自己好好设计一下布局和样式 主要实现网页的通话界面
htmlheadtitleThe first to test/title/headh1Client_Meeting/h1div idbuttonsinput idzero_RoomId typetext placeholder请输入房间ID maxLengh48/button idjoinBtn typebutton加入/buttonbutton idleaveBtn typebutton离开/button/divdiv idvideosvideo idlocalVideo autoplay muted playsinline本地窗口/videovideo idremoteVideo autoplay playsinline远端窗口/video/div!-- autoplay: 这是一个布尔属性表示视频在页面加载完成后立即开始播放。如果设置为autoplay视频将自动播放。muted: 这也是一个布尔属性表示视频在播放时默认静音。这对于自动播放视频非常有用因为许多浏览器要求自动播放的视频必须静音。playsinline: 这是一个布尔属性表示视频在移动设备上播放时不会进入全屏模式而是在页面内播放。这对于提供更好的用户体验很有帮助。--script srcjs/main.js/script!--导入js路径--
/html客户端实现
实现与网页服务端交互个人认为需要格外注意 构造函数ZeroRTCEngine与全局变量zeroRTCEngine,全局变量如何实现调用其方法等
/*用于启用严格模式,
严格模式是一种使得JavaScript引擎以更严格的规则来运行代码的模式,
这有助于防止某些常见的编码错误,并确保代码的安全性和健壮性*/
use strict;//document.querySelector: 这是一个方法,用于选择文档中的一个元素
var localVideodocument.querySelector(#localVideo);
var remoteVideodocument.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).onclickfunction(){
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).onclickfunction()//获取页面上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);
