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

Enhance picture taking HTML5 by overriding default camera

本文关键字：增强 HTML5 相机 覆盖 默认      更新时间：2023-09-26

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

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

但我想知道是否有办法（即JQuery Mobile）来改善拍照过程。例如，在相机视图上放置一层，以检测视角是否最佳，图片主体和智能手机之间是否没有障碍物等等。

我不是在谈论算法等编码的难度，但我想知道是否可以仅使用 Javascript 覆盖"系统功能"（例如相机）并增强简单的相机视图（仅使用"拍照"按钮和基本功能）。

我的第一个虽然不，但它需要一个具有拍照所需权限的移动应用程序（而不是网络应用程序）。我还认为，允许Javascript交互和更改系统功能将是一个安全漏洞。

但我不是 100% 确定，有人可以确认吗？

谢谢！

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

这只是拿了一些我弄乱的代码：

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

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

相关文章：