通过WebRTC进行实时通信-从webcam获取视频流
- 2020 年 4 月 2 日
- 筆記
一段简短的 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"></script> </body> </html>
…和一段javascript片段
添加下面的代码到 js目录下的main.js中：
'use strict'; const mediaStreamContrains = { video: true, }; const localVideo = document.querySelector('video'); let localStream; function gotLocalMediaStream(mediaStream){ 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; }
