WebRTC MediaStream接口

時間 2019-12-01

標籤 webrtc mediastream 接口简体版

原文原文鏈接

MediaStream API旨在方便地從用戶本地攝像機和麥克風訪問媒體流。getUserMedia()方法是訪問本機輸入設備的主要方式。javascript

API有幾個關鍵點:

1. 實時視頻或音頻以流對象的形式表示。
2. 必定的安全控制,在web應用程序開始獲取流數據以前,它經過詢問用戶是否受權。
3. 輸入設備的選擇由MediaStream 處理(例如,當本地計算機有兩個或者兩個以上的攝像頭或麥克風鏈接時).
4. 每一個MediaStream對象包括幾個MediaStreamTrack對象。它們表明來自不一樣輸入設備的視頻和音頻。html

5. 每一個MediaStreamTrack對象可能包括幾個信道(右聲道和左聲道)。這些是MediaStream定義的最小部件。java

有兩種方法能夠輸出MediaStream對象。首先,咱們能夠將輸出顯示爲視頻或音頻元素。其次,咱們能夠將輸出發送到RtcPeerConnection對象,而後將其發送到遠程計算機。web

使用MediaStream接口

讓咱們建立一個簡單的WebRTC應用程序。它將在屏幕上顯示一個視頻元素,詢問用戶使用攝像機的權限,並在瀏覽器中顯示實時視頻流。建立index. html文件chrome

<!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);
})

如今刷新你的頁面,點擊容許,你應該看到你的臉在屏幕上。ide

請記住使用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有一個清晰的概述。

1. WebRTC API之 mediaStream詳解
2. webrtc學習——mediaStream和MediaStreamTrack
3. MediaStream，AudioTrack，VideoTrack的關係
4. WebRTC之框架與接口
5. WebRTC 學習之 WebRTC 簡介
6. WebRTC
7. webrtc
8. （二）WebRTC手記之框架與接口
9. WebRTC手記之框架與接口
10. 更新webrtc媒體庫接口
更多相關文章...
• Kotlin 接口 - Kotlin 教程
• C# 接口（Interface） - C#教程
• 算法總結-滑動窗口
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。