webrtc实现局域网通话（二）
2019-08-05 本文已影响4人
EarthNut
前言
WebRTC由一家叫GIPS的公司创立，提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。
单机版视频呼叫
前端代码
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的候选者）呼叫B
1、A 创建RTCPeerConnection，并添"icecandidate"事件,添加本地视频流；B创建RTCPeerConnection，并添加"addstream"事件
2、A createOffer(), A将本地通话（例：音视频编解码）相关信息发送给B，B设置根据A发来的信息处理音视频播放,下面请看第三步
3、B createAnswer() ，B会把本地信息发给A（A根据收到B发来的信息处理音视频播放），
4、"icecandidate"对应的函数会被调用，B 添加候选者发来候选消息
5、B端回调"addstrem"对应函数，播放视频（这一步会先于第4步执行，但是没有第四步，B端将不会播放视频）
