MediaStream API旨在方便地從用戶本地攝像機和麥克風訪問媒體流。getUserMedia()方法是訪問本機輸入設備的主要方式。
API有幾個關鍵點:
1. 實時視頻或音頻以流對象的形式表示。
2. 一定的安全控制,在web應用程序開始獲取流數據之前,它通過詢問用戶是否授權。
3. 輸入設備的選擇由MediaStream 處理(例如,當本地計算機有兩個或者兩個以上的攝像頭或麥克風連接時).
4. 每個MediaStream對象包括幾個MediaStreamTrack對象。它們代表來自不同輸入設備的視頻和音頻。
5. 每個MediaStreamTrack對象可能包括幾個信道(右聲道和左聲道)。這些是MediaStream定義的最小部件。
有兩種方法可以輸出MediaStream對象。首先,我們可以將輸出顯示為視頻或音頻元素。其次,我們可以將輸出發送到RtcPeerConnection對象,然后將其發送到遠程計算機。
使用MediaStream接口
讓我們創建一個簡單的WebRTC應用程序。它將在屏幕上顯示一個視頻元素,詢問用戶使用攝像機的權限,並在瀏覽器中顯示實時視頻流。創建index. html文件
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
</head>
<body>
<video autoplay></video>
<script src = "client.js"></script>
</body>
</html>
然后創建client.js文件並添加以下內容:
function hasUserMedia() {
//check if the browser supports the WebRTC
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia);
}
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
//enabling video and audio channels
navigator.getUserMedia({
video: true,
audio: true
}, function (stream) {
var video = document.querySelector('video');
//inserting our stream to the video tag
video.src = window.URL.createObjectURL(stream);
}, function (err) {});
} else {
alert("WebRTC is not supported");
}
在這里,我們創建getUserMedia()函數,它檢查webrtc是否受支持。然后,我們訪問getUserMedia函數,其中第二個參數是接受來自用戶設備的流的回調。然后,我們使用window.url.createObjectUrl將流加載到視頻元素中,它創建一個表示參數中給定對象的URL。
(注意：以上可能已經過期，最好用下面的寫法：)
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
const video = document.querySelector('video');
video.srcObject = stream;
}).catch(error => {
alert('error: ', error);
})
現在刷新你的頁面,點擊允許,你應該看到你的臉在屏幕上。
請記住使用web服務器運行所有腳本。我們已經在webrtc環境教程中安裝了一個。
MediaStream接口
屬性
MediaStream.active (只讀) -如果MediaStream處於活動狀態,則返回true ,否則返回false。
MediaStream.ended (只讀,不推薦) -如果在對象上已觸發結束事件,則返回true ,這意味着流已完全讀取,如果未達到流結尾,則為false。（此屬性chrome已打印undefine）
MediaStream.id (只讀)—對象的唯一標識符。
MediaStream.label (只讀,不推薦)−用戶代理分配的唯一標識符。（此屬性chrome已打印undefine）
事件
MediaStream.onactive—當MediaStream對象變為活動時觸發的活動事件的處理程序。
MediaStream.onaddtrack—在添加新的MediaStreamTrack對象時觸發的addTrack事件的處理程序。
MediaStream.onended (不推薦) -當流終止時觸發的結束事件的處理程序。
MediaStream.oninactive—當MediaStream對象變為非活動狀態時觸發的非活動事件的處理程序。
MediaStream.onremovetrack -在從它移除MediaStreamTrack對象時觸發的removeTrack事件的處理程序。
方法
MediaStream.addTrack() -將作為參數的MediaStreamTrack對象添加到MediaStream中。如果已經添加了音軌,則沒有發生任何事情。
MediaStream.clone() -使用新id返回MediaStream對象的克隆。
MediaStream.getAudioTracks() -從MediaStream對象返回音頻MediaStreamTrack對象的列表。
MediaStream.getTrackById() -通過id返回跟蹤。如果參數為空或未找到id,則返回null。如果多個磁道具有相同的id,則返回第一個磁道。
MediaStream.getTracks() -從MediaStream對象返回所有MediaStreamTrack對象的列表。
MediaStream.getVideoTracks() -從MediaStream對象返回視頻MediaStreamTrack對象的列表。
MediaStream.removeTrack() -從MediaStream中刪除作為參數的MediaStreamTrack對象。如果已刪除該磁道,則不會發生任何操作。
要測試上述API,請以下列方式修改index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<video autoplay></video>
<div><button id="btnGetAudioTracks">getAudioTracks()</button></div>
<div><button id="btnGetTrackById">getTrackById()</button></div>
<div><button id="btnGetTracks">getTracks()</button></div>
<div><button id="btnGetVideoTracks">getVideoTracks()</button></div>
<div><button id="btnRemoveAudioTrack">removeTrack() - audio</button></div>
<div><button id="btnRemoveVideoTrack">removeTrack() - video</button></div>
<script src="client.js"></script>
</body>
</html>
我們添加幾個按鈕來嘗試幾個MediaStreamAPI。然后,為新創建的按鈕添加事件處理程序,我們來修改client.js文件。
var stream;
function hasUserMedia() {
//check if the browser supports the WebRTC
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia);
}
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
//enabling video and audio channels
navigator.getUserMedia({
video: true,
audio: true
}, function (s) {
stream = s;
var video = document.querySelector('video');
//inserting our stream to the video tag
video.src = window.URL.createObjectURL(stream);
}, function (err) {});
} else {
alert("WebRTC is not supported");
}
btnGetAudioTracks.addEventListener("click", function () {
console.log("getAudioTracks");
console.log(stream.getAudioTracks());
});
btnGetTrackById.addEventListener("click", function () {
console.log("getTrackById");
console.log(stream.getTrackById(stream.getAudioTracks()[0].id));
});
btnGetTracks.addEventListener("click", function () {
console.log("getTracks()");
console.log(stream.getTracks());
});
btnGetVideoTracks.addEventListener("click", function () {
console.log("getVideoTracks()");
console.log(stream.getVideoTracks());
});
btnRemoveAudioTrack.addEventListener("click", function () {
console.log("removeAudioTrack()");
stream.removeTrack(stream.getAudioTracks()[0]);
});
btnRemoveVideoTrack.addEventListener("click", function () {
console.log("removeVideoTrack()");
stream.removeTrack(stream.getVideoTracks()[0]);
});
刷新頁面。單擊getAudioTracks()按鈕,然后單擊removeTrack()- audio按鈕。現在應該刪除音軌。然后做同樣的視頻軌道。
如果單擊getTracks()按鈕,則應看到所有MediaStreamTracks (所有連接的視頻和音頻輸入)。然后單擊getTrackById()以獲得音頻MediaStreamTrack。
總結
在本章中,我們使用MediaStream創建了一個簡單的WebRTC應用程序。現在您應該對使WebRTC工作的各種MediaStream有一個清晰的概述。