? ? ? ?WebRTC又稱 web實時通信，主要是為了擴展瀏覽器的功能，使瀏覽器能夠進行實時音視頻通信，不同的瀏覽器對Webrtc的實現代碼也許不同，但Google的瀏覽器將Webrtc的實現代碼開源了，以至于很多人一聽到Webrtc就聯想到Google的開源實現，以至于誤以為使用Webrtc就非常難，因為Webrtc的實現都是C/C++代碼，讓很多人望而生畏。其實我們只需要懂得瀏覽器端的Javascript，就能使用Webrtc，很多的時候不必關心Webrtc的核心實現。本文根據自己使用webrtc的經驗撰寫，錯誤之處難免，希望朋友不吝指正。

? ? ? 在WebRTC中，有三個主要的概念，理解了這三個概念 ，也就理解了WebRTC的使用技術了。這三個概念是：

• MediaStream：用于從采集設備，Canvas等獲取音頻和視頻數據，進行音視頻壓縮。
• RTCPeerConnection：端到端的通信連接器，主要用于音頻和視頻數據通信。
• RTCDataChannel：連接建立后的數據通道，可以用于任意應用數據的通信。

MediaStream

主要是用于獲取音頻和視頻流。其JavaScript調用也比較簡單，樣本代碼如下：

'use strict';navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;var constraints = { // 音頻、視頻約束audio: true, // 指定請求音頻Trackvideo: { // 指定請求視頻Trackmandatory: { // 對視頻Track的強制約束條件width: {min: 320},height: {min: 180}},optional: [ // 對視頻Track的可選約束條件{frameRate: 30}]} };var video = document.querySelector('video');function successCallback(stream) {if (window.URL) {video.src = window.URL.createObjectURL(stream);} else {video.src = stream;} }function errorCallback(error) {console.log('navigator.getUserMedia error: ', error); }navigator.getUserMedia(constraints, successCallback, errorCallback);

通過調用瀏覽器的getUserMedia函數來操作音頻和視頻，該函數接收三個參數，分別是音視頻的約束，成功的回調以及失敗的回調。在底層，瀏覽器通過音頻和視頻引擎對捕獲的原始音頻和視頻流加以處理，除了對畫質和音質增強之外，還得保證音頻和視頻的同步。

RTCPeerConnection

在獲取到音頻和視頻流后，下一步要做的就是將其發送出去。但這個跟client-server模式不同，這是client-client之間的傳輸，因此，在協議層面就必須解決NAT穿透問題，否則傳輸就無從談起。另外，由于WebRTC主要是用來解決實時通信的問題，可靠性并不是很重要，因此，WebRTC使用UDP作為傳輸層協議：低延遲和及時性才是關鍵。

調用RTCPeerConnection的示例代碼如下：

var signalingChannel = new SignalingChannel(); var pc = null; var ice = {"iceServers": [{ "url": "stun:stun.l.google.com:19302" }, //使用google公共測試服務器{ "url": "turn:user@turnserver.com", "credential": "pass" } // 如有turn服務器，可在此配置] }; signalingChannel.onmessage = function (msg) {if (msg.offer) { // 監聽并處理通過發信通道交付的遠程提議pc = new RTCPeerConnection(ice);pc.setRemoteDescription(msg.offer);navigator.getUserMedia({ "audio": true, "video": true }, gotStream, logError);} else if (msg.candidate) { // 注冊遠程ICE候選項以開始連接檢查pc.addIceCandidate(msg.candidate);} } function gotStream(evt) {pc.addstream(evt.stream);var local_video = document.getElementById('local_video');local_video.src = window.URL.createObjectURL(evt.stream);pc.createAnswer(function (answer) { // 生成描述端連接的SDP應答并發送到對端pc.setLocalDescription(answer);signalingChannel.send(answer.sdp);}); } pc.onicecandidate = function (evt) {if (evt.candidate) {signalingChannel.send(evt.candidate);} } pc.onaddstream = function (evt) {var remote_video = document.getElementById('remote_video');remote_video.src = window.URL.createObjectURL(evt.stream); } function logError() { ... }

DataChannel

DataChannel支持端到端的任意應用數據交換，就像WebSocket一樣，但是是端到端的。

建立RTCPeerConnection連接之后，兩端可以打開一或多個信道交換文本或二進制數據。

var ice = {'iceServers': [{'url': 'stun:stun.l.google.com:19302'}, // google公共測試服務器// {"url": "turn:user@turnservera.com", "credential": "pass"}] };// var signalingChannel = new SignalingChannel();var pc = new RTCPeerConnection(ice);navigator.getUserMedia({'audio': true}, gotStream, logError);function gotStream(stram) {pc.addStream(stram);pc.createOffer().then(function(offer){pc.setLocalDescription(offer);}); }pc.onicecandidate = function(evt) {// console.log(evt);if(evt.target.iceGatheringState == 'complete') {pc.createOffer().then(function(offer){// console.log(offer.sdp);// signalingChannel.send(sdp);})} }function handleChannel(chan) {console.log(chan);chan.onerror = function(err) {}chan.onclose = function() {}chan.onopen = function(evt) {console.log('established');chan.send('DataChannel connection established.');}chan.onmessage = function(msg){// do something} }// 以合適的交付語義初始化新的DataChannel var dc = pc.createDataChannel('namedChannel', {reliable: false});handleChannel(dc); pc.onDataChannel = handleChannel;function logError(){console.log('error'); }

通過以上代碼，即可在瀏覽器端使用Webrtc，但Webrtc遠沒有這么簡單，Webrtc需要服務器端來支持，否則就單個瀏覽器孤掌難鳴。

Webrtc需要有一個服務器來實現瀏覽器端點互通與音視頻數據轉發，能夠支持Webrtc的服務器端項目很多，這里選擇Licode搭建開發環境，相比其他項目，Licode比較輕量級，便于初學者學習。Licode扮演的角色如下：

Licode扮演著Router的角色，通過Licode，可以實現多對多通信。

Licode的安裝

git clone https://github.com/lynckia/licode.git cd licode ./scripts/installUbuntuDeps.sh ./scripts/installNuve.sh ./scripts/installErizo.sh ./scripts/initLicode.sh // 啟動 licode ./scripts/initBasicExamples.sh // 啟動 example

Licode 依賴很多各種各樣的庫，并且和服務器平臺強相關，所以這其中會出各種各樣的莫名錯誤，需要手動安裝好依賴，并且 libavutil 等庫的編譯要使用?./configure --enable-shared --disable-asm，每次編譯前最好 make clean。

配置 Licode （licode_config.js）:

config.erizoController.iceServers = [{'url': 'stun:123.218.123.109:5600'}]; config.erizoController.turnServer.url = 'turn:123.218.123.109:3478'; config.erizoController.publicIP = '123.218.123.109'; config.erizoController.hostname = '123.218.123.109'; config.erizo.stunserver = '123.218.123.109'; config.erizoController.turnServer.username = 'username'; config.erizoController.turnServer.password = 'password';

erizoController.js:

GLOBAL.config.erizoController.iceServers || [{'url': 'stun:123.218.123.109:3478'}]; GLOBAL.config.erizoController.publicIP = '123.218.123.109'; GLOBAL.config.erizoController.hostname = '123.218.123.109'; GLOBAL.config.erizoController.turnServer.url = "turn:123.218.123.109?transport=udp"; GLOBAL.config.erizoController.turnServer.username = "username"; GLOBAL.config.erizoController.turnServer.password = "password";

總結

以上是生活随笔為你收集整理的Webrtc 多人视频会议系统 服务器 Licode 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。