HTML5 的调用摄像头拍照和获取视频流的方法

zhezhongyun 2025-01-13 19:09 56 浏览

随着web功能越来越强大，我们很多时候需要在web页面来获取摄像头进行操作，原生html5提供了对摄像头的支持，需要用户的同意授权，下面是一个基于 HTML5 的调用摄像头拍照并上传后台的示例代码：

html复制代码<!DOCTYPE html>
<html>
<head>
    <title>拍照上传</title>
</head>
<body>
    <video id="video" style="width:300px;height:200px;"></video>
    <br>
    <button id="btn-start">启动摄像头</button>
    <button id="btn-stop">停止摄像头</button>
    <button id="btn-capture">拍照上传</button>
    <br>
    <canvas id="canvas"></canvas>
    <form id="form-upload" method="post" enctype="multipart/form-data">
        <input type="file" id="input-file" name="file"/>
    </form>

    <script type="text/javascript">
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        
        // 启动摄像头
        document.getElementById('btn-start').addEventListener('click', function() {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            }).then(function(stream) {
                video.srcObject = stream;
            }).catch(function(err) {
                console.log("启动摄像头失败：" + err);
            });
        });

        // 停止摄像头
        document.getElementById('btn-stop').addEventListener('click', function() {
            video.pause();
            video.srcObject.getTracks()[0].stop();
            video.srcObject = null;
        });

        // 拍照，并上传到后台
        document.getElementById('btn-capture').addEventListener('click', function() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0);
            canvas.toBlob(function(blob) {
                var formData = new FormData();
                formData.append('file', blob, 'photo.jpg');
                postRequest('/upload', formData, function(res) {
                    alert(res.message);
                });
            }, 'image/jpeg');
        });

        // 发送 POST 请求
        function postRequest(url, data, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.responseText);
                    callback(res);
                }
            };
            xhr.send(data);
        }
    </script>
</body>
</html>

上述代码主要分为以下几个部分：

html5 的 <video> 元素用于显示摄像头数据流，我们可以通过 JavaScript API 控制调用摄像头、暂停和关闭。同时使用了 <canvas> 元素来缓存视频帧的图像数据。
页面中 btn-start 按钮通过 getUserMedia() 方法请求浏览器授权，并将摄像头数据流传给 <video> 元素进行播放。
点击 btn-capture 按钮时，通过 toBlob() 将缓存的图像数据转化为 Blob 对象，并封装到 FormData 中，以便发送给后台服务。
postRequest() 函数用于发送包含文件数据的 POST 请求，其中 FormData 对象中的 key 是上传后台服务器处理时需要读取的参数名称，通常对应具体的后台业务逻辑。

最后，需要注意的是，在本地调试和开发时，特别是在 Windows 操作系统下使用 Chrome 浏览器访问时，可能会遇到摄像头不能正常运行的情况。这时可以打开地址栏，在目标请求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 参数（其中端口号需替换成实际的本地服务端口），即可获得权限，进行摄像头使用。

HTML5 应用程序缓存

上一篇：听云APM与跨境电商丰趣海淘的前端优化最佳实践
下一篇：360极速浏览器8.0，极致体验正式发飙

HTML5 的调用摄像头拍照和获取视频流的方法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?