js打开摄像头拍照或者本地上传（pc 和手机通用）

本文链接：https://blog.csdn.net/weixin_43617604/article/details/128904364

前端何如在代码中使用摄像头拍照功能

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>
 // capture="camera"  会只调用摄像头   
 // capture="user"  会出现选择框 
    <input
  type="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 = () => {
		// 输出文件base64
   		console.log(reader.result)
    }
}


</script>

解答疑惑

input type=“file“属性详解，利用capture调用手机摄像头
      // capture="camera"  会只调用摄像头  
      // capture="user"  会出现选择框 --相机--本地上传

上传文件类型
当需要限制上传文件的类型时，就需要使用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函数 -->
<input
  type="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 = () => {
		// 输出文件base64
   		console.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对象

也可以参考博友文章