通过覆盖默认相机增强拍照 HTML5

Question

我在 HTML5 网络应用程序中使用来自摄像头的输入，例如：

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

但我想知道是否有办法（即使用 JQuery 移动设备）改进拍照过程。例如，在相机视图上放置一层，检测视角是否最佳，照片主体与智能手机之间是否没有障碍物等。

我不是在谈论算法之类的编码难度，但我想知道是否可以仅使用 Javascript 覆盖 "system functionnalities" 之类的相机并增强简单的相机查看（只需 "take picture" 按钮和基本功能）。

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

通过覆盖默认相机增强拍照 HTML5

Enhance picture taking HTML5 by overriding default camera

html

javascript

jquery

camera

overriding