IT序号网

WebRTC MediaStream接口知识解答

qq123 2021年05月25日 程序员 258 0

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


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

图解SSL/TLS协议知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。