前言
Vue3 版本,请访问 这篇文章。
在 vue2 | nuxt2 项目开发中,详解实现网站开启摄像头并拍照上传服务器或保存到本地功能,在浏览器网页上调用前置摄像头与后置摄像头,调节电脑摄像头权限并在网页弹出使用摄像头的授权弹框,vue2调取本地摄像头拍照生成对应抓拍的图片临时路径或base64数据,适用于移动端H5网页、PC网站,支持Chrome谷歌浏览器、火狐浏览器、IE浏览器、各种国产浏览器等,解决各种打不开摄像头、摄像头黑屏、权限拒绝、部署线上打不开、拍照报错、各家浏览器不兼容、拍照后保存或上传等问题。
如下图所示,手机和电脑项目都能用,拍照完毕后可将图片保存或上传服务端。
详细代码,保证100%搞定
示例代码
具体实现代码如下,请直接复制运行测试即可。