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

着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在手机端进行拨号和发送短信的教程，今天再说一下利用html5在手机端调用摄像头以及录音的教程

HTML5 调用手机摄像头

在html5中可以利用type类型为file的input的标签调起手机的摄像头

例：html5调用手机摄像头进行拍照

<input type="file" accept="image/*" capture="camera">

例：html5调用手机摄像头进行录像

<input type="file" accept="video/*" capture="camera">

HTML5 进行手机录音

input 标签，不仅仅可以调用起手机的摄像头，还可以录音呢

例：

<input type="file" accept="audio/*" capture="microphone">

input代码解析

input accept 属性

accept属性可以限制可用文件的类型，当 input 标签的 type 属性为 file 时，可以规定服务器所接受的文件类型

例如：

accept="audio/*" 表示所有音频文件
accept="video/*" 表示视频文件
accept="image/"* 表示图片文件

当然你也可以使用文件后缀名的形式

例：

accept="image/png* 表示只接收后缀名为 png 的图片
accept="image/jpg* 表示只接收后缀名为 jpg 的图片
accept=".png, .jpg, .jpeg" 表示可以同时接收 png jpg jpeg 后缀的文件

input capture 属性

、前言

最近有遇到一个需求，在h5浏览器中实现扫码功能，其本质便是打开手机摄像头定时拍照，特此做一个记录。主要技术栈采用的是vue2，使用的开发工具是hbuilderX。
经过测试发现部分浏览器并不支持打开摄像头，测试了果子，华子和米，发现夸克浏览器无法打开摄像头实现功能。

h5调用摄像头实现扫一扫只能在https环境下，亦或者是本地调试环境！！

二、技术方案

经过一番了解之后，找到了两个方案
1.使用html5-qrcode(对二维码的精度要求较高，胜在使用比较方便，公司用的是vue2，因此最终采用此方案)
2.使用vue-qrcode-reader(对vue版本和node有一定要求，推荐vue3使用，这里就不展开说了)

三、使用方式

当点击中间的扫码时，设置isScanning属性为true,即可打开扫码功能，代码复制粘贴即可放心‘食用’。

使用之前做的准备

通过npm install html5-qrcode 下载包
引入 import { Html5Qrcode } from 'html5-qrcode';

html结构
<view class="reader-box" v-if="isScaning">
	<view class="reader" id="reader"></view>
</view>

所用数据
data(){
    return{
        html5Qrcode: null,
        isScaning: false,
    }
}

methods方法
openQrcode() {
    this.isScaning = true;
    Html5Qrcode.getCameras().then((devices) => {
    if (devices && devices.length) {
    this.html5Qrcode = new Html5Qrcode('reader');
    this.html5Qrcode.start(
        {
        facingMode: 'environment'
        },
        {
        focusMode: 'continuous', //设置连续聚焦模式
        fps: 5,       //设置扫码识别速度
        qrbox: 280   //设置二维码扫描框大小
        },
        (decodeText, decodeResult) => {
         if (decodeText) {	//这里decodeText就是通过扫描二维码得到的内容
            this.action(decodeText)  //对二维码逻辑处理
            this.stopScan(); //关闭扫码功能
        }
    },
        (err) => {
            // console.log(err);  //错误信息
         }
     );
    }
    });
},

stopScan() {
	console.log('停止扫码')
	this.isScaning = false;
	if(this.html5Qrcode){
    this.html5Qrcode.stop();
	}
}

css样式
.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.reader {
		width:100%;
		// width: 540rpx;
		// height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

四、最终效果

作者：极客转
链接：https://juejin.cn/post/7316795553798815783

在线咨询

上一篇：HTML中嵌入视频和音频代码
下一篇：浅谈 React 中的 XSS 攻击

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商