添加视频和脚本元素到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>
添加下面的代码到 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;
}
在本节中,你学到了:
contrains
本节完整的版本在 step-01目录下。
getUserMedia() contrains
有很多选项,可以看这个 demo webrtc.github.io/samples/src/content/peerconnection/constraints。正如你看到的,在那个网站上有很多有趣的WebRTC例子。container
。 我们添加了width
和 max-width
设置最佳视频的尺寸和最大尺寸。 浏览器会自动计算高度: video { max-width: 100%; width: 320px; }