u010376217 2016-03-28 06:12 采纳率: 0%
浏览 3090

HTML5 调用手机摄像头部分浏览器调不出来

        前端实现方式：<input type="file" accept="image/*,camera" capture="camera" id="btn1" style="width:0px;height:0px;position:absolute;top:0;left:0;"/>

        怎样兼容哪些浏览器（极速浏览器），还有部分android机型只能够选择相册。

        除了这种，还有其他方法调用摄像头吗？
  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-05 03:49
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要使用 HTML5 的 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Capture Video</title>
</head>
<body>

    <h2>Camera Capture</h2>
    <input type="file" accept="image/*,video/*" id="captureInput" style="display:none;">
    <button onclick="startCapture()">Start Capture</button>
    <div id="preview"></div>
    <script>
        function startCapture() {
            var file = document.getElementById("captureInput").files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                var video = document.createElement('video');
                video.src = e.target.result;
                video.style.display = 'block';
                document.body.appendChild(video);
            };
            reader.readAsDataURL(file);
        }
    </script>

</body>
</html>

    在这个例子中，我们创建了一个按钮，当用户点击时，会触发 startCapture 函数。这个函数从文件输入框中读取文件，并将其作为 URL 提供给 <video> 元素。这样，你就可以在页面上显示来自相机的视频流了。

    请注意，这只是一个基本的例子。如果你想要支持更多的浏览器和设备，可能需要添加一些额外的逻辑来处理不同的情况，例如处理不同类型的文件或错误。此外，对于 Android 设备，你应该确保你的脚本可以正确地处理这些设备特有的特性，比如旋转、缩放等。

    评论

报告相同问题？