WebRTC MediaStream接口

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有一个清晰的概述。