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 访问相机并将其显示在视频元素中。当视频开始播放时（您当然也可以使用不同的事件），它会在画布上绘制一个帧并将画布转换为 JPEG 图像（数据 URL）。然后可以将该图像例如传输到服务器。这种方法的缺点是它不适用于 iOS，只能在较新的 Android 设备上运行。我只在 Chrome 中测试过。