vue项目开启摄像头

页面区：

<div class="camera_outer"><videoid="videoCamera":width="videoWidth":height="videoHeight"autoplay></video><canvasstyle="display: none"id="canvasCamera":width="videoWidth":height="videoHeight"></canvas><div v-if="imgSrc" class="img_bg_camera"><p>效果预览</p><img :src="imgSrc" alt class="tx_img" /></div><div class="button"><button @click="getCompetence()">打开摄像头</button><button @click="stopNavigator()">关闭摄像头</button><button @click="setImage()">拍照</button></div>
</div>

功能区：

export default {data() {return {videoWidth: 250,videoHeight: 350,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,openVideo: false,};},mounted() {//this.getCompetence()//进入页面就调用摄像头},methods: {// 调用权限（打开摄像头功能）getCompetence() {var _this = this;_this.thisCancas = document.getElementById("canvasCamera");_this.thisContext = this.thisCancas.getContext("2d");_this.thisVideo = document.getElementById("videoCamera");_this.thisVideo.style.display = "block";// 获取媒体属性，旧版本浏览器可能不支持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.getUserMediareturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}var constraints = {audio: false,video: {width: this.videoWidth,height: this.videoHeight,transform: "scaleX(-1)",},};navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 旧的浏览器可能没有srcObjectif ("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);});alert("打开摄像头");},//  绘制图片（拍照功能）setImage() {var _this = this;// canvas画图_this.thisContext.drawImage(_this.thisVideo,0,0,_this.videoWidth,_this.videoHeight);// 获取图片base64链接var image = this.thisCancas.toDataURL("image/png");_this.imgSrc = image; //赋值并预览图片alert("拍照");},// 关闭摄像头stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();alert("关闭摄像头");},},
};

vue项目开启摄像头相关推荐

Vue项目开启gzip
Vue项目开启gzip Nginx 动态压缩与静态压缩,显著提高前后端分离项目响应速度 Gzip Precompression模块(Gzip Precompression) nginx缓存配置及开启 ...
Vue项目判断鼠标点击事件的左键、中键（滚轮）或右键
Vue项目判断鼠标点击事件的左键.中键(滚轮)或右键去掉特定区域的右键点击事件在需要去掉右键点击事件的区域最外层div标签中添加@contextmenu.prevent属性 <templat ...
解决开启Vue项目缺少node_models包问题
解决开启Vue项目缺少node_models包问题参考文章: (1)解决开启Vue项目缺少node_models包问题 (2)https://www.cnblogs.com/z520h123/p/1 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
vue项目使用大华摄像头怎样初始化_【译】如何使用Vue捕获网络摄像头视频
几个月前,我一直关注着比特币的爆发并且在GDAX网站上注册账号.在注册验证的过程中,网站提示要通过计算机的网络摄像头提交我自己的一张照片作为照片ID.这是一个很酷的做法,让我思考一个问题:在网络浏览器 ...
前端项目用hbuilder打包成APP后，调用api开启摄像头进行拍照, 5+app框架
这几个方法function是js通用的, 非vue项目也可以使用! 记得收藏哦! 重点是从按钮"开启相机" 开始,点击触发photo方法可以直接看method中的photo方法 ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
vue项目中开启Eslint碰到的一些问题及其规范
eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到 1.'layer' is defined but never used 这是定义了一个变量但是未使用到该变量 ...
如何开启 vue 项目
在读此文章再此之前默认你已经安装了 vue 项目 vue项目脚手架@vue/cli安装运行项目 cmd 运行 cnpm run serve 运行的目录要在你的项目文件夹下比如我有一个项目 one ...

vue项目开启摄像头

vue项目开启摄像头相关推荐

最新文章

热门文章