媒体流 API
特性
-
MediaStream.active (read only) - 如果 MediaStream 处于活动状态，则返回 true，否则返回 false。
-
MediaStream.ended (read only, deprecated) - 如果在对象上触发了结束事件，则返回 true ，这意味着流已被完全读取，如果尚未到达流的末尾，则返回 false。
-
MediaStream.id (read only) - 对象的唯一标识符。
-
MediaStream.label (read only, deprecated) - 由用户代理分配的唯一标识符。
您可以在我的浏览器中看到上述属性的外观 -
事件处理程序
-
MediaStream.onactive - 当 MediaStream 对象变为活动状态时触发的活动事件的处理程序。
-
MediaStream.onaddtrack -添加新MediaStreamTrack对象时触发的addtrack事件的处理程序。
-
MediaStream.onended (deprecated) -流终止时触发的结束事件的处理程序。
-
MediaStream.oninactive - 当MediaStream对象变为非活动状态时触发的非活动事件的处理程序。
-
MediaStream.onremovetrack - removetrack事件的处理程序，当从中删除MediaStreamTrack对象时触发。
方法
-
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>
我们添加了几个按钮来试用几个 MediaStream API。然后我们应该为我们新创建的按钮添加事件处理程序。以这种方式修改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() - 音频按钮。现在应该删除音轨。然后对视频轨道执行相同的操作。
如果单击getTracks()按钮，您应该会看到所有MediaStreamTracks（所有连接的视频和音频输入）。然后点击getTrackById()获取音频 MediaStreamTrack。
概括
在本章中，我们使用 MediaStream API 创建了一个简单的 WebRTC 应用程序。现在您应该清楚地了解使 WebRTC 工作的各种 MediaStream API。
请记住使用 Web 服务器运行所有脚本。我们已经在 WebRTC 环境教程中安装了一个。