通過覆蓋默認相機來增強拍攝HTML5的圖片

Question

我在HTML5 Web應用程序中將輸入與來自攝像機的源一起使用，例如：

<input type="file" accept="image/*" capture="camera">

但是我想知道是否有辦法（例如使用JQuery Mobile）改善拍照過程。 例如，在相機視圖上放置一個圖層，以檢測視點是否最佳，圖片的主題與智能手機之間是否沒有障礙物等。

我不是在談論算法等代碼的編寫難度，但我想知道是否有可能僅使用Javascript覆蓋諸如相機之類的“系統功能”並增強簡單的相機視圖（僅使用“拍照”按鈕）以及基本功能）。

我的第一個想法不是，它需要一個具有拍攝照片所需權限的移動應用程序（而非Web應用程序）。 我還認為，允許Javascript進行交互並更改系統功能可能會導致安全漏洞。

但是我不確定100％，有人可以確認嗎？

謝謝 ！

Answer 1

我認為您無法覆蓋系統功能，但是您可以使相機顯示在canvas元素中，該元素可以讓您執行各種“ canvassey”操作，例如將圖像流式傳輸到服務器或使其呈灰度等。

這只是拿一些我在弄亂的代碼：

HTML

<video id="myvideo" controls></video>
<canvas id="mycanvas"></canvas>

JS

var isStreaming = false,
   video = $('#myvideo')[0],
   canvas = $('#mycanvas')[0],
   ctx = canvas.getContext('2d'),
   w = 800,
   h = 400;
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

$(window).load(function() {
    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true, audio: true}, function(stream) {
            var url = window.URL || window.webkitURL;
            var src = url ? url.createObjectURL(stream) : stream;
            video.src = src
            video.play();               

        }, function(error) {
            alert('Error: ' + error);
            return;
        });
    } else {
      alert('not supported in your browser');
    }
});

video.addEventListener('canplay', function(e) {
   if (!isStreaming) {
        // videoWidth isn't always set correctly in all browsers
        if (video.videoWidth > 0) h = video.videoHeight / (video.videoWidth / w);
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);

        // Reverse the canvas image
        //ctx.translate(w, 0);
        //ctx.scale(-1, 1);         

        isStreaming = true;
   }
}, false);

video.addEventListener('play', function() {
    // Every 33 milliseconds copy the video image to the canvas
    setInterval(function() {
        if (video.paused || video.ended) return;
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(video, 0, 0, w, h);       
   }, 33);
}, false);

這只是將相機流到畫布中。 希望有幫助:)