【Vue3】 navigator.mediaDevices 实现翻转摄像头

embedded/2024/9/25 15:22:23/
const openFront = ref(true);//true开启前置摄像头,false开启后置摄像头
const video = ref(null);
//开启摄像头function startCamera(){loadingVideo.value = true;// 检测浏览器是否支持mediaDevicesif (navigator.mediaDevices) {let params = {audio: false,video: openFront.value? { facingMode: 'user' } : { facingMode: { exact: "environment" } },// video: { facingMode: { exact: "environment" } },//后置摄像头// video: { facingMode: "user"},//前置摄像头}console.log(params);navigator.mediaDevices// 开启视频.getUserMedia(params).then((stream) => {loadingVideo.value = false;// 将视频流传入viedo控件if (video.value) {video.value.srcObject = stream;video.value.play();}}).catch((error) => {loadingVideo.value = false;console.log(error);if (error.name === 'NotAllowedError' || error.name === 'NotFoundError') {// 用户未授权相机访问或者没有可用设备ElMessage.warning("请允许访问摄像头并确保设备已连接");} else {// 其他错误let cameraName = cameraStatu.value? '前置摄像头' : '后置摄像头';ElMessage.warning('启动'+cameraName+'时出错:' + error.message);}});} else {loadingVideo.value = false;ElMessage.warning("该浏览器不支持开启摄像头,请更换最新版浏览器");}};//关闭摄像头function closeCamera(){if (!video.value.srcObject) return;let stream = video.value.srcObject;let tracks = stream.getTracks();tracks.forEach(track => {track.stop();});video.value.srcObject = null;}//切换摄像头function toggleCamera (){cameraStatu.value = !cameraStatu.value;closeCamera();startCamera();}

http://www.ppmy.cn/embedded/94250.html

相关文章

19-ESP32-C3加大固件储存区

1默认编译情况。 2、改flash4M。ESP-IDF Partition Table Editor修改。 3、设置输入Partition Table 改自定义.CSV。保存。 4、查看命令输入Partition Table Editor打开-分区表编辑器UI。按图片增加。 nvs,data,nvs,0x9000,0x6000,, phy_init,data,phy,0xF000,0x1000,, factory…

GATK Haplotype类介绍

在GATK(Genome Analysis Toolkit)中,Haplotype类用于表示和处理基因组中的可能基因型(haplotype)。这个类是GATK中重要的数据结构之一,尤其在变异检测和基因组组装过程中具有关键作用。以下是Haplotype类的…

Haproxy

haproxy基础实验: 环境: haproxy:172.25.254.100 web1: 172.25.254.10 均为nat网络 web2: 172.25.254.20 haproxy端配置: [rootwww ~]# yum install haproxy -y [rootwww ~]# vim /etc/haproxy/haproxy.cfg .........................…

c++信号函数

信号处理函数 信号处理函数是处理特定信号&#xff08;如中断信号 SIGINT 或终止信号 SIGTERM&#xff09;的函数。典型的信号处理函数具有以下签名&#xff1a; #include <csignal>void signal_handler(int signal);注册信号处理函数的方式通常如下&#xff1a; #inc…

Linux Vim教程(十五):使用Vimscript进行脚本编写

目录 1. Vimscript简介 2. 基本语法和结构 2.1 变量 2.2 条件语句 2.3 循环语句 2.4 函数 3. 操作缓冲区、窗口和标签页 3.1 缓冲区 3.2 窗口 3.3 标签页 4. 自动化编辑任务 4.1 自动命令 4.2 键映射 5. 编写和调试Vimscript脚本 5.1 编写脚本 5.2 调试脚本 6…

中间件是一种在客户端和服务器之间进行通信和处理的软件组件或服务

中间件是一种在客户端和服务器之间进行通信和处理的软件组件或服务。中间件位于应用程序和操作系统之间&#xff0c;可以提供一些功能&#xff0c;如请求转发、数据转换、安全性和身份验证、日志记录等。 中间件的主要作用是将应用程序与底层基础设施解耦&#xff0c;提供了一…

jenkins 安装以及自动构建maven项目并且运行

在这里找到你对应jdk的版本的jenkins包 War Jenkins Packages 我这里用的使java8,所以下载 https://mirrors.jenkins.io/war-stable/2.60.1/jenkins.war 然后jenkins可以安装到centos系统 在本地windows系统运行命令行 scp C:\Users\98090\Downloads\jenkins.war root@192…

PwnLab: init-文件包含、shell反弹、提权--靶机渗透思路讲解

Vulnhub靶机链接回【PwnLab】 首页有一个登录框 image-20240807124822770 他没有验证码&#xff0c;我们试试暴力破解 image-20240807122743025 开始爆破了&#xff0c;全部失败&#xff0c;哈哈哈 image-20240807122851001 nmap全端口扫描试试 image-20240807131408315 有…