Fe-interview: [html] 第161天 HTML5如何调用摄像头？

[haizhilin2013]

第161天 HTML5如何调用摄像头？

[LinStan]

嘿，这个我知道。
window.navigator.getUserMedia()
然后接收三个参数，第一个是视频或者音频以及分辨率{video:true}
第二个是成功回调，第三个是失败回调。

还有一种调用
window.navigator.mediaDevices.getUserMedia()
也是三个参数，参数格式和上文一样，区别在于这个api是基于promise实现的。

[forever-z-133]

后者是前者的新版本，设备支持率都很差

[vkboo]

有两种API

• navigator.getUserMedia(已废弃，不建议使用)

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);
});

• navigator.mediaDevices.getUserMedia

const constraints = {
    video: true,
    audio: false
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
    let v = document.getElementById('v');
    // 旧的浏览器可能没有srcObject
    if ("srcObject" in v) {
        v.srcObject = stream;
    } else {
        // 防止再新的浏览器里使用它，应为它已经不再支持了
        v.src = window.URL.createObjectURL(stream);
    }
    v.onloadedmetadata = function (e) {
        v.play();
    };
}).catch(err => {
    console.error(err.name + ": " + err.message);
})

[Pooo-hxp]

请问PC端和移动端只有这两个吗？没搜到其它的

[klren0312]

• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
  

• https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia