WebRTC基础实践-4.获取摄像头的视频流本节内容
在本节课程中, 我们将学习以下知识点:
从摄像头(webcam)获取视频流(video stream)
webrtc浏览器控制视频内容的回显
通过CSS和SVG处理视频内容。
本节的完整版代码位于 step-01 ⽂件夹中。
HTML代码
在 work ⽬录下的 index.html ⽂件中, 增加 video 标签和 script 标签:
<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<!-- 增加的代码在下⾯这⾥: -->
<video autoplay playsinline></video>
<script src="js/main.js"></script>
</body>
</html>
注意: 如果有中⽂字符, 则 .html ⽂件需要使⽤ UTF-8 编码保存/另存。
JavaScript代码
在 js ⽬录下的 main.js ⽂件中, 加⼊以下的代码:
'use strict';
// 本节只需要使⽤到 video (video: true).
const mediaStreamConstraints = {
video: true
};
// ⽤于播放视频流stream 的 video元素.
const localVideo = document.querySelector('video');
// Local stream that will be reproduced on the video.
let localStream;
/
/ success 处理函数;  by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
// error 处理函数;  将 error 信息打印到 console.
function handleLocalMediaStreamError(error) {
console.log('UserMedia error: ', error);
}
// 初始化 media stream.
.
then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
本教程中的 JavaScript 代码, 都在起始处加上 'use strict'; ，这样可以避免很多新⼿经常碰到的编程错误。
关于严格模式的更多信息, 请参考 。
运⾏⽰例
在浏览器中打开对应的 index.html 页⾯, 效果类似如下:
当然, 页⾯中展⽰的你本地摄像头实时拍摄到的内容。
原理解析
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
}
调⽤ getUserMedia() ⽅法之后, 浏览器会判断当前域名(domain)是否具有调⽤摄像头的权限, 如果是第⼀次请求授权, 则会弹出对话框, 要求⽤户⼿动选择允许。 如下图所⽰:
如果权限验证通过, 则返回 对象, 可以将该对象赋值给 media 元素的 srcObject 属性:
function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}
参数 constraints 可以指定要获取哪些 media 信息。如果不指定, 声⾳(audio) 默认配置是禁⽤的, 所以此处实际上只获取了 video 流:
const mediaStreamConstraints = {
video: true
};
还可以加上更多的约束条件, 例如设置视频分辨率:
const hdConstraints = {
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}
列出了所有可⽤的约束类型, 虽然有⼀些浏览器不兼容其中的某些选项。如果当前选择的摄像头不⽀持给定的约束选项, 调⽤ getUserMedia()时则会抛出 OverconstrainedError 错误。默认也不会提⽰⽤户进⾏再次授权。
当然, ⽤户随时可以管理授权信息, 或者切换摄像头, 如下图所⽰:
各个版本的浏览器界⾯可能略有不同, 但应该都能到管理授权的地⽅。搞不定的就上⽹搜索。
如果 getUserMedia() 调⽤成功, 则将摄像头传过来的视频流, 作为 video 的来源:
function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}
练习与实践
此处 localStream 是⼀个全局变量, 所以可以通过 console 来查看: 打开浏览器控制台, 输⼊ localStream 并按回车。 (打开控制台的⽅式: Windows系统按F12并选择; 或者组合快捷键: Ctrl-Shift-J; Mac系统则是 Command-Option-J)。
查看 constraints 对象: 如果设置为 {audio: true, video: true}, 有什么效果呢?
video 元素的⼤⼩是多少? 如何通过JavaScript获得视频的原⽣尺⼨? ⽽不是仅仅获取显⽰出来的尺⼨? 尝试使⽤ Chrome开发⼯具来查看相关API。
尝试对 video 元素添加 CSS 过滤器。例如:
video {
filter: blur(4px) invert(1) opacity(0.5);
}
尝试添加SVG过滤器。例如:
video {
filter: hue-rotate(180deg) saturate(200%);
}
知识点回顾
在本节课程中, 我们学到了:
从⽹络摄像头获取视频。
设置媒体约束条件(media constraint)。
混合视频元素。
本节的完整版代码位于 step-01 ⽂件夹中。
提⽰
记得设置 video 元素的 autoplay 属性。如果没有设置, 则只能看到第⼀帧画⾯!
getUserMedia()⽅法提供了很多可选参数, 请参考 . 当然, 其中也有⼀些有趣的 WebRTC ⽰例。
最佳实践
请确保 video 元素的内容不会溢出包裹容器。通过 width 和 max-width 样式可以设置 video 的默认尺⼨、最⼤尺⼨。 浏览器会⾃动计算对应的 height 属性:
video {
max-width: 100%;
width: 320px;
}
后续内容
既然获取到了 video, 那要如何使⽤呢? 我们将在下⼀⼩节讲解!
翻译⽇期: 2018年07⽉04⽇
系列⽂章⽬录如下:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。