Question

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

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

但我想知道是否有办法（即使用JQuery Mobile）来改善拍照过程。例如，在摄像机视图上放置一个图层，用于检测视点是否最佳，图像主体与智能手机之间是否没有障碍物等等。

我不是在谈论算法等代码的难度，但我想知道是否可以使用Javascript覆盖“系统功能”，例如相机，并增强简单的相机视图（只需“取”图片“按钮和基本功能”。

我的第一个不是，它需要一个拥有所需权利拍照的移动应用程序（不是网络应用程序）。我还认为允许Javascript交互并改变系统功能是一个安全漏洞。

但我不是百分百肯定，有人可以确认吗？

谢谢！

Answer 1

我不认为你可以覆盖系统功能，但是你可以让你的相机在画布元素中显示，这可以让你做各种各样的＆＃34; canvassey＆＃34;诸如将图像流式传输到服务器或使其成为灰度等等。

这只是采取了一些我正在搞乱的代码：

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);

这只是将相机流入画布。希望有所帮助：）

通过覆盖默认摄像头来增强拍摄HTML5的图像

1 个答案: