您现在的位置是:首页 > Javascript
当前栏目
[javascript] 使用javascript实现webrtc视频聊天demo
2023-02-18 15:37:05 时间
自己的ID是自动获取的 ,然后输入对方的ID , 对方的ID可以这样获取 , 再打开新的浏览器或者手机也可以
原理是 利用js的h5新特性获取摄像头视频流, 通过peerjs的服务交换双方的信息 , 然后使用浏览器的webrtc特性进行点对点通信 , 这个时候是不需要中间服务器的
代码如下:
<html> <head> <title>视频聊天</title> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/peerjs/1.3.1/peerjs.min.js"></script> </head> <body> <h3>本地视频</h3> <video id="localVideo" style="width: 400px;height: 300px;"></video> <div style="text-align: left"> 自己ID<input type="text" id="myPeerid"/>(自动获取) 对方ID<input type="text" id="youPeerid"/>(请手动输入) <button id="callBtn">聊天</button> </div> <h3>远程视频</h3> <video id="remoteVideo" style="width: 400px;height: 300px;"></video> <script type="text/javascript"> //访问用户媒体设备的兼容方法 function getUserMedia(constrains,success,error){ if(navigator.mediaDevices.getUserMedia){ //最新标准API navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error); } else if (navigator.webkitGetUserMedia){ //webkit内核浏览器 navigator.webkitGetUserMedia(constrains).then(success).catch(error); } else if (navigator.mozGetUserMedia){ //Firefox浏览器 navagator.mozGetUserMedia(constrains).then(success).catch(error); } else if (navigator.getUserMedia){ //旧版API navigator.getUserMedia(constrains).then(success).catch(error); } } var localVideo = document.querySelector('video#localVideo'); var remoteVideo = document.querySelector('video#remoteVideo'); var localStream=null; $(function(){ getUserMedia({video: true, audio: true}, function(stream) { localStream=stream; localVideo.srcObject = stream; localVideo.autoplay = true; localVideo.play(); }, function(err) { console.log('Failed to get local stream' ,err); }); var peer = new Peer(); peer.on('open', function(id) { $("#myPeerid").val(id); }); peer.on('call', function(call) { call.answer(localStream); call.on('stream', function(remoteStream) { console.log(remoteStream); remoteVideo.srcObject = remoteStream; remoteVideo.autoplay = true; }); }); $('#callBtn').click(function(){ var remoteId=$("#youPeerid").val(); if(remoteId==""){ alert("请输入对方ID");return; } var call = peer.call(remoteId,localStream); call.on('stream', function(remoteStream) { console.log(remoteStream); remoteVideo.srcObject = remoteStream; remoteVideo.autoplay = true; }); call.on('close', function() { console.log("call close"); _this.loading.close(); }); call.on('error', function(err) { console.log(err); _this.loading.close(); }); }); }); </script> </body> </html>
相关文章
- APIJSON-实现一对一,一对多复杂查询
- APIJSON - 功能符、数组关键词、对象关键词、全局关键词简表速查
- 用Three.js构建三维世界的房子
- 手把手教你发布兼容TS的JS库到npmjs上
- POSTGRESQL 15 日志的JSON 格式 为什么用JSON 与 PG 14 没有注意的一些参数
- Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
- JS常见加密 AES、DES、RSA、MD5、SHAI、HMAC、Base64(编码) - Python/JS实现
- JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
- Frida - App逆向 JavaScript代码注入 基本语法以及数据类型介绍
- App逆向案例 X嘟牛 - Frida监听 & WT-JS工具还原(一)
- java调用js脚本语言
- 使用json-path解析json
- 修改vscode launch.json, 实现在指定conda环境下debug
- 第120期:Next.js 和 React 到底该选哪一个?
- Jst刷LeetCode--字符串类解题技巧
- 用javascript分类刷leetcode---动态规划
- 使用Js怒刷LeetCode
- 22道js输出顺序问题,你能做出几道
- 【重点】快速记忆JavaScript的数组api
- 实习生妹子问我怎么对接微信支付(H5、JSAPI、小程序)