單機版視頻呼叫
前端代碼
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鏈接。
