相机到画布在移动应用程序

Camera to canvas in Mobile App

本文关键字：移动 应用程序 相机      更新时间：2023-09-26

我正在制作移动应用程序，这将显示live image of back camera on canvas。我已经尝试了太多的cordova plugin，但在所有的系统应用程序打开拍照或视频。

是否有任何插件或编码方式，所以我可以看到现场从back or front camera画布上。

谢谢。

HTML代码

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

JS代码
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function () {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function (error) {
        console.log("Video capture error: ", error.code);
    };
    // Put video listeners into place
    if (navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function (stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function (stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if (navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
}, false);
document.getElementById("snap")
.addEventListener("click", function() {
setInterval(function(){
    context.drawImage(video, 0, 0, 640, 480);
},1);
});

请注意，浏览器支持api getUserMedia并不意味着它可以调用手机上的所有摄像头，它只能调用前置摄像头。

相关文章：