vue 摄像头,netvue 摄像头
这篇文章主要为大家详细介绍了某视频剪辑软件实现调用个人电脑端摄像头实时拍照，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件之调用个人电脑端摄像头实时拍照，供大家参考，具体内容如下
由于我使用的是点击按钮打开模态框拍照所以在这里吧按钮和模态框代码都粘贴如下。
！-打开模态框按钮-
El-表单-项目标签=*照片： prop=headImage
El-input type= text v-model= img src /
el-col :span=1.5
埃尔按钮
@click=onTake
icon=el-icon-camera
大小=小
拍照上传
/el-button
/el-col
/El-表单-项目
！-拍照后显示图片-
El-form-item label= prop= img src
img v-if= img src :src= img src style= width:200 px；高度：240像素；/
/El-表单-项目
！-拍照模态框-
埃尔对话
title=拍照上传
:visible.sync=visible
@close=onCancel
宽度=1065px
div class=box
video id= video camera class= canvas :width= video width :height= video height 自动播放/视频
canvas id=“canvas camera”class=“canvas”:width=“video width”:height=“video height”/canvas
/div
div slot=页脚
埃尔按钮
@click=drawImage
icon=el-icon-camera
大小=小
拍照
/el-button
埃尔按钮
v-if=os
@ click= getCompetence
icon=el-icon-video-camera
大小=小
打开摄像头
/el-button
埃尔按钮
五-否则
@click=stopNavigator
icon= El-icon-开关-按钮
大小=小
关闭摄像头
/el-button
埃尔按钮
@click=resetCanvas
icon=el-icon-refresh
大小=小
重置
/el-button
埃尔按钮
@click=onCancel
icon=el-icon-circle-close
大小=小
完成
/el-button
/div
/el-dialog
下来我们来看射流研究…代码，我把不需要的部分删除了，因为涉及单位项目问题实属抱歉哈
脚本
导出默认值{
姓名： XXX ，
data() {
返回{
visible: false，//弹窗
loading: false，//上传按钮加载
操作系统：假，//控制摄像头开关
这段视频：空，
此上下文：空
thisCancas: null，
视频宽度：500,
视频高度：400,
后置选项：[],
CertCtl: ，
//遮罩层
装：真的，
//选中数组
id:[]，
//非单个禁用
单身：真的，
//非多个禁用
多重：真的，
//总条数
总计：0,
//项目人员表格数据
akworkerList: []，
//工种类别数据字典
workerTypeOptions:[]，
//弹出层标题
标题： ,
//是否显示弹出层
开：假，
//查询参数
查询参数：{
pageNum: 1，
页面大小：10,
imgSrc:未定义，
},
//表单参数
表单：{},
//表单校验
规则：{
}
};
},
已创建(){
},
方法：{
/*调用摄像头拍照开始*/
onTake() {
this.visible=true
这个。获取能力()；
},
onCancel() {
this.visible=false
/*这个。resetcanvas()；*/
这个。停止导航()；
},
//调用摄像头权限
获取能力(){
//必须在模型中提出后才可获取到数字正射影像图节点，直接获取无法获取到模型中的数字正射影像图节点
这个. nextTick(()={
const _ this=这个
this.os=false//切换成关闭摄像头
这个。这可以cas=document。getelementbyid(画布照相机)；
这个。这个语境=这个。这个坎卡斯。获取上下文(“2d”)；
这个。这个视频=文档。getelementbyid(摄像机)；
//旧版本浏览器可能根本不支持媒体设备，我们首先设置一个空对象
如果(导航员。媒体设备===未定义){
领航员。menavigatordiadevices={ }
}
//一些浏览器实现了部分媒体设备，我们不能只分配一个对象
//使用getUserMedia，因为它会覆盖现有的属性。
//这里，如果缺少getUserMedia属性，就添加它。
如果(导航员。媒体设备。getuser media===undefined){
领航员。媒体设备。getuser media=function(constraints){
//首先获取现存的getUserMedia(如果存在)
让getuser media=navigator。WebKit getuser media navigator。mozgetuser media navigator。getuser媒体；
//有些浏览器不支持，会返回错误信息
//保持接口一致
如果(!getUserMedia) {
返回承诺。拒绝(新错误( getUserMedia未在此浏览器中实现))
}
//否则，使用承诺将调用包装到旧的navigator.getUserMedia
返回新承诺（功能（解决，拒绝){
getUserMedia.call(导航、约束、解决、拒绝)
})
}
}
常量约束={
音频：假的，
视频：{width: _this.videoWidth，height: _this.videoHeight，transform: scaleX(-1)}
};
领航员。媒体设备。getuser媒体(约束)。然后（函数（流){
//旧的浏览器可能没有srcObject
if( src object in _ this。此视频){
_这个。这个视频。src对象=流
}否则{
//避免在新的浏览器中使用它，因为它正在被弃用。
_这个。这个视频。src=windows .URL.createObjectURL(流)
}
_这个。这个视频。onloadedmetadata=函数(e){
_this.thisVideo.play()
}
}).接住(错误={
这个. notify({
标题： 警告，
消息： 没有开启摄像头权限或浏览器版本不兼容.,
类型："警告"
});
});
});
},
//绘制图片
drawImage() {
//点击，画布画图
这个。这个语境。画图像(这个。此视频，0，0，this.videoWidth，this。视频高度)；
//获取图片base64链接
这个。img src=this。这个坎卡斯。toda aurl( image/png )；
/* const imgSrc=this。imgSrc*/
},
//清空画布
clearCanvas(id) {
设c=文件。getelementbyid(id)；
设cxt=c . get context( 2d )；
cxt.clearRect(0，0，c.width，c . height)；
},
//重置画布
resetCanvas() {
这个。img src=
这个。清晰画布(“画布相机”)；
},
//关闭摄像头
停止导航器(){
如果(这个.这个视频这个.这个视频！==null) {
这个。这个视频。src对象。获取曲目()[0].stop()；
this.os=true//切换成打开摄像头
}
},
/*调用摄像头拍照结束*/
}
};
/脚本
在此，本篇文章也就分享完毕了，若有什么不对之处还望各位大佬多多指点，若有相似之处还望联系修改删除，谢谢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。