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实现