WebRTC開發基礎（WebRTC入門系列1：getUserMedia）

時間 2019-11-16

標籤 webrtc 開發基礎入門系列 getusermedia 简体版

原文原文鏈接

什麼是WebRTCjavascript

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等。html

WebRTC（Web Real-Time Communication——網頁實時通訊）是一個基於瀏覽器的實時多媒體通訊技術。該項技術旨在使Web瀏覽器具有實時通訊能力；同時，經過將這些能力封裝並以JavaScript API的方式開放給Web應用開發人員，使得Web應用開發人員可以經過HTML標籤和JavaScript API快速地開發出基於Web瀏覽器的實時音視頻應用，而無需依賴任何第三方插件。谷歌2011年6月3日宣佈向開發人員開放WebRTC架構的源代碼。html5

WebRTC的影響和前景java

　　WebRTC技術的快速普及將對現有的不少領域產生巨大的影響。首先，受到影響的是現有的VoIP業務領域。目前咱們正在經歷一個硬件多樣化的時代，好比可穿戴設備的興起。這將促進適應新型設備的操做系統的涌現和加大現有操做系統的分化。所以，操做系統的異構性和繁雜性使得VoIP應用的開發、更新與維護的複雜性和成本劇增。隨着WebRTC集成到瀏覽器中，基於Web的實時通訊應用能夠經過HTML標籤和JavaScript API實現快速的開發，並避免了因爲操做系統的異構性帶來的重複開發和因爲版本升級帶來的維護費用以及不便。這將致使現有的應用開發人員從現有的基於瀏覽器插件或者原生VoIP應用模式轉向使用WebRTC進行Web應用開發，進而使得現有的VoIP應用的普通用戶向基於瀏覽器的Web應用的遷移。目前，涉及VoIP業務的客服以及在線教育領域很關注WebRTC技術在自身領域的應用。node

　　其次，現有的IM應用經過其擁有的大量用戶，並經過構建在這些IM應用上的衍生應用造成生態圈。這些IM應用及其所造成的生態圈正在試圖取代瀏覽器成爲互聯網入口。這種現象在移動智能終端表現的更加突出。然而，如上文所述，WebRTC技術的部署和使用將呈現爆炸式的增加，這將致使IM應用向IM Web應用的轉變和用戶向IM Web應用的遷移。所以，構建在現有IM應用的生態圈將被打破。現有的IM應用及其生態圈必將作出相應的佈局調整以適應新的技術環境。git

　　同時，WebRTC的普及將給企業帶來監管和安全問題。目前，有些公司在公司內部封鎖了IM應用（好比QQ，Skype）的端口，以防止員工在工做過程當中因爲對音視頻工具的不慎使用所形成的安全問題。基於WebRTC的新型IM Web應用，與正常的Web頁面無異，因此很難檢測該種IM Web應用。這給企業的監管和安全形成了巨大的隱患。github

　　其次，智能電視的展示形式和業務模式將受到巨大的影響。目前，智能電視主要包括智能操做系統以及顯示設備。在智能電視上的主要業務也主要是對多媒體源的直播和點播。隨着WebRTC的普及和涌現大量的IM Web應用，智能電視將極可能原生的包含攝像頭設備。同時，視頻會議業務也將像如今的對多媒體源的直播和點播業務同樣，成爲智能電視的主要業務。web

　　其次，所上文所述，因爲WebRTC所支持的音視頻格式的侷限，以及WebRTC在多人視頻會話中採用的可選網狀結構的限制（目前是6人）。新型的服務供應商將產生。這些供應商主要提供1）不一樣視頻編解碼的轉換；2）在多人會話中，視頻流的整合與廣播。目前，服務供應商及其產品有：Dialogic推出的PowerMedia XMS 2.1和英特爾推出的Collaboration Service for WebRTC。canvas

　　最後，集成了WebRTC的Web瀏覽器將進一步改變傳統的應用、Web瀏覽器和操做系統的格局。Web瀏覽器將成爲介於操做系統與Web應用的一個平臺。爲Web操做系統的普及進一步鋪平道路。包含了WebRTC的瀏覽器將進一步鞏固其互聯網入口的地位——近些年，超級應用（例如微信）經過其擁有的大量用戶和在其上的開發的衍生應用試圖成爲互聯網入口。Web瀏覽器及其Web應用將成爲一種生態圈。高性能瀏覽器的研發將成爲下一個競爭熱點。而瀏覽器的安全問題將更加凸顯。api

開發基礎知識

本文大部分翻譯自：

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.

一、輸入、輸出

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

二、getUserMedia參數

getUserMedia()方法須要三個參數：

約束對象Constrain，一般是配置項；
一個成功的回調，經過一個MediaStream；
一個失敗的回調，失敗的回調是經過一個錯誤對象；

三、標籤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 ' 應用。

四、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.

五、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/