javascript - 通过覆盖默认相机增强 HTML5 拍照功能

Question

我在 HTML5 Web 应用程序中使用来自相机的输入，例如:

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

但我想知道是否有一种方法(即使用 JQuery Mobile)来改进拍照过程。例如，在相机 View 上放置一个图层，用于检测视角是否最佳、图片主体和智能手机之间是否没有障碍物等等。

我不是在谈论诸如算法之类的编码困难，但我想知道是否可以仅使用 Javascript 来覆盖“系统功能”(例如相机)并增强简单的相机 View (仅使用“take”图片”按钮和基本功能)。

我的第一个想法是不，它需要一个具有拍照所需权限的移动应用程序(而不是网络应用程序)。我还认为允许 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);

这只是将相机流式传输到 Canvas 中。希望有帮助:)