欢迎光临
我的个人博客网站

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

自己的ID是自动获取的 ,然后输入对方的ID , 对方的ID可以这样获取 , 再打开新的浏览器或者手机也可以 

原理是 利用js的h5新特性获取摄像头视频流, 通过peerjs的服务交换双方的信息 , 然后使用浏览器的webrtc特性进行点对点通信 , 这个时候是不需要中间服务器的

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

 

 代码如下:

<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>

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » [javascript] 使用javascript实现webrtc视频聊天demo
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏