MediaStream API旨在方便地从用户本地摄像机和麦克风访问媒体流。getUserMedia()方法是访问本机输入设备的主要方式。
API有几个关键点:
1. 实时视频或音频以流对象的形式表示。2. 一定的安全控制,在web应用程序开始获取流数据之前,它通过询问用户是否授权。
3. 输入设备的选择由MediaStream 处理(例如,当本地计算机有两个或者两个以上的摄像头或麦克风连接时).
4. 每个MediaStream对象包括几个MediaStreamTrack对象。它们代表来自不同输入设备的视频和音频。
5. 每个MediaStreamTrack对象可能包括几个信道(右声道和左声道)。这些是MediaStream定义的最小部件。
有两种方法可以输出MediaStream对象。首先,我们可以将输出显示为视频或音频元素。其次,我们可以将输出发送到RtcPeerConnection对象,然后将其发送到远程计算机。
使用MediaStream接口
让我们创建一个简单的WebRTC应用程序。它将在屏幕上显示一个视频元素,询问用户使用摄像机的权限,并在浏览器中显示实时视频流。创建index. html文件
1 <!DOCTYPE html>
2 <html lang = "en">
3 <head>
4 <meta charset = "utf-8" />
5 </head>
6 <body>
7 <video autoplay></video>
8 <script src = "client.js"></script>
9 </body>
10 </html>然后创建client.js文件并添加以下内容:
1 function hasUserMedia() {
2 //check if the browser supports the WebRTC
3 return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
4 navigator.mozGetUserMedia);
5 }
6
7 if (hasUserMedia()) {
8 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
9 || navigator.mozGetUserMedia;
10 //enabling video and audio channels
11 navigator.getUserMedia({ video: true, audio: true }, function (stream) {
12 var video = document.querySelector('video');
13 //inserting our stream to the video tag
14 video.src = window.URL.createObjectURL(stream);
15 }, function (err) {});
16 } else {
17 alert("WebRTC is not supported");
18 }(注意：以上可能已经过期，最好用下面的写法：)
1 navigator.mediaDevices.getUserMedia({
2 video: true,
3 audio: true
4 }).then(stream => {
5 const video = document.querySelector('video');
6 video.srcObject = stream;
7 }).catch(error => {
8 alert('error: ', error);
9 })请记住使用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:
1 <!DOCTYPE html>
2 <html lang = "en">
3
4 <head>
5 <meta charset = "utf-8" />
6 </head>
7 <body>
8 <video autoplay></video>
9 <div><button id = "btnGetAudioTracks">getAudioTracks()
10 </button></div>
11 <div><button id = "btnGetTrackById">getTrackById()
12 </button></div>
13 <div><button id = "btnGetTracks">getTracks()</button></div>
14 <div><button id = "btnGetVideoTracks">getVideoTracks()
15 </button></div>
16 <div><button id = "btnRemoveAudioTrack">removeTrack() - audio
17 </button></div>
18 <div><button id = "btnRemoveVideoTrack">removeTrack() - video
19 </button></div>
20 <script src = "client.js"></script>
21 </body>
22 </html>我们添加几个按钮来尝试几个MediaStreamAPI。然后,为新创建的按钮添加事件处理程序,我们来修改client.js文件。
1 var stream;
2
3 function hasUserMedia() {
4 //check if the browser supports the WebRTC
5 return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
6 navigator.mozGetUserMedia);
7 }
8
9 if (hasUserMedia()) {
10 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
11 || navigator.mozGetUserMedia;
12 //enabling video and audio channels
13 navigator.getUserMedia({ video: true, audio: true }, function (s) {
14 stream = s;
15 var video = document.querySelector('video');
16 //inserting our stream to the video tag
17 video.src = window.URL.createObjectURL(stream);
18 }, function (err) {});
19 } else {
20 alert("WebRTC is not supported");
21 }
22
23 btnGetAudioTracks.addEventListener("click", function(){
24 console.log("getAudioTracks");
25 console.log(stream.getAudioTracks());
26 });
27
28 btnGetTrackById.addEventListener("click", function(){
29 console.log("getTrackById");
30 console.log(stream.getTrackById(stream.getAudioTracks()[0].id));
31 });
32
33 btnGetTracks.addEventListener("click", function(){
34 console.log("getTracks()");
35 console.log(stream.getTracks());
36 });
37
38 btnGetVideoTracks.addEventListener("click", function(){
39 console.log("getVideoTracks()");
40 console.log(stream.getVideoTracks());
41 });
42
43 btnRemoveAudioTrack.addEventListener("click", function(){
44 console.log("removeAudioTrack()");
45 stream.removeTrack(stream.getAudioTracks()[0]);
46 });
47
48 btnRemoveVideoTrack.addEventListener("click", function(){
49 console.log("removeVideoTrack()");
50 stream.removeTrack(stream.getVideoTracks()[0]);
51 });如果单击getTracks()按钮,则应看到所有MediaStreamTracks (所有连接的视频和音频输入)。然后单击getTrackById()以获得音频MediaStreamTrack。
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
