HTML媒体捕获一次

时间:2014-11-27 19:24:30

标签: javascript android jquery ios html5

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

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

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

1 个答案:

答案 0 :(得分:3)

如果您想使用媒体捕获,您可以做的就是将输入字段包装到标签中(或使用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中测试过它。