你将学到什么
在这一步，你将知道如何做下面的事儿：
- 从webcam获得视频流
- 控制流播放
- 例用 CSS 和 SVG控制视频
对于操作的完整版本在 step-01目录里。
一段简短的 HTML...
添加视频和脚本元素到work目录下的index.html中：
<!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"></video>
</body>
</html>
...和一段javascript片段
添加下面的代码到 js目录下的main.js中：
'use strict';
const mediaStreamContrains = {
video: true,
};
const localVideo = document.querySelector('video');
let localStream;
function gotLocalMediaStream(meidaStream){
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
function handleLocalMediaStreamError(error){
console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
这里的所有JavaScript例子都使用
use strict; 以避免一般的代码陷阱。可在 ECMAScript 5 Strict Mode, JSON, and More。中找到更多的信息。
试一下
在你的浏览器中打开 index.html，你将看到像下面这样子（当然是你的 webcam 中样子）：
它是如何工作的呢？
通过调用getUserMedia()，浏览器向用户请求访问camera的权限（当前是否是第一次对camera的请求）。如果成功，返回MediaStream。MediaStream 将被多媒体元素的 srcObject 属性所使用：
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
...
function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}
contrains 参数允许你指定你要得到的媒体。在这个例子中，只有video。 因此，audio默认提关闭的。
const mediaStreamConstraints = {
video: true,
};
你能使用contrains申请额外的功能，如视频分辨率：
const hdConstraints = {
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}
在 MediaTrackConstraints 规范中列出了所有可能的 contrains 类型。但并不是所有的浏览器都支持这些选项。
如果请求的分辨率当前camera无法支持，getUserMedia将被拒绝，并返回OvercontrainedError，并且也不会给用户访问camera权限的提示。
这里你能看到一个demo演示如何使用
contrains去请求不同的分辨率, 这里有一个demo使用contrains选择camera和microphone。
如果调用 getUserfMedia成功，从webcam获取的视频流将作为源设置给video元素。
function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
}
点滴
- 传递给 getUserMedia的 localStream是全局变量，所以你能从浏览器的console中看到：找开 console， 敲入 stream 并按回车键。（在Chrome中查看console，按 crtl+shift+j, 或在Mac 下按Command-Option-j）
- localStream.getVideoTracks()会返回什么？
- 偿试调用localStream.getVideoTrack()[0].stop()
- 查看 contrains对象，当你修改它为 {audio: true, video:true}会发生什么？
- 视频元素的大小是多少？通过 JavaScript你如何能得到视频的自然尺寸？使用 Crome Dev工具检查。
- 添加 CSS 过滤视频元素，例如：
video { filter: blur(4px) invert(1) opacity(0.5); } - 偿试添加 SVG过滤器， 例如：
video { filter: hue-rotate(180deg) saturate(200%); }
我们学到了什么
在本节中，你学到了：
- 从webcam得到视频
- 设置多媒体的
contrains - 与视频元素混淆
本节完整的版本在 step-01目录下。
提示
- 在 video无素中别忘了 autoplay属性。如果没有它，你只能看到一个简单的帧。
- 对于
getUserMedia() contrains有很多选项，可以看这个 demo webrtc.github.io/samples/src/content/peerconnection/constraints。正如你看到的，在那个网站上有很多有趣的WebRTC例子。
最佳实践
- 确保你的视频元素别超出它的
container。 我们添加了width和max-width设置最佳视频的尺寸和最大尺寸。 浏览器会自动计算高度：video { max-width: 100%; width: 320px; }
接下来
你已经得到了视频，但如何传输它呢？下一步我们来给出答案。
网友评论