微客导航 » 文章资讯 » vue调用本地摄像头实现拍照功能

vue调用本地摄像头实现拍照功能

2023-07-18 19:33:03 170

前言：

vue调用本地摄像头实现拍照功能，由于调用摄像头有使用权限，只能在本地运行，线上需用https域名才可以使用。实现效果：

1、摄像头效果：

2、拍照效果：

实现代码：




.camera_outer{
position:relative;
overflow:hidden;
background:url("../../assets/img/user_0608_04.jpg")no-repeatcenter;
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: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调用本地摄像头实现拍照功能的文章就介绍到这了,更多相关vue调用本地摄像头实现拍照内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue调用本地摄像头实现拍照功能

热门推荐

随机推荐