瞎采新闻 添加视频和脚本元素到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; } ---来自腾讯云社区的---音视频_李超
微信扫一扫打赏 
支付宝扫一扫打赏