[javascript] 使用javascript实现webrtc视频聊天demo

景元發表於 2021-2-1 21:49:00

[javascript] 使用javascript实现webrtc视频聊天demo

自己的ID是自动获取的，然后输入对方的ID , 对方的ID可以这样获取，再打开新的浏览器或者手机也可以 
原理是利用js的h5新特性获取摄像头视频流，通过peerjs的服务交换双方的信息，然后使用浏览器的webrtc特性进行点对点通信，这个时候是不需要中间服务器的
<img src="https://img2020.cnblogs.com/blog/726254/202102/726254-20210201214522424-1164961918.png" alt="" loading="lazy">
 
 代码如下：
<div class="cnblogs_code">
<pre><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></pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
<h3>十年开发经验程序员，离职全心创业中，历时三年开发出的产品《唯一客服系统》</h3>
<div> 一款基于Golang+Vue开发的在线客服系统，软件著作权编号：2021SR1462600。一套可私有化部署的网站在线客服系统，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的全渠道在线客服系统，致力于帮助广大开发者/公司快速部署整合私有化客服功能。 </div>
<div> 开源地址：唯一客服（开源学习版） </div>
<div> 官网地址：唯一客服官网 </div> 
来源：https://www.cnblogs.com/taoshihan/p/14359243.html

頁: [1]

琼殿技术论坛's Archiver

[javascript] 使用javascript实现webrtc视频聊天demo