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

[haizhilin2013]

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

[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