单机版视频呼叫
前端代码
1、新建node.js项目，在项目文件夹下新建index.html打开，编写如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc案例</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<h1>单机版视频呼叫</h1>
<hr>
<div class="video_container" align="center">
<video id="local_video" autoplay playsinline muted></video>
<video id="remote_video" autoplay></video>
</div>
<hr>
<div class="button_container">
<button id="startButton">采集视频</button>
<button id="callButton">呼叫</button>
<button id="hangupButton">关闭</button>
</div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
新建js文件夹，在其文件夹下创建main.js 文件，编写如下代码：
'use strict'
var startButton = document.getElementById('startButton');
var callButton = document.getElementById('callButton');
var hangupButton = document.getElementById('hangupButton');
callButton.disabled = true;
hangupButton.disabled = true;
startButton.addEventListener('click', startAction);
callButton.addEventListener('click', callAction);
hangupButton.addEventListener('click', hangupAction);
var localVideo = document.getElementById('local_video');
var remoteVideo = document.getElementById('remote_video');
var localStream;
var pc1;
var pc2;
const offerOptions = {
offerToReceiveVideo: 1,
offerToReceiveAudio:1
};
function startAction() {
//采集摄像头视频
navigator.mediaDevices.getUserMedia({ video: true,audio:true })
.then(function(mediaStream){
localStream = mediaStream;
localVideo.srcObject = mediaStream;
startButton.disabled = true;
callButton.disabled = false;
}).catch(function(error){
console.log(JSON.stringify(error));
});
}
function callAction() {
hangupButton.disabled = false;
callButton.disabled = true;
pc1 = new RTCPeerConnection();
pc1.addEventListener('icecandidate', function (event) {
var iceCandidate = event.candidate;
if (iceCandidate) {
pc2.addIceCandidate(iceCandidate);
}
});
localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
pc2 = new RTCPeerConnection();
pc2.addEventListener('addstream', function (event) {
remoteVideo.srcObject = event.stream;
});
pc1.createOffer(offerOptions).then(function (offer) {
pc1.setLocalDescription(offer);
pc2.setRemoteDescription(offer);
pc2.createAnswer().then(function (description) {
pc2.setLocalDescription(description);
pc1.setRemoteDescription(description);
});
});
}
function hangupAction() {
localStream.getTracks().forEach(track => track.stop());
pc1.close();
pc2.close();
pc1 = null;
pc2 = null;
hangupButton.disabled = true;
callButton.disabled = true;
startButton.disabled = false;
}
这里要详细看信令转发流程
服务端代码
和上篇一样，至此代码编写完成。
测试结果
启动node.js服务
node index.js
地址栏输入localhost:8080,效果如下图所示：
js4.png
js5.png
js6.png
总结
A呼叫B信令转发步骤
1、A createOffer()，生成sdp A 调用setLocalDescription(sdpA）并将sdpA发送给B；
2、B收到sdpA后调用 setRemoteDescription(sdpA),然后createAnswer，生成自己的sdpB,然后setLocalDescription(sdpB）并将sdpB发送给A；
3、A收B的sdpB后，setRemoteDescription(sdpB)；
4、交换ice信息，A将自己生成iceA信息发送给B,B调用addIceCandidate(iceA),然后B将自己生成iceB信息发送给A，A调用addIceCandidate(iceB)；
5、经过以上步骤就建立了p2p链接。
