前端调用电脑摄像头

项目中需要前端调用,所以做了如下操作
先看一下效果吧
主要是基于vue3,通过canvas把画面转成base64的形式,然后是把base64转成
file文件,最后调用了一下上传接口

在这里插入图片描述
以下是代码

进入页面先调用一下摄像头

navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {video.value.srcObject = stream}).catch((error) => {console.error(error)})state.photoUrl = ''state.photo = true

拍照


const canvas = document.createElement('canvas')canvas.width = video.value.videoWidthcanvas.height = video.value.videoHeightcanvas.getContext('2d').drawImage(video.value, 0, 0, canvas.width, canvas.height)state.photoUrl = canvas.toDataURL('image/png')

转base64

  let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${filename}.${suffix}`, {type: mime,})

完整代码

<template><div><div><div>摄像头实时画面</div><div class="hm"><video ref="video" v-if="state.photo" autoplay></video><img :src="state.photoUrl" v-else></div></div><div class="maT10"><el-button @click="takePhoto">拍照</el-button><el-button @click="retake">重拍</el-button></div></div>
</template><script setup lang="ts" name="photo">
import axios from 'axios'
const state = reactive({photo: true,photoUrl: '',
})
const video = ref()const takePhoto = () => {const canvas = document.createElement('canvas')canvas.width = video.value.videoWidthcanvas.height = video.value.videoHeightcanvas.getContext('2d').drawImage(video.value, 0, 0, canvas.width, canvas.height)state.photoUrl = canvas.toDataURL('image/png')clearVideo()state.photo = falselet file = base64ImgtoFile(state.photoUrl)let param = new FormData()param.append('file', file, file.name)param.append('fileReName', 'true')let config = {headers: {'Content-Type': 'multipart/form-data',Authorization: 'token',  //此处是token},}let url = import.meta.env.VITE_API_URL + '/api/admin/file/upload-file'axios.post(url, param, config).then((response) => {})
}
const base64ImgtoFile = (dataurl, filename = 'file') => {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${filename}.${suffix}`, {type: mime,})
}
const clearVideo = () => {const stream = video.value.srcObjectconst tracks = stream.getTracks()tracks.forEach((track) => {track.stop()})video.value.srcObject = null
}const retake = () => {navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {video.value.srcObject = stream}).catch((error) => {console.error(error)})state.photoUrl = ''state.photo = true
}onMounted(() => {retake()
})
//在离开当前页面的时候把摄像头关了,不然页面一直会显示摄像头的图标
onBeforeUnmount(() => {video.value.srcObject = null
})
</script><style scoped lang="scss">
.hm {width: 400px;height: 300px;video,img {width: 100%;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人脸识别平台批量导入绑定设备的一种方法

因为原先平台绑定设备是通过一个界面进行人工选择绑定或一个人一个人绑定设备。如下&#xff1a; 但有时候需要在几千个里选择出几百个&#xff0c;那这种方式就不大现实了&#xff0c;需要另外一种方法。 目前相到可以通过导入批量数据进行绑定的方式。 一、前端 主要是显示…

42、Flink 的table api与sql之Hive Catalog

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

Redis初始以及安装

"梦却了无影踪&#xff0c;梦仍不曾改动" 初始Redis (1) Redis是什么&#xff1f; 要认识、学习一个软件&#xff0c;最重要的途径无一是去该软件的官方文档里瞅瞅、转悠转悠。 从官方文档的介绍中得知&#xff0c;Redis是一种工作于内存&#xff0c;…

juicefs源码format命令阅读

之前博文中介绍过在windows下安装GO和vscode windows下安装go环境 和vscode中go扩展调试 1、获取源码 git clone https://github.com/juicedata/juicefs.git 首先观察代码架构 上图是我已经编译过得代码&#xff0c;可能和刚git下来的有些出入。 2、编译 我是在windows上进…

Linux禅道上修改Apache 和 MySQL 默认端口号

1. 修改Apache默认端口号 80 cd /opt/zbox/etc/apachevim httpd.conf :wq 保存 2. 修改MySQL默认端口号 3306 cd /opt/zbox/etc/mysql vim my.cnf :wq 保存 3. 重启服务 ./zbox restart

GPT能否辅助数学学习

GPT4.0的数学能力怎么样&#xff1f;我们使用镜像站进行实验&#xff0c;通过不同水平的数学看看GPT4.0的数学能力得到进步没有。镜像站的地址我们放在了最后&#xff0c;各位读者也可以自行去测试。 笔者在ChatGPT镜像站进行测试&#xff0c;我们的实验是让GPT4.0自行出数学题…

2024王道408数据结构P144 T16

2024王道408数据结构P144 T16 思考过程 首先看题目&#xff0c;要求我们把二叉树的叶子结点求出来并且用链表的方式存储&#xff0c;链接时用叶结点的右指针来存放单链表指针。我们很清楚可以看出来能用中序遍历递归的方式实现&#xff0c;因为第一个叶子结点在整棵树的最左下…

入职字节外包一个月,我离职了

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…

eslint和prettier格式化冲突

下载插件 ESLint 和 Prettier ESLint 进入setting.json中 setting.json中配置 {"editor.tabSize": 2,"editor.linkedEditing": true,"security.workspace.trust.untrustedFiles": "open","git.autofetch": true,"…

基于Jenkins构建生产CICD环境(第二篇)

基于Jenkins自动打包并部署Tomcat环境 传统网站部署的流程 在运维过程中&#xff0c;网站部署是运维的工作之一。传统的网站部署的流程大致分为:需求分 析-->原型设计-->开发代码-->提交代码-->内网部署-->内网测试-->确认上线-->备份数据-->外网更新…

[ZenTao]源码阅读:自定义任务类型

1、module/custom/control.php 2、module/custom/model.php

QT基础教程之六布局管理器和常用控件

QT基础教程之六布局管理器和常用控件 布局管理器 所谓 GUI 界面&#xff0c;归根结底&#xff0c;就是一堆组件的叠加。我们创建一个窗口&#xff0c;把按钮放上面&#xff0c;把图标放上面&#xff0c;这样就成了一个界面。在放置时&#xff0c;组件的位置尤其重要。我们必须…

取数组中每个元素的最高位

1 题目 /*程序将一维数组a中N个元素的最高位取出&#xff0c;保存在一维数组b的对应位置。 程序运行结果为&#xff1a; a&#xff1a;82 756 71629 5 2034 b: 8 7 7 5 2 */ 2 思考 简单来说就是取一个数据的最高位。 一开始的笨方法没有办法判断数据的长度&#xff0c;后来…

Canvas实现3D效果

3D 球 效果图 代码 var canvas document.getElementById("cas"),ctx canvas.getContext("2d"),vpx canvas.width / 2,vpy canvas.height / 2,Radius 150,balls [],angleX Math.PI / 1000,angleY Math.PI / 1000,factor 0.0001 //旋转因子var An…

Spring Boot 中是使用 JDK Proxy 动态代理还是 CGLib ?

1. Spring Boot 中是使用 JDK Proxy 动态代理还是 CGLib ? 首先我们知道在 Spring 里面&#xff0c;动态代理的底层&#xff0c;默认使用的是 JDK Proxy 代理&#xff0c;这一点在官方文档有具体的说明&#xff1a; 既然 Spring 中的动态代理默认使用 JDK Proxy&#xff0c;那…

Nginx详解之Nginx高级配置

Nginx详解之Nginx高级配置 1、网页的状态页2、Nginx第三方模块2.1echo模块 3、变量3.1内置变量3.2自定义变量 4、自定义访问日志4.1 自定义访问日志的格式4.2自定义json 格式日志 5、Nginx压缩功能&#xff08;重要&#xff09;6、https 功能6.1Nginx的HTTPS工作原理的详解6.2启…

电脑每次开机杀毒软件报iusb3mon.exe病毒已清除,电脑中病毒iusbmon杀毒办法,工具杀毒

不知道什么时候开始&#xff0c;我电脑C盘的系统数据存储文件夹programdata 不知不觉就没了&#xff0c;找不到了 programdata文件夹为存储系统数据文件的&#xff0c;这个文件不见了&#xff0c;而且我打开了显示隐藏文件和文件夹还是没有显示 然后我重启电脑&#xff0c;杀毒…

VueX 与Pinia 一篇搞懂

VueX 简介 Vue官方&#xff1a;状态管理工具 状态管理是什么 需要在多个组件中共享的状态、且是响应式的、一个变&#xff0c;全都改变。 例如一些全局要用的的状态信息&#xff1a;用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工…

数据结构:线性表之-顺序表

目录 1.线性表概念 1.1 什么是顺序列表 1.2 线性表 2.顺序表实现 将有以下功能&#xff1a; 详细过程 顺序表的动态存储 顺序表初始化 尾插 扩容 头插 更改后的尾插 尾删 头删 打印 释放内存 优化顺序表 (任意位置插入删除) 优化后的头插尾插 优化后的头删尾…