html打开电脑摄像头案例,获取电脑摄像头及打开视频(getUserMedia)

HTML代码：

CSS代码：.bg {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: block;

width: 100%;

height: 100%;

background: #000;

}

JS代码：// 兼容

window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);

// 老的浏览器可能根本没有实现 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;

// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口

if (!getUserMedia) {

return Promise.reject(new Error('此浏览器中未实现getUserMedia'));

}

// 否则，为老的navigator.getUserMedia方法包裹一个Promise

return new Promise(function(resolve, reject) {

getUserMedia.call(navigator, constraints, resolve, reject);

});

}

}

var options = {

audio: true,

video: true

}

navigator.mediaDevices.getUserMedia(options).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);

});

效果截图：