01_WebRtc_一对一视频通话

文章目录

text 复制代码
2024-9-20
很久没有写博客啦,回顾总结这段时间的成果,
写下博客放松下(开始偷懒啦)

主要内容:实现网页(html)
 打开摄像头并显示到页面需要通过
  websocket连接

通话网页的设计

会前端的博友可以自己好好设计一下布局和样式
主要实现网页的通话界面

html 复制代码
<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),全局变量如何实现调用其方法等

js 复制代码
/*用于启用严格模式,
严格模式是一种使得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

js 复制代码
 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对象的属性,用于设置该元素的点击事件处理函数

服务端实现

实现与客户端交互,以及信令服务器等的部署比较困难

js 复制代码
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);
相关推荐
汇能感知2 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun2 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao2 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾2 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT3 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa3 小时前
HTML和CSS学习
前端·css·学习·html
ST.J3 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin4 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
看海天一色听风起雨落4 小时前
Python学习之装饰器
开发语言·python·学习
小憩-4 小时前
【机器学习】吴恩达机器学习笔记
人工智能·笔记·机器学习