前端何如在代码中使用摄像头拍照功能
demo 部署服务器可以测试
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><inputtype="file"accept="video"capture="user"ref="videoFile"@change="changeVideo"class="file-input"
/></body></html>
<script>function changeVideo (e) {// 获取到input标签的上传的文件对象const files = e.files[0];console.log(files)// 通过FileReader构造函数创建一个新的FileReader对象let reader = new FileReader();// 通过新创建的FileReader对象获取input元素上传的files文件对象，并使用readAsDataURL()方法读取reader.readAsDataURL(file);// 这是一个异步操作，当读取完成后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容reader.onload = () => {// 输出文件base64console.log(reader.result)}
}</script>
解答疑惑
input type=“file“属性详解，利用capture调用手机摄像头
上传文件类型
当需要限制上传文件的类型时，就需要使用input标签的accept属性；accept属性：规定通过文件上传来提交的文件的类型。 （只针对type=“file”）
| accept属性值值 | 描述 |
|---|---|
| audio/* | 接受所有的声音文件 |
| video/* | 接受所有的视频文件 |
| image/* | 接受所有的图像文件 |
| MIME_type | 一个有效的 MIME 类型，不带参数 |
调用摄像头或麦克风
capture属性：用于调用设备的摄像头或麦克风
当accept="image/"或accept="video/"时：
| capture属性值 | 描述 |
|---|---|
| user | 手机前置摄像头 |
| environment | 手机后置摄像头 |
当accept="audio"时：只调用麦克风设备，capture属性值可以为任意值
当input没有capture属性时，根据accppt类型给出文件夹选项以及摄像头或者录音机选项
input含有multiple属性时访问文件夹可勾选多文件，调用系统摄像头或者录音机都只是单文件，无multiple时都只能单文件
使用前置摄像头录制视频，并获取视频base64
HTML部分
<!-- 当input的值发生改变时，触发change事件，调用changeVideo函数 -->
<inputtype="file"accept="video/*"capture="user"ref="videoFile"@change="changeVideo"class="file-input"hidden
/>js部分
changeVideo () {// 获取到input标签的上传的文件对象const files = this.$refs.videoFile.files;// 通过FileReader构造函数创建一个新的FileReader对象let reader = new FileReader();// 通过新创建的FileReader对象获取input元素上传的files文件对象，并使用readAsDataURL()方法读取reader.readAsDataURL(file);// 这是一个异步操作，当读取完成后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容reader.onload = () => {// 输出文件base64console.log(reader.result)}
}FileReader的部分实例方法
1.readAsArrayBuffer()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含一个ArrayBuffer对象以表示所读取文件的数据。
2.readAsBinaryString()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含所读取文件原始二进制格式。
3.readAsDataURL()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
以上三个方法参数均为即将被读取的Blob或File对象
也可以参考博友文章
