vue 摄像头,vue相机怎么拍照
这篇文章主要为大家详细介绍了某视频剪辑软件调用个人电脑摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件调用个人电脑摄像头实现拍照功能的具体代码，供大家参考，具体内容如下
项目需求：可以本地上传头像，也可以选择拍摄头像上传。
组件：
1、相机组件：实现打开、关闭摄像头、绘制、显示图片、用于上传
2、摄像机对话组件：使用元素界面对话框组件展示摄像头用户界面效果
3、外部调用照相机对话框组件，实现拍摄头像上传功能
4、本地上传可使用原生输入，也可使用ElementUI上传组件
操作逻辑：
1、新增时将头像图片转为base64调用接口提交，返回全球资源定位器(统一资源定位器)地址用于前端展示
2、替换时，先执行删除操作，在依新增操作执行。
3、本地上传原理跟拍摄上传一致
具体实现方法：
照相机组件
模板
div class=相机盒
视频id= video :width= video width :height= video height v-show=！img src /视频
画布id= canvas :width= video width :height= video height v-show= img src /canvas
p class=camera-p{{！imgSrc？提示：请将头像居中按拍照键确认： }}/p
El-button type= primary @ click= setImage v-if=！imgSrc class=camera-btn 拍照/el-button
El-button type= primary v-if= img src @ click= setfile upload class= camera-BTN 上传/el-button
/div
/模板
脚本
从" @/api/houseApi "导入{setFileUpload，deleteFileUpload，添加用户卡}。
导出默认值{
名称："摄像机",
道具：{
//【必选】CameraDialog弹窗显示状态
显示：{type: Boolean}，
//【可选】配合原生投入本地上传，用于替换时执行删除
删除数据：{类型：对象}
},
data() {
返回{
视频宽度："401",
视频高度："340",
thisCancas: null，
此上下文：空
这段视频：空，
imgSrc:` `，
}
},
已安装(){
如果(这个。展示)这个。获取能力()
},
方法：{
/*
* @作者布雷迪
* @时间2019/9/5
* @函数调用权限
*****************************************/
获取能力(){
var _this=this
这个。这个cancas=文档。getelementbyid( canvas )
这个。这个语境=这个。这个坎卡斯。获取上下文(“2d”)
这个。这个视频=文档。getelementbyid(视频)
//旧版本浏览器可能根本不支持媒体设备，我们首先设置一个空对象
如果(导航员。媒体设备===未定义){
navigator.mediaDevices={}
}
//一些浏览器实现了部分媒体设备，我们不能只分配一个对象
//使用getUserMedia，因为它会覆盖现有的属性。
//这里，如果缺少getUserMedia属性，就添加它。
如果(导航员。媒体设备。getuser media===undefined){
领航员。媒体设备。getuser media=function(constraints){
//首先获取现存的getUserMedia(如果存在)
var getuser media=navigator。WebKit getuser media navigator。mozgetuser media navigator。获取用户媒体
//有些浏览器不支持，会返回错误信息
//保持接口一致
如果(!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()
}
}).接住(错误={
console.log(错误)
})
},
/*
* @作者布雷迪
* @时间2019/9/5
* @函数绘制图片
*****************************************/
setImage() {
var _this=this
//点击，画布画图
_这个。这个语境。绘制图像(_ this。此视频，0，0，_this.videoWidth，_this.videoHeight)
//获取图片base64链接
var image=this。这个坎卡斯。toda aurl( image/png )
_this.imgSrc=image
//console.log(_this.imgSrc)
//这个. emit(refreshDataList ，this.imgSrc)
},
/*
* @作者布雷迪
* @时间2019/9/5
*@function base64转文件
*****************************************/
数据文件(数据URL，文件名){
var arr=dataurl.split(，)
var mime=arr[0].匹配(/:(。*?);/)[1]
var bstr=atob(arr[1])
var n=bstr.length
var u8arr=new Uint8Array(n)
while (n - ) {
u8arr[n]=bstr.charCodeAt(n)
}
返回新文件([u8arr]，文件名，{type: mime})
},
/*
* @作者布雷迪
* @时间2019/9/5
* @函数关闭摄像头
*****************************************/
停止导航器(){
这个。这个视频。src对象。获取曲目()[0].停止()
},
//上传图片
setFileUpload() {
//编辑档案-上传人脸照片
if(this.deleteData) {
if (this.deleteData.imagePath) {
删除文件上传({ id:this。删除数据。id，文件路径：this。删除数据。图像路径})。然后(res={
setfile上传({ image:this。img src })。然后(res={
这个发出( fileUpload ，res.retData.filePath，res.retData.imagePath)
添加用户卡({ userId:this。删除数据。userId，cardType:这个。删除数据。cardType，用户审计信息：RES . retdata。图像路径})。然后(res={
这个message({message:上传成功，键入：成功 })
})。接住(错误={
console.log(错误)
})
})。接住(错误={
console.log(错误)
})
})。接住(错误={
console.log(错误)
})
}否则{
setfile上传({ image:this。img src })。然后(res={
这个发出( fileUpload ，res.retData.filePath，res.retData.imagePath)
添加用户卡({ userId:this。删除数据。userId，cardType:这个。删除数据。cardType，用户审计信息：RES . retdata。图像路径})。然后(res={
这个message({message:上传成功，键入：成功 })
})。接住(错误={
console.log(错误)
})
})。接住(错误={
console.log(错误)
})
}
}否则{
//添加住户-上传人脸照片
setfile上传({ image:this。img src })。然后(res={
//console.log(res)
这个message({message:上传成功，键入：成功 })
这个发出( fileUpload ，res.retData.filePath，res.retData.imagePath)
})。接住(错误={
console.log(错误)
})
}
},
},
观察：{
显示（值){
if (val) {
this.imgSrc=
this.getCompetence()
}否则{
this.stopNavigator()
}
},
}
}
/脚本
style lang=less 。相机盒{
边距：0自动；
文本对齐：居中；摄像机-p {
高度：17px
行高：17px
字体大小：12px
字体系列："方平SC”；
字体粗细：400;
颜色：rgba(154，154，154，1)；
文本对齐：左对齐；
}。摄像机-btn {
边距-顶部：20px
}
}
/风格
照相机对话框组件
模板
div id=摄像机-对话框
埃尔对话
title=拍摄照片
:visible.sync=dialogVisible
top=5vh
宽度= 481像素
@ close= dialogCancle
:close-on-click-modal=false
:before-close= dialogcancel
Camera:show=对话框可见:deleteData= deleteData @ file upload= file upload /Camera
span slot=页脚 class=对话框-页脚
！-El-button @ click=对话框取消取消/El-按钮-
！极小的按钮类型="主要"确定/El-按钮-
/span
/el-dialog
/div
/模板
脚本
从" @/page/house/Camera.vue "导入相机
导出默认值{
名称： CameraDialog ，
道具：{
dialogVisible: {type: Boolean}，
删除数据：{类型：对象}
},
组件：{
照相机
},
data() {
返回{
文件路径： ``,
图像路径： ``,
}
},
方法：{
//关闭弹窗
dialogcancel(){
这个. emit(对话框取消，false，this.filePath，this。图像路径)；
},
//获取人脸照片地址
文件上传（文件路径，图像路径){
this.filePath=filePath
this.imagePath=imagePath
this.dialogCancle()
}
}
}
/脚本
样式范围
/风格
外部调用组件
模板
差异
div class=form-thumb
img :src=filePath alt=
I class= delete-BTN @ click= delete uploadfile v-if=删除数据。图像路径 x/I
/div
div class=上传-btn
输入类型= file name= user auditinfo id= user auditinfo @ change= getUploadFile ref= input file
El-button type= default size= small @ click= local uploadfile 本地上传/el-button
El-button type= default size= small @ click= dialog visible=true 拍摄照片/el-button
/div
！-拍摄照片弹窗-
camera dialog:dialog visible= dialog visible @ dialogCancle= dialogCancleCamera :deleteData= deleteData /
/div
/模板
脚本
从导入照相机对话框./CameraDialog.vue
从" @/api/houseApi.js "导入{ setFileUpload，deleteFileUpload，addUserCard }
导出默认值{
data() {
返回{
文件路径：require( @/assets/images/null。png )，//身份证头像
dialogVisible: false，
//操作删除人脸照片相关字段
删除数据：{
用户id:这个. route.query.userId，
id:` `，
卡片类型：4,
图像路径： ``,
}
}
},
方法：{
//模拟点击本地上传人脸照片
localUploadFile() {
这个. refs.inputFile.click()
},
//本地上传人脸照片
getUploadFile() {
让输入=文档。getelementbyid(用户审计信息)
let file=input.files[0]
this.getBase64(文件)。然后(res={
if (this.deleteData.imagePath) {
删除文件上传({ id:this。删除数据。id，文件路径：this。删除数据。图像路径})。然后(()={
this.setFileUpload(res)
})
}否则{
this.setFileUpload(res)
}
})。接住(错误={
console.log(错误)
})
},
//上传人脸照片
setFileUpload(res) {
setFileUpload({image: res})。然后(res={
这个。文件路径=RES . retdata。文件路径
这个。删除数据。图像路径=RES . retdata。图像路径
添加用户卡({ userId:this。删除数据。userId，cardType:这个。删除数据。cardType，用户审计信息：RES . retdata。图像路径})。然后(res={
这个message({message: res.retInfo，type: success})
//用于更新数据，此方法未展示
this.getInfo()
})。接住(错误={
console.log(错误)
})
})。接住(错误={
console.log(错误)
})
},
//转base64
getBase64(文件){
返回新承诺（功能（解决，拒绝){
let reader=new FileReader()；
设img结果=" "；
reader.readAsDataURL(文件);
reader.onload=function () {
imgResult=reader.result
};
reader.onerror=函数（错误){
拒绝（错误);
};
reader.onloadend=function () {
解决(img结果)；
};
});
},
//删除人脸照片
deleteUploadFile() {
这个。$确认(`确认确认删除？`, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}).然后(()={
删除文件上传({ id:this。删除数据。id，文件路径：this。删除数据。图像路径})。然后(res={
这个message({message: res.retInfo，type: success})
这个。文件路径=require( @/assets/images/null。png’)
this.deleteData.imagePath=
})。接住(错误={
console.log(错误)
})
}).catch(()={ })；
},
//对话框弹窗取消、获取上传人脸照片
dialogCancleCamera(str，filePath，imagePath) {
this.dialogVisible=str
//这个。房屋信息。文件路径=文件路径
//这个。房屋信息。用户审计信息=图像路径
this.filePath=filePath
这个。删除数据。图像路径=图像路径
this.getInfo()
},
}
}
/脚本
style scoped="scoped "。上传-btn {
位置：相对；
边距：20px 12px 0 0
文本对齐：右对齐；
}
输入#用户审计信息{
位置：绝对；
显示：内嵌-块；
宽度：80px
高度：32px
top:0；
光标：指针；
字体大小：0;
z索引：-1;
/*不透明度：0;*/
}。删除-btn {
位置：绝对；
top:-6px；
右：-6px；
显示：内嵌-块；
宽度：16px
高度：16px
行高：14px
背景：rgba(251，135，66，1)；
边框半径：8px
文本对齐：居中；
字体大小：12px
颜色：# fff
光标：指针；
}
/风格
以上只作为实现参考，具体操作依实际需求做相应调整。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。