Question

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

但是，在用户点击按钮后，是否有可能立即捕获图像？方案是在用户登录服务时始终捕获用户的图像。

必须能够在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中测试过它。

HTML媒体捕获一次

1 个答案: