使用WebRTC構建實時通信——從攝像頭獲取視頻流（二）

08-14

來自專欄 WebRTC4 人贊了文章

你會學到什麼

在這一步中，您將了解：

從您的攝像頭獲取視頻流
操縱流播放
使用CSS和SVG來處理視頻

此步驟的完整版本位於step-01文件夾中。

一小段HTML代碼

將video元素和javascript元素添加到工作目錄中的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></video> <script src="js/main.js"></script></body></html>

少量JavaScript

將以下內容添加到js文件夾的main.js文件中：

use strict;navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;var constraints = { audio: false, video: true};var video = document.querySelector(video);function successCallback(stream) { window.stream = stream; // stream available to console if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; }}function errorCallback(error) { console.log(navigator.getUserMedia error: , error);}navigator.getUserMedia(constraints, successCallback, errorCallback);

這裡的所有JavaScript示例都使用「use strict」; 避免常見的編碼問題。詳細請了解ECMAScript 5 Strict Mode，JSON和更多內容。

Try it out

在你的瀏覽器中打開index.html，你會看到類似的東西（當然還包括你的攝像頭的視圖！）：

運行原理

getUserMedia()是這樣調用的：

navigator.getUserMedia(constraints, successCallback, errorCallback);

這項技術還是比較新的，所以瀏覽器仍然使用getUserMedia的前綴名稱。在main.js的頂部填充此代碼！

constraints參數允許您指定要獲取的媒體 - 在本例中為視頻而不是音頻：

var constraints = { audio: false, video: true};

如果getUserMedia()調用成功，則攝像頭的視頻流將被設置為視頻元素的source：

function successCallback(stream) { window.stream = stream; // stream available to console if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; }}

知識擴展：

傳遞給getUserMedia()的流對象在全局範圍內，因此您可以從瀏覽器控制台檢查它：打開控制台，鍵入流並按回車鍵。（要在Chrome中查看控制台，請按Ctrl-Shift-J或Command-Option-J（假如你是Mac）
stream.getVideoTracks() 返回什麼？
嘗試調用stream.getVideoTracks()[0].stop()。
查看constraints對象：將其更改為 {audio：true，video：true} 時會發生什麼？
視頻元素的大小是多少？如何從JavaScript獲得視頻的自然大小，而不是顯示大小？使用Chrome開發工具進行檢查。
嘗試將CSS過濾器添加到視頻元素。例如：

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

嘗試添加SVG過濾器。例如：

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

你學到了什麼

在這一步你學會了如何：

從您的攝像頭獲取視頻。
設置媒體約束。
與視頻元素混淆。

此步驟的完整版本位於step-01文件夾中。

Tips

不要忘記視頻元素上的自動播放屬性。如果沒有這個，你只會看到一個框架！
getUserMedia() 約束有很多選項。看看webrtc.github.io/samples/src/content/peerconnection/constraints 上的文檔。如您所見，該站點上有許多有趣的WebRTC示例。

最佳實踐

確保您的視頻元素不會溢出其容器。我們已經添加了寬度和最大寬度來為視頻設置首選大小和最大大小。瀏覽器會自動計算高度：

video { max-width: 100%; width: 320px;}

有了視頻流，但你怎麼發送流呢？