71 lines
2.3 KiB
HTML
71 lines
2.3 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>视频聊天</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<script src="https://cdn.staticfile.org/jquery/3.6.0/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">
|
||
|
|
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||
|
|
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;
|
||
|
|
}, 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>
|