在项目中 我们很多时候都会遇到使用浏览器调用电脑设备的需求，记录一下实现思路及方法，共享一下技术点，同时也方便日后查看和整理
web浏览器在设计的时候为我们提供了很多的API接口实现功能，我们这次使用web调用PC摄像头和录音设备，主要思路是：获取到设备的媒体流，再将媒体流进行转存。
首先看一下目录结构
在components目录下定义一个提供视频录制功能的子组件，在Page目录下创建一个调用子组件的页面父组件。
接下来介绍一下子组件的功能方法：
调用摄像头
先定义一个模板
<template>
<div class="camera_outer">
<video
id="videoCamera"
:width="videoWidth"
:height="videoHeight"
autoplay
></video>
<!-- 放置图片 -->
<canvas
style="display: none"
id="canvasCamera"
:width="videoWidth"
:height="videoHeight"
></canvas>
<!-- 放置视频 -->
<canvas
style="display: none"
id="canvasCameraTwo"
:width="videoWidth"
:height="videoHeight"
></canvas>
<!-- <img src="/assets/logo.png" alt="" class="bg_r_img"> -->
<div v-if="imgSrc" class="img_bg_camera" v-show="isShow">
<img :src="imgSrc" alt="" class="tx_img" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
videoWidth: 540,
videoHeight: 410,
imgSrc: "",
thisCancas: null,
thisContext: null,
thisVideo: null,
thisCancasTwo: null,
thisContextTwo: null,
timer: null,
isShow: true,
mediaRecorder: null,
recordedBlobs: [],
};
},
computed: {},
methods: {
/*
*@author
*@function 绘制图片
*/
setImage() {
var _this = this;
if (!_this.thisVideo) {
alert("请先开启摄像头");
return;
}
_this.isShow = true;
//点击，canvas画图
_this.thisContext.drawImage(
_this.thisVideo,
0,
0,
_this.videoWidth,
_this.videoHeight
);
// 获取图片base64链接
var image = this.thisCancas.toDataURL("image/png");
//打印一下图片的base64码
console.log("图片base64码：" + image);
_this.imgSrc = image;
this.$emit("refreshDataList", this.imgSrc);
//将base64值传到后台
},
//加载本地摄像头
changePhoto(){
var that =this;
/*得到所有的摄像头 */
navigator.mediaDevices.enumerateDevices()
.then(function(devices){
console.log(devices);
that.videoArr= [];
devices.forEach((device) => {
if (device.kind=='videoinput') {
that.videoArr.push({
'label':device.label,
'id':device.deviceId
})
console.log('label:'+device.label+', id:'+device.deviceId);
}
});
that.$emit('videoArr',that.videoArr);
})
.catch(function(err){
console.log('ERROR：'+err.name+':'+err.message)
})
},
//切换下拉
changeSel(val){
const videoConstraints={};
if (val === '') {
videoConstraints.facingMode = 'environment';
}else{
videoConstraints.deviceId = { exact: val };
}
var constraints ={
video: videoConstraints,
};
//调用选中的摄像头
this.getOneUserMedia(constraints);
},
//调用单个摄像头
getOneUserMedia(constrains){
var that =this;
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constrains).then(success=>{
//开启摄像头
that.thisVideo.srcObject=success;
that.thisVideo.play();
})
}
},
//开启一个摄像头
getOneCompetence() {
var _this = this;
this.thisCancas = document.getElementById("canvasCamera");
this.thisContext = this.thisCancas.getContext("2d");
this.thisVideo = document.getElementById("videoCamera");
//设置视频放置数据
this.thisCancasTwo = document.getElementById("canvasCameraTwo");
this.thisContextTwo = this.thisCancasTwo.getContext("2d");
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
// 使用getUserMedia，因为它会覆盖现有的属性
// 这里，如果缺少getUserMedia属性，就添加它
if (navigator.mediaDevices.getUserMedia == undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia =
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.getUserMedia;
// 有些浏览器不支持，会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(
new Error("getUserMedia is not implemented in this browser")
);
}
//否则，使用promise将调用包装到旧的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
};
}
//设置摄像头和麦克风是否启用
var constraints = {
audio: true,
video: {
width: this.videoWidth,
height: this.videoHeight,
transform: "scaleX(-1)",
frameRate: 60,
},
};
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) {
window.stream = stream;
//旧的浏览器可能没有srcObject
if ("srcObject" in _this.thisVideo) {
_this.thisVideo.srcObject = stream;
} else {
// 避免在新的浏览器中使用它，因为它正在被弃用。
_this.thisVideo.src = window.URL.createObjectURL(stream);
}
//在视频的原数据加载后执行的方法
_this.thisVideo.onloadedmetadata = function (e) {
_this.thisVideo.play();
};
})
.catch((err) => {
console.log(err);
});
},
/*
*@author
*@function 绘制视频
*/
drawVideoAtCanvas() {
var that=this;
that.recordedBlobs = [];
var options = { audioBitsPerSecond : 128000,videoBitsPerSecond : 100000,mimeType: 'video/webm;codecs=opus,vp8' };
try {
that.mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
return;
}
that.mediaRecorder.blobs = [];
that.mediaRecorder.ondataavailable = function (e) {
var blob = new Blob([e.data], { type: "video/mp4" });
const blobUrl = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.download = "vvvvvv";
a.href = blobUrl;
a.click();
};
that.mediaRecorder.start();
},
//停止录制
stopDrawVideoAtCanvas() {
this.mediaRecorder.stop();
},
//关闭摄像头
stopNavigator() {
if (this.timer) {
alert("请先停止录制~");
return;
}
let tracks= this.thisVideo.srcObject.getTracks();
tracks.forEach(track=>{
track.stop();
})
this.isShow = false;
this.thisVideo = null;
},
},
mounted() {
// this.getCompetence();
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
this.stopNavigator();
},
};
</script>
我们通过MediaDevices接口访问连接媒体输入的设备。方法：
getOneCompetence()
通过getUserMedia()方法提示用户给我们摄像机的权限
我们通过MediaDevices接口访问连接媒体输入的设备标签：web,mediaDevices,thisVideo,PC,getUserMedia,var,navigator,摄像头 From： https://www.cnblogs.com/Xiaomoml/p/14683782.html