vue 打开摄像头,vue视频相机可以拍照吗
这篇文章主要为大家详细介绍了某视频剪辑软件调取电脑摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件调取电脑摄像头实现拍照功能的具体代码，供大家参考，具体内容如下
实现效果图：
拍照前拍照后（我电脑摄像头挡住的，所以图片是灰色)
1.点击拍照上传功能调取电脑摄像头权限
2.选择允许使用摄像头之后，页面摄像头区域开始显示画面
3.点击拍照按钮，右侧显示拍摄的图片。点击保存即可
完整代码：
我这里写的是一个组件，所以触发调取摄像头事件是从父组件传过来的。也可以直接写一个页面上。
模板
div class= camera-box style= width:900 px；
el-row :gutter=20
el-col :span=12
div style= text-align:center；字体大小：14px字体粗细：粗体；下边距：10px 摄像头/div
！-这里就是摄像头显示的画面-
视频id=视频宽度=400 高度= 300 /视频
div class=iCenter
El-button type= primary size= small icon= El-icon-camera @ click= take phone style= margin-top:10px；拍照/el-button
/div
/el-col
el-col :span=12
div style= text-align:center；字体大小：14px字体粗细：粗体；下边距：10px 拍摄效果/div
！-这里是点击拍照显示的图片画面-
canvas id= canvas width= 400 height= 300 style= display:block；/画布
El-button:loading= loading but icon= El-icon-check type= primary size= small @ click= take phone upfile style= margin-top:10px；保存/el-button
/el-col
/el-row
/div
/模板
脚本
从" @/API/客户/动物信息"导入{附加上传文件}；
导出默认值{
道具：{
大头贴照片：{//父组件传过来的状态
类型：布尔型，
默认值：错误
}
},
data() {
返回{
loadingbut:false，
preViewVisible: false，
blobFile: null，
画布：空，
视频：空，
mediaStreamTrack:" "，
}
},
观察：{
大头贴照片：{
即时：真的，
处理程序(newVal) {//监听接收到拍摄状态后，开始调取摄像头权限。如果功能是在一个组件里面，下面步骤可以直接写在自己的触发方法里面
if (newVal) {
var视频=文档。查询选择器(“视频”)；
var text=文档。getelementbyid(“text”)；
//var mediaStreamTrack；
//兼容代码
窗户URL=(window .网址 窗口。webkiturl 窗口。mozurl window。msurl)；
如果(导航员。媒体设备===未定义){
领航员。媒体设备={ }；
}
如果(导航员。媒体设备。getuser media===undefined){
领航员。媒体设备。getuser media=function(constraints){
var getuser media=navigator。WebKit getuser media navigator。mozgetuser media navigator。msgetuser媒体；
如果(!getUserMedia) {
返回承诺。拒绝(新错误( getUserMedia 在此浏览器中未实现));
}
返回新承诺（功能（解决，拒绝){
getUserMedia.call(导航器，约束，解决，拒绝);
});
}
}
//摄像头调用配置
var mediaOpts={
音频：假的，
视频：真的，
视频：{ facingMode:环境 } //或者用户
//视频：{宽度：1280,高度：720 }
//视频：{面向模式：{ exact: environment } }//或者用户
}
让那个=这个；
领航员。媒体设备。获取用户媒体(媒体选项).然后（函数（流){
that.mediaStreamTrack=stream
视频=文档。查询选择器(“视频”)；
如果(视频中的" src对象"){
video.srcObject=stream
}否则{
video.src=window .统一资源定位器窗口网址。createobjecturl(流) 流
}
视频。play()；
}).接住(函数（错误){
console.log(错误)
});
}
},
深：真的
},
},
已安装(){
//摄像头
这个。视频=文档。getelementbyid( video )；
//画布
这个。画布=文档。getelementbyid( canvas )
},
方法：{
takePhone() {//点击拍照截图画面
让那个=这个；
that.canvas.getContext(2d ).drawImage(this.video，0，0，400，300)；
让数据URL=that。画布。toda taurl(图像/JPEG )
那个。blob文件=那个。dataurltofile(dataurl， camera。jpg’)；
that.preViewVisible=true
},
takePhoneUpfile() {//保存图片
this.loadingbut=true
假设表单数据=新表单数据()
formData.append(file ，this。blob文件)；//图片内容
//上传图片
putFileAttach(formData).然后(res={//后台接口
this.loadingbut=false
这个emit(picture ，RES . data。数据)；
this.tackPhoto=false
this.canvas.getContext(2d ).clearRect(0，0，400，300)；//清除画布
//关闭摄像头
这个。mediastreamtrack。getvideotracks().forEach(函数（跟踪){
跟踪。stop()；
});
},错误={
this.loadingbut=false
window .控制台. log(错误);
});
},
}
}
/脚本
风格。相机盒#画布{
边框：1px固体# DCDFE6
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。