[WebAPIs] Media Streams, Streams API and WebRTC
keywords: MediaStream
, MediaStreamTrack
, MediaDevices
, MediaRecorder
, MediaSource
, track
, channel
, HTML Video Element
, WebRTC
var chunks = [];
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) {
/* Get Tracks */
var videoTracks = stream.getVideoTracks();
/* Add MediaRecorder */
var mediaRecorder = new MediaRecorder(stream);
/* Close all tracks */
stream.getTracks().forEach(function (track) {
track.stop();
});
/* Set stream to <video> */
videoElement.srcObject = stream;
})
.catch(function (err) {
/* handle the error */
});
RecordRTC (library for WebRTC) @ Github
W ebRTC 影音串流概念
WebRTC API @ MDN
Media Capture 和 Streams API 又被稱作 Media Stream API 或 Stream API ,主要用來處理和**網頁即時通訊(WebRTC, Web Real-Time Communications)**有關的影音資料傳流,以及讓瀏覽器在不需要任何外掛的情況下直接進行 P2P 的溝通。
- 編解碼器(codec):WebRTC 使用的聲音編解碼器包含
Opus
,iSac
,iLBC
;影片編碼器包含VP8
,VP9
。 - 通訊協定:WebRTC 使用的通訊協定為 RTP/RTCP
- Signaling Server:雖然 WebRTC 可以讓使用者直接透過瀏覽器進行 P2P 連線,但在雙方建立連線前仍需要有一個伺服器讓他們知道雙方的位址,才能進行溝通,這個伺服器稱作 Signaling Server,這並沒有規範在 WebRTC 內。
目前主要包含有三種 API 分別是:
getUserMedia
:取得使用者的影音串流(影音採集)RTCPeerConnection
:建立與管理兩個瀏覽器間的直接通訊(P2P)RTCDataChannel
:用來傳送 P2P 間的資料
更多編解碼器(codec)可以參考 [影音傳輸-基礎知識](/Users/pjchen/Projects/Notes/source/_posts/WebDevelopment/[Note] 影音傳輸-基礎知識.md) @ 筆記。 更多通訊協定(protocol)可以參考 [影音傳輸-傳輸方式與通訊協定](/Users/pjchen/Projects/Notes/source/_posts/WebDevelopment/[Note] 影音傳輸-傳輸方式與通訊協定.md) @ 筆記。 關於如何透過 Signaling Server 建立 WebRTC 連線可以參考 30-26 之 WebRTC 的 P2P 即時通信與小範例 by 我是小馬克 @ iThome