html调用摄像头 代码,html5调用摄像头功能的实现代码

前言

前些天，线上笔试的时候，发现需要浏览器同意开启摄像头，感觉像是 js 调用的，由于当时笔试，也就没想到这么多问题。今天闲来无事，看了下自己的 todo，发现有这个调用摄像头的todo，才想到😂。网上查了一下，果然 js 有调用摄像头的 api，为此自己写一个 demo ，避免忘记。

正文

调用摄像头

一共有两种实现方式，一种是使用navigator.getUserMedia(该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性)，前面一种已经从 Web 标准中删除，仅为了向后兼容而存在，第二种是使用navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。

第一种方法navigator.getUserMedia用法详见mdn，代码如下：

摄像头调用1

!(function () {

function userMedia() {

return navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia || null;

}

if (userMedia()) {

var constraints = {

video: true,

audio: false

};

var media = navigator.getUserMedia(constraints, function (stream) {

var v = document.getElementById('v');

var url = window.URL || window.webkitURL;

v.src = url ? url.createObjectURL(stream) : stream;

v.play();

}, function (error) {

console.log("ERROR");

console.log(error);

});

} else {

console.log("不支持");

}

})();

第二种方法navigator.mediaDevices.getUserMedia用法详见mdn。navigator.mediaDevices.getUserMedia