javascript - HTML 媒体捕获一键

Question

通过媒体捕获，我们可以通过 iOS/Android 上的浏览​​器捕获图像。 您将收到弹出窗口以选择文件或新图像。 如果用户捕获新图像，则捕获后，用户必须单击“使用图像”。

但是有没有可能在用户单击按钮后立即捕获图像？ 该场景是在用户登录服务时始终捕获用户的图像。

它必须能够在 Android 或 iOS 移动设备上运行。

Answer 1

如果您想使用媒体捕获，您所能做的就是将输入字段包装到标签中(或使用 for=id 引用它)并将标签设置为按钮:

<label style="border: 1px solid black;">
    This is my custom capture button.
    <input style="display: none;" type="file" accept="image/*;capture=camera">
</label>

另一个选择是利用 WebRTC:

<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: true}, function (stream) {
    var video = document.querySelector('video'); 
    video.src = window.URL.createObjectURL(stream);
    video.onplay = function () {
        var canvas = document.querySelector('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        var ctx = canvas.getContext('2d'); 
        ctx.drawImage(video, 0, 0);
        stream.stop();
        var image = canvas.toDataURL('image/jpeg');
    };

    }, function (err) {
        alert('Error: ' + err);
    }
);
</script>

<video autoplay style="display:none;"></video> 
<canvas></canvas>

此代码使用 getUserMedia 访问摄像头并将其显示在视频元素中。当视频开始播放时(您当然也可以使用不同的事件)，它会在 Canvas 上绘制一个框架并将 Canvas 转换为 JPEG 图像(数据 URL)。然后可以将该图像传输到服务器。这种方法的缺点是它不适用于 iOS，仅适用于较新的 Android 设备。我只在 Chrome 中测试过。