自己的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 原文链接：/html/996888.html