通過WebRTC進行實時通訊-從webcam獲取視訊流

WebRTC · 發表 2018-10-15 14:32:46

摘要：你將學到什麼在這一步，你將知道如何做下面的事兒：從webcam獲得視訊流控制流播放例用 CSS 和 SVG控制視訊對於操作的完整版本在 step-01目錄裡。一段簡短的 HTML... 新增視訊和指令碼元素到work...

你將學到什麼

在這一步，你將知道如何做下面的事兒：

從webcam獲得視訊流
控制流播放
例用 CSS 和 SVG控制視訊

對於操作的完整版本在 step-01目錄裡。

一段簡短的 HTML...

新增視訊和指令碼元素到work目錄下的index.html中：

<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet", href="css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC </h1>
<video autoplay playsinline></video>
<script src="js/main.js"></video>
</body>
</html>

...和一段javascript片段

新增下面的程式碼到 js目錄下的main.js中：

'use strict';

const mediaStreamContrains = {
video: true,
};

const localVideo = document.querySelector('video');
let localStream;

function gotLocalMediaStream(meidaStream){
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}

function handleLocalMediaStreamError(error){
console.log('navigator.getUserMedia error: ', error);
}

navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

這裡的所有JavaScript例子都使用 use strict ; 以避免一般的程式碼陷阱。可在 ofollow,noindex">ECMAScript 5 Strict Mode, JSON, and More 。中找到更多的資訊。

試一下

在你的瀏覽器中開啟 index.html，你將看到像下面這樣子（當然是你的 webcam 中樣子）：

它是如何工作的呢？

通過呼叫getUserMedia()，瀏覽器向用戶請求訪問camera的許可權（當前是否是第一次對camera的請求）。如果成功，返回MediaStream。MediaStream 將被多媒體元素的 srcObject 屬性所使用：

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

...

function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}

contrains 引數允許你指定你要得到的媒體。在這個例子中，只有video。因此，audio預設提關閉的。

const mediaStreamConstraints = {
video: true,
};

你能使用 contrains 申請額外的功能，如視訊解析度：

const hdConstraints = {
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}

在 MediaTrackConstraints 規範中列出了所有可能的 contrains 型別。但並不是所有的瀏覽器都支援這些選項。

如果請求的解析度當前camera無法支援，getUserMedia將被拒絕，並返回OvercontrainedError，並且也不會給使用者訪問camera許可權的提示。

這裡你能看到一個demo演示如何使用 contrains 去請求不同的解析度, 這裡有一個demo使用 contrains 選擇camera和microphone。

如果呼叫 getUserfMedia成功，從webcam獲取的視訊流將作為源設定給video元素。

function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}

點滴

傳遞給 getUserMedia的 localStream是全域性變數，所以你能從瀏覽器的console中看到：找開 console，敲入 stream 並按回車鍵。（在Chrome中檢視console，按 crtl+shift+j, 或在Mac 下按Command-Option-j）
localStream.getVideoTracks()會返回什麼？
償試呼叫localStream.getVideoTrack()[0].stop()
檢視 contrains物件，當你修改它為 {audio: true, video:true}會發生什麼？
視訊元素的大小是多少？通過 JavaScript你如何能得到視訊的自然尺寸？使用 Crome Dev工具檢查。

新增 CSS 過濾視訊元素，例如：

video {
filter: blur(4px) invert(1) opacity(0.5);
}

償試新增 SVG過濾器，例如：

video {
 filter: hue-rotate(180deg) saturate(200%);
}

我們學到了什麼

在本節中，你學到了：

contrains

本節完整的版本在 step-01目錄下。

提示

在 video無素中別忘了 autoplay屬性。如果沒有它，你只能看到一個簡單的幀。
對於 getUserMedia() contrains 有很多選項，可以看這個 demo webrtc.github.io/samples/src/content/peerconnection/constraints 。正如你看到的，在那個網站上有很多有趣的WebRTC例子。

最佳實踐

確保你的視訊元素別超出它的 container 。我們添加了 width 和 max-width 設定最佳視訊的尺寸和最大尺寸。瀏覽器會自動計算高度：
```
video {
max-width: 100%;
width: 320px;
}
```

接下來

你已經得到了視訊，但如何傳輸它呢？下一步我們來給出答案。