自己的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=youPeerid(请手动输入) <button id=callBtn">聊天</button> </div> <h3>远程视频</h3> <video id=remoteVideo"></video> <script type=text/javascript"> //访问用户媒体设备的兼容方法 function getUserMedia(constrains,success,error){ if(navigator.mediaDevices.getUserMedia){ 最新标准API navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error); } else (navigator.webkitGetUserMedia){ webkit内核浏览器 navigator.webkitGetUserMedia(constrains).then(success). (navigator.mozGetUserMedia){ Firefox浏览器 navagator.mozGetUserMedia(constrains).then(success). (navigator.getUserMedia){ 旧版API navigator.getUserMedia(constrains).then(success).(error); } } var localVideo = document.querySelector('video#localVideo'); var remoteVideo = document.querySelector(video#remoteVideovar localStream=null; $(function(){ getUserMedia({video: true,audio: true},function(stream) { localStream=stream; localVideo.srcObject = stream; localVideo.autoplay = ; localVideo.play(); },function(err) { console.log(Failed to get local stream,err); }); var peer = new Peer(); peer.on(open#myPeerid").val(id); }); peer.on(callstream remoteStream; remoteVideo.autoplay = ; }); }); $(#callBtn).click(function(){ var remoteId=$(#youPeerid).val(); if(remoteId==""){ alert(请输入对方ID");return; } var call = peer.call(remoteId,localStream); call.on(; }); call.on(closecall close); _this.loading.close(); }); call.on(error版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。