課程地址：零聲學院 WebRTC入門與提高 https://ke.qq.com/course/435382?tuin=137bb271
技術(shù)支持QQ群：782508536
版權(quán)聲明：關(guān)于作者：王昕（QQ:475660） 十多年開發(fā)經(jīng)驗，在Delphi、ASP.net、Cobol、WPF、C#、SharePoint、Java、XMPP Server/Client、EPortal、BPM等領(lǐng)域較有經(jīng)驗，對開源技術(shù)有廣泛興趣，尤其關(guān)注門戶平臺和即時通訊技術(shù)，在廣州工作生活30余年。 https://blog.csdn.net/starcrm/article/details/52576387
博主有刪減，著作權(quán)歸原作者王昕所有。
什么是WebRTC
WebRTC由IETF（Internet Engineering Task Force——互聯(lián)網(wǎng)工程任務組）和W3C（World Wide Web Consortium——萬維網(wǎng)聯(lián)盟）聯(lián)合負責其標準化工作。IETF定制WebRTC的互聯(lián)網(wǎng)基礎協(xié)議標準，該標準也被稱為RTCWeb（Real-Time Communication in Web-browsers）。W3C則負責定制WebRTC的客戶端JavaScript API接口的標準。目前參與該技術(shù)標準定制的公司主要有思科、微軟、谷歌、蘋果、愛立信、Intel等。
WebRTC（Web Real-Time Communication——網(wǎng)頁實時通信）是一個基于瀏覽器的實時多媒體通信技術(shù)。該項技術(shù)旨在使Web瀏覽器具備實時通信能力；同時，通過將這些能力封裝并以JavaScript API的方式開放給Web應用開發(fā)人員，使得Web應用開發(fā)人員能夠通過HTML標簽和JavaScript API快速地開發(fā)出基于Web瀏覽器的實時音視頻應用，而無需依賴任何第三方插件。谷歌2011年6月3日宣布向開發(fā)人員開放WebRTC架構(gòu)的源代碼。
WebRTC的影響和前景
WebRTC技術(shù)的快速普及將對現(xiàn)有的很多領(lǐng)域產(chǎn)生巨大的影響。 首先，受到影響的是現(xiàn)有的VoIP業(yè)務領(lǐng)域。目前我們正在經(jīng)歷一個硬件多樣化的時代，比如可穿戴設備的興起。這將促進適應新型設備的操作系統(tǒng)的涌現(xiàn)和加大現(xiàn)有操作系統(tǒng)的分化。因此，操作系統(tǒng)的異構(gòu)性和繁雜性使得VoIP應用的開發(fā)、更新與維護的復雜性和成本劇增。隨著WebRTC集成到瀏覽器中，基于Web的實時通信應用可以通過HTML標簽和JavaScript API實現(xiàn)快速的開發(fā)，并避免了由于操作系統(tǒng)的異構(gòu)性帶來的重復開發(fā)和由于版本升級帶來的維護費用以及不便。這將導致現(xiàn)有的應用開發(fā)人員從現(xiàn)有的基于瀏覽器插件或者原生VoIP應用模式轉(zhuǎn)向使用WebRTC進行Web應用開發(fā)，進而使得現(xiàn)有的VoIP應用的普通用戶向基于瀏覽器的Web應用的遷移。目前，涉及VoIP業(yè)務的客服以及在線教育領(lǐng)域很關(guān)注WebRTC技術(shù)在自身領(lǐng)域的應用。
其次，現(xiàn)有的IM應用通過其擁有的大量用戶，并通過構(gòu)建在這些IM應用上的衍生應用形成生態(tài)圈。這些IM應用及其所形成的生態(tài)圈正在試圖取代瀏覽器成為互聯(lián)網(wǎng)入口。這種現(xiàn)象在移動智能終端表現(xiàn)的更加突出。然而，如上文所述，WebRTC技術(shù)的部署和使用將呈現(xiàn)爆炸式的增長，這將導致IM應用向IM Web應用的轉(zhuǎn)變和用戶向IM Web應用的遷移。因此，構(gòu)建在現(xiàn)有IM應用的生態(tài)圈將被打破。現(xiàn)有的IM應用及其生態(tài)圈必將做出相應的布局調(diào)整以適應新的技術(shù)環(huán)境。
同時，WebRTC的普及將給企業(yè)帶來監(jiān)管和安全問題。目前，有些公司在公司內(nèi)部封鎖了IM應用（比如QQ，Skype）的端口，以防止員工在工作過程中由于對音視頻工具的不慎使用所造成的安全問題?；赪ebRTC的新型IM Web應用，與正常的Web頁面無異，所以很難檢測該種IM Web應用。這給企業(yè)的監(jiān)管和安全造成了巨大的隱患。
其次，智能電視的展現(xiàn)形式和業(yè)務模式將受到巨大的影響。目前，智能電視主要包括智能操作系統(tǒng)以及顯示設備。在智能電視上的主要業(yè)務也主要是對多媒體源的直播和點播。隨著WebRTC的普及和涌現(xiàn)大量的IM Web應用，智能電視將很可能原生的包含攝像頭設備。同時，視頻會議業(yè)務也將像現(xiàn)在的對多媒體源的直播和點播業(yè)務一樣，成為智能電視的主要業(yè)務。
其次，所上文所述，由于WebRTC所支持的音視頻格式的局限，以及WebRTC在多人視頻會話中采用的可選網(wǎng)狀結(jié)構(gòu)的限制（目前是6人）。新型的服務供應商將產(chǎn)生。這些供應商主要提供1）不同視頻編解碼的轉(zhuǎn)換；2）在多人會話中，視頻流的整合與廣播。目前，服務供應商及其產(chǎn)品有：Dialogic推出的PowerMedia XMS 2.1和英特爾推出的Collaboration Service for WebRTC。
最后，集成了WebRTC的Web瀏覽器將進一步改變傳統(tǒng)的應用、Web瀏覽器和操作系統(tǒng)的格局。Web瀏覽器將成為介于操作系統(tǒng)與Web應用的一個平臺。為Web操作系統(tǒng)的普及進一步鋪平道路。包含了WebRTC的瀏覽器將進一步鞏固其互聯(lián)網(wǎng)入口的地位——近些年，超級應用（例如微信）通過其擁有的大量用戶和在其上的開發(fā)的衍生應用試圖成為互聯(lián)網(wǎng)入口。Web瀏覽器及其Web應用將成為一種生態(tài)圈。高性能瀏覽器的研發(fā)將成為下一個競爭熱點。而瀏覽器的安全問題將更加凸顯。
開發(fā)基礎知識
本文大部分翻譯自：
http://www.html5rocks.com/en/tutorials/webrtc/basics/
http://w3c.github.io/mediacapture-main/getusermedia.html
通常WebRTC程序需要實現(xiàn)以下需求：
- 獲得流音頻，視頻或其他數(shù)據(jù)。
- 獲取網(wǎng)絡信息，如IP地址和端口，與其他WebRTC客戶端（稱為節(jié)點）連接通訊、交換數(shù)據(jù)，穿越NAT和防火墻。
- 協(xié)調(diào)信令通信以報告錯誤、發(fā)起或關(guān)閉會話。
- 客戶端之間交換媒體和客戶的信息，如分辨率和編解碼器。
- 通信流音頻，視頻或數(shù)據(jù)。
- MediaStream API代表同步流媒體。例如，從攝像頭和麥克風輸入的流有同步的視頻和音頻曲目。（不要混淆mediastream軌道與<track>的元素，這是完全不同的東西。）
一個最簡單的例子：
https://webrtc.github.io/samples/src/content/getusermedia/gum.
官方范例
https://webrtc.github.io/samples/
1、輸入、輸出
每個MediaStream具有一個輸入，這可能由navigator.getUserMedia()生成；并僅具有一個輸出，傳遞到video element或RTCPeerConnection；
2、getUserMedia參數(shù)
getUserMedia()方法需要三個參數(shù)：
- 約束對象Constrain，通常是配置項；
- 一個成功的回調(diào)，通過一個MediaStream；
- 一個失敗的回調(diào)，失敗的回調(diào)是通過一個錯誤對象；
3、標簽label、MediaStreamTracks數(shù)組
每個MediaStream都有一個標簽label，如'xk7eulhsuhkbnjlwkw4yygnjj8onsgwhbvlq”
MediaStreamTracks數(shù)組是由getAudioTracks()和getVideoTracks()方法返回。
對于https://webrtc.github.io/samples/src/content/getusermedia/gum的例子
stream.getAudioTracks（）返回一個空數(shù)組（因為沒有音頻）。
假設獲得一個網(wǎng)絡攝像頭連接，stream.getVideoTracks（）將返回MediaStreamTrack數(shù)組，表示流來自攝像頭
每個MediaStreamTrack只有一種類型（“視頻”或“音頻”），和一個標簽label（類似于“FaceTime HD Camera（內(nèi)置）”）代表音頻或視頻的一個或多個通道。
在這種情況下（沒有音頻），gum的例子只有一個視頻軌跡和沒有音頻。
更多的場景：得到前置攝像頭，后置攝像頭，麥克風流，以及“屏幕分享screenshared ' 應用。
** 4、Blob URL**
Chrome or Opera中：URL.createObjectURL（）方法把一個MediaStream轉(zhuǎn)換到Blob URL，可以設置為video element的src。
Blob URLs原理請閱讀：http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis
在Firefox中：視頻的src可以從流本身來設置。
版本M25以上，以Chrome為基礎的瀏覽器（Chrome和Opera），允許從getUserMedia音頻數(shù)據(jù)傳遞給音頻或視頻元素（但請注意，默認情況下是靜音的）。
getUserMedia 允許 as an input node for the Web Audio API:
// success callback when requesting audio input stream
function gotStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia( {audio:true}, gotStream );
Chrome瀏覽器添加音頻捕獲和/或videoCapture權(quán)限允許權(quán)限請求，可以只授予一次，此后，用戶不被要求授予照相機或麥克風訪問權(quán)限。同樣的，在使用HTTPS網(wǎng)頁：也只有授予一次（在Chrome至少一次）。顯示在瀏覽器中的信息欄的始終允許“Always Allow”按鈕。
此外，Chrome將在2015年底棄用getUserMedia（）的HTTP訪問。在Chrome M44你已經(jīng)可以看到一個警告信息。
未來MediaStream可做為任何流的數(shù)據(jù)源，而不僅僅是照相機或麥克風。例如傳感器或其它輸入。
一些好玩的例子：
Webcam Toy is a photobooth app that uses WebGL to add weird and wonderful effects to photos which can be shared or saved locally.
FaceKat is a 'face tracking' game built with headtrackr.js.
ASCII Camera uses the Canvas API to generate ASCII images.
5、Constraints
用于設置視頻分辨率getUserMedia（）和RTCPeerConnection addStream()調(diào)用。
其目的是為執(zhí)行其他約束，諸如寬高比，面向模式（正面或背面相機），幀率，高度和寬度......
例子：
getUserMedia({
video: {
mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },
optional [
{ minFrameRate: 60 },
{ maxWidth: 640 },
{ maxHeigth: 480 }
]
}
}, successCallback, errorCallback);
Dictionary MediaTrackConstraints Members
advanced of type sequence<MediaTrackConstraintSet>
See Constraints and ConstraintSet for the definition of this element.
dictionary MediaTrackConstraintSet {
ConstrainLong width;
ConstrainLong height;
ConstrainDouble aspectRatio;
ConstrainDouble frameRate;
ConstrainDOMString facingMode;
ConstrainDouble volume;
ConstrainLong sampleRate;
ConstrainLong sampleSize;
ConstrainBoolean echoCancellation;
ConstrainDouble latency;
ConstrainLong channelCount;
ConstrainDOMString deviceId;
ConstrainDOMString groupId;
};
更多Media Capture and Streams 相關(guān)細節(jié)：
http://www.w3.org/TR/mediacapture-streams/
入門必讀資源：
- Getting Started with WebRTC
- Media Capture and Streams接口定義
- WebRTC API
- javascript并發(fā)開發(fā)，必須了解Blob URLs原理
- webrtc samples
- webaudiodemos
- WebRTC samples Peer connection: audio only
以下內(nèi)容待續(xù)
rtcpeerconnection
rtcdatachannel
一個ASP.NET MVC 在線錄音錄像（音視頻錄制并上傳）Demo ：
http://download.csdn.net/detail/starcrm/9394037
參考鏈接
http://javascript.ruanyifeng.com/htmlapi/webrtc.html
Andi Smith，Get Started with WebRTC
Thibault Imbert, From microphone to .WAV with: getUserMedia and Web Audio
Ian Devlin, Using the getUserMedia API with the HTML5 video and canvas elements
Eric Bidelman, Capturing Audio & Video in HTML5
Sam Dutton, Getting Started with WebRTC
Dan Ristic, WebRTC data channels
Justin Uberti, Sam Dutton, WebRTC: Plugin-free realtime communication
Mozilla Developer Network, Taking webcam photos
Sam Dutton, WebRTC in the real world: STUN, TURN and signaling
