課程地址：零聲學院 WebRTC入門與提高 https://ke.qq.com/course/435382?tuin=137bb271
技術支持QQ群：782508536
版權聲明：關于作者：王昕（QQ:475660） 十多年開發經驗，在Delphi、ASP.net、Cobol、WPF、C#、SharePoint、Java、XMPP Server/Client、EPortal、BPM等領域較有經驗，對開源技術有廣泛興趣，尤其關注門戶平臺和即時通訊技術，在廣州工作生活30余年。 https://blog.csdn.net/starcrm/article/details/52576387
博主有刪減，著作權歸原作者王昕所有。
什么是WebRTC
WebRTC由IETF（Internet Engineering Task Force——互聯網工程任務組）和W3C（World Wide Web Consortium——萬維網聯盟）聯合負責其標準化工作。IETF定制WebRTC的互聯網基礎協議標準，該標準也被稱為RTCWeb（Real-Time Communication in Web-browsers）。W3C則負責定制WebRTC的客戶端JavaScript API接口的標準。目前參與該技術標準定制的公司主要有思科、微軟、谷歌、蘋果、愛立信、Intel等。
WebRTC（Web Real-Time Communication——網頁實時通信）是一個基于瀏覽器的實時多媒體通信技術。該項技術旨在使Web瀏覽器具備實時通信能力；同時，通過將這些能力封裝并以JavaScript API的方式開放給Web應用開發人員，使得Web應用開發人員能夠通過HTML標簽和JavaScript API快速地開發出基于Web瀏覽器的實時音視頻應用，而無需依賴任何第三方插件。谷歌2011年6月3日宣布向開發人員開放WebRTC架構的源代碼。
WebRTC的影響和前景
WebRTC技術的快速普及將對現有的很多領域產生巨大的影響。 首先，受到影響的是現有的VoIP業務領域。目前我們正在經歷一個硬件多樣化的時代，比如可穿戴設備的興起。這將促進適應新型設備的操作系統的涌現和加大現有操作系統的分化。因此，操作系統的異構性和繁雜性使得VoIP應用的開發、更新與維護的復雜性和成本劇增。隨著WebRTC集成到瀏覽器中，基于Web的實時通信應用可以通過HTML標簽和JavaScript API實現快速的開發，并避免了由于操作系統的異構性帶來的重復開發和由于版本升級帶來的維護費用以及不便。這將導致現有的應用開發人員從現有的基于瀏覽器插件或者原生VoIP應用模式轉向使用WebRTC進行Web應用開發，進而使得現有的VoIP應用的普通用戶向基于瀏覽器的Web應用的遷移。目前，涉及VoIP業務的客服以及在線教育領域很關注WebRTC技術在自身領域的應用。
其次，現有的IM應用通過其擁有的大量用戶，并通過構建在這些IM應用上的衍生應用形成生態圈。這些IM應用及其所形成的生態圈正在試圖取代瀏覽器成為互聯網入口。這種現象在移動智能終端表現的更加突出。然而，如上文所述，WebRTC技術的部署和使用將呈現爆炸式的增長，這將導致IM應用向IM Web應用的轉變和用戶向IM Web應用的遷移。因此，構建在現有IM應用的生態圈將被打破。現有的IM應用及其生態圈必將做出相應的布局調整以適應新的技術環境。
同時，WebRTC的普及將給企業帶來監管和安全問題。目前，有些公司在公司內部封鎖了IM應用（比如QQ，Skype）的端口，以防止員工在工作過程中由于對音視頻工具的不慎使用所造成的安全問題。基于WebRTC的新型IM Web應用，與正常的Web頁面無異，所以很難檢測該種IM Web應用。這給企業的監管和安全造成了巨大的隱患。
其次，智能電視的展現形式和業務模式將受到巨大的影響。目前，智能電視主要包括智能操作系統以及顯示設備。在智能電視上的主要業務也主要是對多媒體源的直播和點播。隨著WebRTC的普及和涌現大量的IM Web應用，智能電視將很可能原生的包含攝像頭設備。同時，視頻會議業務也將像現在的對多媒體源的直播和點播業務一樣，成為智能電視的主要業務。
其次，所上文所述，由于WebRTC所支持的音視頻格式的局限，以及WebRTC在多人視頻會話中采用的可選網狀結構的限制（目前是6人）。新型的服務供應商將產生。這些供應商主要提供1）不同視頻編解碼的轉換；2）在多人會話中，視頻流的整合與廣播。目前，服務供應商及其產品有：Dialogic推出的PowerMedia XMS 2.1和英特爾推出的Collaboration Service for WebRTC。
最后，集成了WebRTC的Web瀏覽器將進一步改變傳統的應用、Web瀏覽器和操作系統的格局。Web瀏覽器將成為介于操作系統與Web應用的一個平臺。為Web操作系統的普及進一步鋪平道路。包含了WebRTC的瀏覽器將進一步鞏固其互聯網入口的地位——近些年，超級應用（例如微信）通過其擁有的大量用戶和在其上的開發的衍生應用試圖成為互聯網入口。Web瀏覽器及其Web應用將成為一種生態圈。高性能瀏覽器的研發將成為下一個競爭熱點。而瀏覽器的安全問題將更加凸顯。
開發基礎知識
本文大部分翻譯自：
http://www.html5rocks.com/en/tutorials/webrtc/basics/
http://w3c.github.io/mediacapture-main/getusermedia.html
通常WebRTC程序需要實現以下需求：
- 獲得流音頻，視頻或其他數據。
- 獲取網絡信息，如IP地址和端口，與其他WebRTC客戶端（稱為節點）連接通訊、交換數據，穿越NAT和防火墻。
- 協調信令通信以報告錯誤、發起或關閉會話。
- 客戶端之間交換媒體和客戶的信息，如分辨率和編解碼器。
- 通信流音頻，視頻或數據。
- 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參數
getUserMedia()方法需要三個參數：
- 約束對象Constrain，通常是配置項；
- 一個成功的回調，通過一個MediaStream；
- 一個失敗的回調，失敗的回調是通過一個錯誤對象；
3、標簽label、MediaStreamTracks數組
每個MediaStream都有一個標簽label，如'xk7eulhsuhkbnjlwkw4yygnjj8onsgwhbvlq”
MediaStreamTracks數組是由getAudioTracks()和getVideoTracks()方法返回。
對于https://webrtc.github.io/samples/src/content/getusermedia/gum的例子
stream.getAudioTracks（）返回一個空數組（因為沒有音頻）。
假設獲得一個網絡攝像頭連接，stream.getVideoTracks（）將返回MediaStreamTrack數組，表示流來自攝像頭
每個MediaStreamTrack只有一種類型（“視頻”或“音頻”），和一個標簽label（類似于“FaceTime HD Camera（內置）”）代表音頻或視頻的一個或多個通道。
在這種情況下（沒有音頻），gum的例子只有一個視頻軌跡和沒有音頻。
更多的場景：得到前置攝像頭，后置攝像頭，麥克風流，以及“屏幕分享screenshared ' 應用。
** 4、Blob URL**
Chrome or Opera中：URL.createObjectURL（）方法把一個MediaStream轉換到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音頻數據傳遞給音頻或視頻元素（但請注意，默認情況下是靜音的）。
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權限允許權限請求，可以只授予一次，此后，用戶不被要求授予照相機或麥克風訪問權限。同樣的，在使用HTTPS網頁：也只有授予一次（在Chrome至少一次）。顯示在瀏覽器中的信息欄的始終允許“Always Allow”按鈕。
此外，Chrome將在2015年底棄用getUserMedia（）的HTTP訪問。在Chrome M44你已經可以看到一個警告信息。
未來MediaStream可做為任何流的數據源，而不僅僅是照相機或麥克風。例如傳感器或其它輸入。
一些好玩的例子：
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()調用。
其目的是為執行其他約束，諸如寬高比，面向模式（正面或背面相機），幀率，高度和寬度......
例子：
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 相關細節：
http://www.w3.org/TR/mediacapture-streams/
入門必讀資源：
- Getting Started with WebRTC
- Media Capture and Streams接口定義
- WebRTC API
- javascript并發開發，必須了解Blob URLs原理
- webrtc samples
- webaudiodemos
- WebRTC samples Peer connection: audio only
以下內容待續
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
