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