01.webRTC的getUserMedia API采集视频数据
2020-01-11 本文已影响0人
讲武德的年轻人
- html
<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet", href="css/client.css" />
</head>
<body>
<h1>Realtime communication with WebRTC </h1>
<video autoplay playsinline></video>
<script src="js/client.js"></script>
</body>
</html>
解释下，其中
<video autoplay playsinline></video>
它是 HTML5 的视频标签，不仅可以播放多媒体文件，还可以用于播放采集到的数据。其参数含义如下：
autoplay，表示当页面加载时可以自动播放视频；
playsinline，表示在 HTML5 页面内播放视频，而不是使用系统播放器播放视频。
- client.js
'use strict';
const mediaStreamContrains = {
video: true
};
const localVideo = document.querySelector('video');
function gotLocalMediaStream(mediaStream){
localVideo.srcObject = mediaStream;
}
function handleLocalMediaStreamError(error){
console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
gotLocalMediaStream
).catch(
handleLocalMediaStreamError
);
通过上面的代码，我们就可以采集到视频数据并将它展示在页面上了，很简单吧！接下来，我们来大体看一下它的逻辑。
-
JavaScript 代码中首先执行getUserMedia()方法，该方法会请求访问 Camera。如果是第一次请求 Camera，浏览器会向用户弹出提示窗口，让用户决定是否可以访问摄像头。如果用户允许访问，且设备可用，则调用 gotLocalMediaStream 方法。
-
在 gotLocalMediaStream 方法中，其输入参数为MediaStream对象，该对象中存放着getUserMedia方法采集到的音视频轨。我们将它作为视频源赋值给 HTML5 的 video 标签的 srcObject 属性。这样在 HTML 页面加载之后，就可以在该页面中看到摄像头采集到的视频数据了。
在这个例子中，getUserMedia方法的输入参数mediaStreamContraints限定了只采集视频数据。同样的，你也可以采集音频数据或同时采集音频和视频数据。
检测自己机器的音视频设备
if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){
console.log("enumerateDevices() not supported.");
}
// 枚举 cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(deviceInfos) {
// 打印出每一个设备的信息
deviceInfos.forEach(function(deviceInfo) {
console.log(deviceInfo.kind + ": " + deviceInfo.label +
" id = " + deviceInfo.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
