Vue3 - 详细实现移动端H5网页调用摄像头拍照功能，微信公众号网页h5页面打开本地摄像头并点击按钮照相，vue3获取摄像头画面执行拍照保存，调整摄像头前置后置抓拍图片给用户展示或保存手机上传服务器

前言

PC网站端，请访问 这篇文章。

在 vue3 手机移动端开发中，详解H5页面/微信公众号网页调用浏览器摄像头并拍照完整示例，在手机浏览器上开启摄像头并拍照上传服务器或保存到本地功能（实时预览使用图片临时路径或base64数据），切换转换前置摄像头与后置摄像头，vue3手机H5打开摄像头及拍照效果，兼容任意浏览器/内核，解决各种打不开摄像头、摄像头黑屏、权限拒绝、部署线上打不开、拍照报错、各家浏览器不兼容、拍照后保存或上传等问题。

如下图所示，手机H5网页和微信公众号网页都能用，拍照完毕后可将图片保存或上传服务端。

详细代码，保证100%搞定

准备阶段

首先我们来分析下该需求，以及一些前置技术点便于新手理解。