前端资源网 - w3h5
今天学习了调用电脑摄像头，利用canvas画布将视频当前帧转换成图片的实例，其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入，产生包含所请求类型的媒体轨道。包括视频轨道（由诸如照相机，视频记录设备，屏幕共享服务等的硬件或虚拟视频源产生），音频轨道（类似地，由物理或虚拟音频源，如麦克风，A / D转换器等），以及其他可能的轨道类型。
它返回一个 Promise 解析为一个 MediaStream 对象。用户如果拒绝许可，或者匹配媒体不可用，则请求会被拒绝，抛出 PermissionDeniedError 或 NotFoundError 错误。详情请戳 链接 。
注意：该方法只适用于本地和 https 请求，http 会提示没有权限，报 PermissionDeniedError 错误。
HTML代码：
<div id="camera"> <div id="contentHolder"> <video id="video" width="300" height="300" autoplay></video> <canvas style="display:none;" id="canvas" width="300" height="300"></canvas> </div> <div id="btn_snap">拍照</div> </div>
JS部分：先调用摄像头，把流媒体文件复制到 video 标签，实现实时“直播”的效果，点击拍照按钮，将当前帧转换成图片。
<script>
var canvas = document.getElementById("canvas"),
pzBtn = document.getElementById("btn_snap"),
context = canvas.getContext("2d"),
video = document.getElementById("video");
alert('该页面会调用您的摄像头')
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
// 使用getUserMedia，因为它会覆盖现有的属性。
// 这里，如果缺少getUserMedia属性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 有些浏览器不支持，会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
//否则，使用Promise将调用包装到旧的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
var constraints = { audio: false, video: {width: 720,height:720} }
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
var video = document.querySelector('video');
// 旧的浏览器可能没有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
//避免在新的浏览器中使用它，因为它正在被弃用。
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
pzBtn.addEventListener("click", function () {
// 点击，canvas画图
context.drawImage(video, 0, 0, 300, 300);
// 获取图片base64链接
var image = canvas.toDataURL('image/png');
// 定义一个img
var img = new Image();
//设置属性和src
img.id = "imgBoxxx";
img.src = image;
//将图片添加到页面中
document.body.appendChild(img);
// base64转文件
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
}
console.log(dataURLtoFile(image, 'aa.png'));
});
</script>CSS部分：
<style>
#camera{
float: left;
margin: 20px;
}
#contentHolder{
width: 300px;
height: 300px;
margin-bottom: 10px;
}
#btn_snap{
margin: 0 auto;
border: 1px solid #f0f0f0;
background: #5CACEE;
color: #FFF;
width: 100px;
height: 36px;
line-height: 36px;
border-radius: 8px;
text-align: center;
cursor: pointer;
cursor: pointer;
/*禁止选择*/
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
#imgBoxxx{
width: 200px;
margin: 60px 20px 20px;
}
</style>语法
var promise = navigator.mediaDevices.getUserMedia(constraints);
参数
constraints ：一个 MediaStreamConstraints 对象，指定要请求的媒体类型，以及每种类型的参数/属性。
具有两个参数：video （视频） audio （音频）。必须指定其中的一个或两个。如果浏览器找不到符合给定约束的指定类型的媒体轨道，则会返回 NotFoundError 错误。
以下是请求音频和视频，没有任何特定要求：
{ audio: true, video: true }如果媒体类型指定 为 true ，则生成的流必须具有该类型的轨道。如果没有，则会导致调用 getUserMedia() 错误。
出于隐私原因无法访问有关用户摄像头和麦克风的信息，不过应用程序可以使用其他约束来请求所需的摄像头和麦克风功能。
以下是设置偏好 1280x720 分辨率的相机：
{
audio: true,
video: { width: 1280, height: 720 }
}浏览器将尝试遵守此规则，但如果完全匹配不可用，则可能会返回其他分辨率。
还可以使用关键字 min ， max 或 exact （又名min == max）。
以下要求最低分辨率为1280x720：
{
audio: true,
video: {
width: { min: 1280 },
height: { min: 720 }
}
}如果没有具有此分辨率或更高分辨率的摄像机，则返回的请求将被拒绝，抛出 OverconstrainedError 错误，并且不会提示用户。
行为差异的原因是关键字min，max并且exact本质上是强制性的，而普通值和被调用的关键字ideal则不是。这是一个更全面的例子：
{
audio: true,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 }
}
}一个ideal值，使用时的重心，这意味着浏览器将尝试找到设置（与相机，如果你有一个以上的），用最小的适应度距离从给定的理想值。
简单值本质上是理想的，这意味着我们上面的第一个分辨率示例可能是这样编写的：
{
audio: true,
video: {
width: { ideal: 1280 },
height: { ideal: 720 }
}
}并非所有约束都是数字。例如，在移动设备上，以下设备优先于后置摄像头（如果有的话）：
{ audio: true, video: { facingMode: "user" } }为了要求的后置摄像头，使用方法：
{ audio: true, video: { facingMode: { exact: "environment" } } }返回值
Promise ，其履行处理接收到 MediaStream 的时候已经被成功地获得请求的媒体对象。
例外
通过将 DOMException 错误对象传递给 promise 的失败处理程序来拒绝返回的 promise 。可能的错误是：
AbortError
虽然用户和操作系统都授予了对硬件设备的访问权限，并且没有发生可能导致问题的硬件问题 NotReadableError ，但是发生了一些阻止设备被使用的问题。
NotAllowedError
用户已指定不允许当前浏览实例访问设备; 或者用户拒绝访问当前会话; 或者用户拒绝全局访问用户媒体设备。
SecurityError 用于此目的的旧版本规范; SecurityError 已经有了新的含义。
NotFoundError
没有找到满足给定约束条件的指定类型的媒体轨道。
NotReadableError
虽然用户已授予使用匹配设备的权限，但操作系统，浏览器或网页级别发生硬件错误，导致无法访问设备。
OverconstrainedError
指定的约束导致没有符合所请求标准的候选设备。错误是类型的对象OverconstrainedError，并且具有一个constraint属性，其字符串值是不可能满足的约束的名称，以及message包含解释问题的人类可读字符串的属性。
因为即使用户尚未授予使用底层设备的权限，也可能发生此错误，因此可能会将其用作指纹表面。
SecurityError
Document在getUserMedia()被调用的对象上禁用用户媒体支持。启用和禁用用户媒体支持的机制由单个用户代理决定。
TypeError
指定的约束列表为空，或者所有约束都设置为false。
