vue-pc打开本地摄像头并对画面进行截图

在vuePc端打开本地摄像头。
实现效果，在pc端项目中打开本地摄像头，然后对此画面进行截屏，并以文件的格式上传到服务器。

1.打开本地摄像头


/**
获取方法1
*/
getVideo(){let video = this.$refs.video//获取要放视频的video标签节点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:true }navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 旧的浏览器可能没有srcObjectif ('srcObject' in video) {video.srcObject = stream} else {// 避免在新的浏览器中使用它，因为它正在被弃用。video.src = window.URL.createObjectURL(stream)}video.onloadedmetadata = function (e) {video.play() //打开摄像头}}).catch(err => {console.log("报错123",err)})},

/*
获取方法2
*/

    getVideo(){navigator.getUserMedia({video: true,audio: true},(stream)=> {this.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]//创建video元素var video = document.getElementById("video");console.log("video",video)//指定srcif (window.URL) {console.log("window.URL",window.URL)try {video.src = window.URL.createObjectURL(stream);} catch (e) {video.srcObject = stream;}} else {video.src = stream;}//视频播放video.play();},(error)=> {console.log("调用摄像头错误error",error);}) },

2.对画面进行截图

 crooper(){var video =document.getElementById("video")var canvas1 = document.getElementById('testImg');var context1 = canvas1.getContext('2d');context1.drawImage(video,0,0,500,500);/*  context1.fillStyle = "#ff0";// 设置水平对齐方式context1.textAlign = "center";// 设置垂直对齐方式context1.textBaseline = "middle";// 绘制文字（参数：要写的字，x坐标，y坐标）context1.fillText("要写的文字", 100, 100); */var base64 = canvas1.toDataURL('images/png'); //将base64格式转为图片/* 将图片转为文件对象 */var arr = base64.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = window.atob(arr[1]); // 解码base-64编码的数据var n = bstr.length; console.log("n",n)var u8arr = new Uint8Array(n);// 无符号整型数组while(n--){u8arr[n] = bstr.charCodeAt(n);}//转换成file对象this.crooperImg = new File([u8arr], 'filename', {type:mime});},

vue-pc打开本地摄像头并对画面进行截图相关推荐

vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
【Opencv基础学习】 VideoWriter打开本地摄像头并保存mp4格式视频
你好! 这是我第一次用CSDN编写博客.该专栏博客主要来记录学习使用Opencv过程中所遇到的问题及解决方案. 这篇博客主要记录了使用Opencv打开本地摄像头录制视频,并保存为*.mp4文件格式视频 ...
Qt-FFmpeg开发-打开本地摄像头（6）
Qt-FFmpeg开发-打开本地摄像头[软解码+ OpenGL显示YUV] 文章目录 Qt-FFmpeg开发-打开本地摄像头[软解码+ OpenGL显示YUV] 1.概述 2.实现效果 3.FFmpe ...
播放本地视频或者打开本地摄像头抓取特定颜色的物体
代码1:播放本地视频并抓取视频中蓝色的部分代码2:打开本地摄像头动态的抓取想要的部分物体 # -*- coding: utf-8 -*- # ============================ ...
【项目实战】vue-springboot-pytorch前后端结合pytorch深度学习 html打开本地摄像头监控人脸和记录时间
是一个项目的一个功能之一,调试了两小时,终于能够 javascript设置开始计和暂停计时监控人脸记录时间了效果图: 离开页面之后回到页面会从0计时(不是关闭页面,而是页面失去焦点) 离开摄像头 ...
yolov5打开本地摄像头实时检测方法
1-detect.py中这个函数的source中的default中的内容改为0(若有第二颗摄像头则改为2,以此类推) 2.在datasets文件的第303行注释四行如下图 3.pycharm右上角编辑 ...
Qt/C++编写ffmpeg本地摄像头显示（16路本地摄像头占用3.2%CPU）
一.前言内核ffmpeg除了支持本地文件.网络文件.各种视频流播放以外,还支持打开本地摄像头,和正常的解析流程一致,唯一的区别就是在avformat_open_input第三个参数传入个AVInpu ...
vue 实现pc端调取本地摄像头拍照生成base64数据 navigator.userAgent 功能
文章目录 1. 写在前面 2. demo摄像头拍照实现效果 3. https 方式实现摄像头拍照生成base64数据的 4. 配置浏览器的目标位置实现摄像头拍照功能 5. pc 端实现调用本地摄像头 ...
vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...

vue-pc打开本地摄像头并对画面进行截图

vue-pc打开本地摄像头并对画面进行截图相关推荐

最新文章

热门文章