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>的元素，這是完全不同的東西。）

一個最簡單的例子：

1、輸入、輸出

每個MediaStream具有一個輸入，這可能由navigator.getUserMedia()生成；並僅具有一個輸出，傳遞到video element或RTCPeerConnection；

2、getUserMedia引數

getUserMedia()方法需要三個引數：

1. 約束物件Constrain，通常是配置項；
2. 一個成功的回撥，通過一個MediaStream；
3. 一個失敗的回撥，失敗的回撥是通過一個錯誤物件；

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 ' 應用。

Chrome or Opera中：URL.createObjectURL（）方法把一個MediaStream轉換到Blob URL，可以設定為video element的src。

版本M25以上，以Chrome為基礎的瀏覽器（Chrome和Opera），允許從getUserMedia音訊資料傳遞給音訊或視訊元素（但請注意，預設情況下是靜音的）。

// 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 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.html5rocks.com/en/tutorials/webrtc/basics/

介面定義：http://w3c.github.io/mediacapture-main/getusermedia.html

javascript併發開發，必須瞭解Blob URLs原理：http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis

其他Demo資源：

http://webaudiodemos.appspot.com/

https://webrtc.github.io/samples/

以下內容待續

• rtcpeerconnection

• rtcdatachannel

一個ASP.NET MVC 線上錄音錄影（音視訊錄製並上傳）Demo ：

參考連結