这篇文章主要介绍了vue调用本地摄像头实现拍照功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前言：
vue调用本地摄像头实现拍照功能，由于调用摄像头有使用权限，只能在本地运行，线上需用https域名才可以使用。实现
1、摄像头
2、拍照
实现代码：
<div class="camera_outer"> <video id="videoCamera" autoplay></video><div class="img_bg_camera"> </div><button>打开摄像头</button><button>关闭摄像头</button> <button>拍照</button></div> .camera_outer{ position: relative; overflow: hidden; background: url("../../assets/img/user_0608_04.jpg-600") no-repeat center; background-size: 100%; video,canvas,.tx_img{ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); } .btn_camera{ position:<em>本文来源gao.dai.ma.com搞@代*码(网$</em> absolute; bottom: 4px; left: 0; right: 0; height: 50px; background-color: rgba(0,0,0,0.3); line-height: 50px; text-align: center; color: #ffffff; } .bg_r_img{ position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .img_bg_camera{ position: absolute; bottom: 0; left: 0; right: 0; top: 0; img{ width: 100%; height: 100%; } .img_btn_camera{ position: absolute; bottom: 0; left: 0; right: 0; height: 50px; line-height: 50px; text-align: center; background-color: rgba(0,0,0,0.3); color: #ffffff; .loding_img{ width: 50px; height: 50px; } } } }
总结
以上就是vue调用本地摄像头实现拍照功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue调用本地摄像头实现拍照功能
转载请注明原文链接：vue调用本地摄像头实现拍照功能
