Vue3 - 详细实现调用浏览器摄像头拍照并生成图片预览，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，开启摄像头并进行拍照，vue实现调用摄像头，电脑或手机调用摄像头拍照

前言

Vue2 版本，请访问 这篇文章。

在 vue3 | nuxt3 项目开发中，详解实现网站开启摄像头并拍照上传服务器或保存到本地功能，在浏览器网页上调用前置摄像头与后置摄像头，调节电脑摄像头权限并在网页弹出使用摄像头的授权弹框，vue3调取本地摄像头拍照生成对应抓拍的图片临时路径或base64数据，适用于移动端H5网页、PC网站，支持Chrome谷歌浏览器、火狐浏览器、IE浏览器、各种国产浏览器等，解决各种打不开摄像头、摄像头黑屏、权限拒绝、部署线上打不开、拍照报错、各家浏览器不兼容、拍照后保存或上传等问题。

提供详细示例代码，新手小白复制运行即可。

---

如下图所示，手机和电脑项目都能用，拍照完毕后可将图片保存或上传服务端。

详细代码，保证100%搞定

示例代码

具体实现代码