陶士涵
3 years ago
parent
0fa053738d
commit
bd22764bb3
@ -0,0 +1,2 @@
|
||||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>GOFLY客服</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=./static/index.776c78d1.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=./static/js/chunk-vendors.ce220a69.js></script><script src=./static/js/index.6958c075.js></script></body></html>
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,87 @@
|
||||
<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>
|
||||
Loading…
Reference in new issue