前端js调取摄像头并实现拍照功能

前言

最近接到的一个需求十分有意思,设计整体实现了前端仿 微信扫一扫 的功能。整理了一下思路,做一个分享。
tips: 如果想要实现完整扫一扫的功能,你需要掌握一些前置知识,这次我们先讲如何实现拍照并且保存的功能。

一. window.navigator

  1. 你想调取手机的摄像头,首先你得先检验当前设备是否有摄像设备,window 身上自带了一个 navigator 属性,这个对象有一个叫做 mediaDevices 的属性是我们即将用到的。

  2. 于是我们就可以先设计一个叫做 checkCamera 的函数,用来在页面刚开始加载的时候执行。。
    请添加图片描述

  3. 我们先看一下这个对象有哪些方法,你也许会看到下面的场景,会发现这个属性身上只有一个值为 null 的 ondevicechange 属性,不要怕,真正要用的方法其实在它的原型身上。
    请添加图片描述

  4. 让我们点开它的原型属性,注意下面这两个方法,这是我们本章节的主角。
    请添加图片描述

  5. 我们到这一步只是需要判断当前设备是否有摄像头,我们先调取 enumerateDevices 函数来查看当前媒体设备是否存在。它的返回值是一个 promise 类型,我们直接用 async 和 await 来简化一下代码。
    请添加图片描述
    请添加图片描述
    从上图可以看出,我的电脑有两个音频设备和一个视频设备,那么我们就可以放下进行下一步了。

二. 获取摄像头

  1. 接下来就需要用到上面提到的第二个函数,navigator.getUserMedia。这个函数接收一个对象作为参数,这个对象可以预设一些值,来作为我们请求摄像头的一些参数。

  2. 这里我们的重点是 facingMode 这个属性,因为我们扫一扫一般都是后置摄像头
    请添加图片描述
    当你执行了这个函数以后,你会看到浏览器有如下提示:
    请添加图片描述
    于是你高兴的点击了允许,却发现页面没有任何变化。
    这里你需要知道,这个函数只是返回了一个媒体流信息给你,你可以这样简单理解刚刚我们干了什么,首先浏览器向手机申请我想用一下摄像头可以吗?在得到了你本人的确认以后,手机将摄像头的数据线递给了浏览器,:“诺,给你。”

  3. 但浏览器现在仅仅拿到了一根数据线,然而浏览器不知道需要将这个摄像头渲染到哪里,它不可能自动帮你接上这根线,你需要自己找地方接上这根数据线。

这里不卖关子,我们需要请到我们的 Video 标签。我没听错吧?那个播放视频的 video 标签?没错,就是原生的 video 标签。

  1. 这里创建一个 video 标签,然后打上 ref 来获取这个元素。
    请添加图片描述
  2. 这里的关键点在于将流数据赋值给 video 标签的 srcObject 属性。就好像你拿到了数据线,插到了显示器上。
    (tips: 这里需要特别注意,不是 video.src 而是 video.srcObject 请务必注意)
    请添加图片描述
  3. 现在你应该会看到摄像头已经在屏幕上展示了。

三. 截取当前画面

当我按下按钮的时候,想办法将 video 标签当前的画面保存下来。在这个场景,我们需要用到 canvas 的一些能力。不要害怕,我目前对 canvas 的使用也不是特别熟练,今天也不会用到特别复杂的功能。

  1. 首先创建一个空白的 canvas 元素,元素的宽高设置为和 video 标签一致。
    请添加图片描述

  2. 接下来是重点: 我们需要用到 canvas 的 getContext 方法,先别着急头晕,这里你只需要知道,它接受一个字符串 “2d” 作为参数就行了,它会把这个画布的上下文返回给你。
    ( tips 如果这里还不清楚上下文的概念,也不用担心,这里你就简单理解为把这个 canvas 这个元素加工了一下,帮你在它身上添加了一些新的方法而已。)
    请添加图片描述

  3. 在这个 ctx 对象身上,我们只需要用到一个 drawImage 方法即可,不需要关心其它属性。
    请添加图片描述

  4. 感觉参数有点多?没关系,我们再精简一下,我们只需要考虑第二个用法,也就是5参数的写法。(sx,sy 是做裁切用到的,本文用不到,感兴趣可以自行了解。)
    请添加图片描述

  5. 这里先简单解释一下 dx 和 dy 是什么意思。在 canvas 里也存在一个看不见的坐标系,起点也是左上角。设想你想在一个 HTML 的 body 元素里写一个距离左边距离 100px 距离顶部 100px的画面,是不是得写 margin-left:100px margin-top:100px 这样的代码?没错,这里的 dy 和 dx 也是同样的道理。

  6. 我们再看 dwidth,和 dheight,从这个名字你就能才出来,肯定和我们将要在画笔里画画的元素的宽度和高度有关,是的,你猜的没错,它就好像你设置一个 div 元素的高度和宽度一样,代表着你将在画布上画的截图的宽高属性。

  7. 现在只剩下第一个参数还没解释,这里直接说答案,我们可以直接将 video 标签填进去,ctx 会自动将当前 video 标签的这一帧画面填写进去。现在按钮的代码应该是这个样子。

function shoot() {if (!videoEl.value || !wrapper.value) return;const canvas = document.createElement("canvas");canvas.width = videoEl.value.videoWidth;canvas.height = videoEl.value.videoHeight;//拿到 canvas 上下文对象const ctx = canvas.getContext("2d");ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);wrapper.value.appendChild(canvas);//将 canvas 投到页面上
}

四. 源码


<script lang="ts" setup>
import { ref, onMounted } from "vue";const wrapper = ref<HTMLDivElement>();
const videoEl = ref<HTMLVideoElement>();async function checkCamera() {const navigator = window.navigator.mediaDevices;const devices = await navigator.enumerateDevices();if (devices) {const stream = await navigator.getUserMedia({audio: false,video: {width: 300,height: 300,// facingMode: { exact: "environment" }, //强制后置摄像头facingMode: "user", //前置摄像头},});if (!videoEl.value) return;videoEl.value.srcObject = stream;videoEl.value.play();}
}function shoot() {if (!videoEl.value || !wrapper.value) return;const canvas = document.createElement("canvas");canvas.width = videoEl.value.videoWidth;canvas.height = videoEl.value.videoHeight;//拿到 canvas 上下文对象const ctx = canvas.getContext("2d");ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);wrapper.value.appendChild(canvas);
}onMounted(() => {checkCamera();
});
</script>
<template><div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center"><video ref="videoEl" /><div@click="shoot"class="w-100px leading-100px text-center bg-black text-30px">拍摄</div></div>
</template>

五. 总结

实现拍照的整体思路其实很简单,仅仅需要了解到视频其实也是一帧一帧画面构成的,而 canvas 恰好有捕捉当前帧的能力。

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

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

相关文章

腾讯云轻量数据库试用初体验

腾讯云轻量数据库1核1G开箱测评&#xff0c;轻量数据库服务采用腾讯云自研的新一代云原生数据库TDSQL-C&#xff0c;轻量数据库兼100%兼容MySQL数据库&#xff0c;实现超百万级 QPS 的高吞吐&#xff0c;128TB海量分布式智能存储&#xff0c;虽然轻量数据库为单节点架构&#x…

vue3+vite+SQL.js 读取db3文件数据

前言&#xff1a;好久没写博客了&#xff0c;最近一直在忙&#xff0c;没时间梳理。最近遇到一个需求是读取本地SQLite文件&#xff0c;还是花费了点时间才实现&#xff0c;没怎么看到vite方面写这个的文章&#xff0c;现在分享出来完整流程。 Tips:解决了打包后wasm文件404问…

Linux操作系统使用及C高级编程-D9D10Linux 服务搭建与使用

TFTP服务器 TFTP&#xff08;Trivial File Transfer Protocol&#xff09;即简单文件传输协议&#xff0c;是TCP/IP协议中一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。端口号为69 1、使用客户服务器方式和使用UDP数据…

jenkins springCloud项目优雅下线

文章目录 场景解决下线请求效果如图贴一个可用的部署脚本 场景 在 Spring Cloud 项目的微服务实例关闭时&#xff0c;需要首先从注册中心设置为下线&#xff0c;避免该服务的消费者继续请求该服务实例&#xff0c;导致请求失败如果我们在服务实例从注册中心取消注册后&#xff…

银河麒麟安装Docker

# 配置阿里云 Centos8 镜像源&#xff0c;需要额外的一些依赖&#xff0c;而这些依赖在麒麟官方的源里面是没有的 sudo curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-8.repo# 配置阿里云 docker 镜像源 sudo yum-config-manager --add-r…

RedisConnectionFactory is required已解决!!!!

1.起因&#x1f936;&#x1f936;&#x1f936;&#x1f936; redis搭建完成后&#xff0c;准备启动主程序&#xff0c;异常兴奋&#xff0c;结果报错了&#xff01;&#xff01;&#xff01;&#xff01; 2.究竟是何原因 &#x1f62d;&#x1f62d;&#x1f62d;&#x1f…

LeetCode - 622. 设计循环队列(C语言,顺序存储结构,配图)

目录 ​编辑定义结构体&#xff1a; 1. MyCircularQueue(k): 构造器&#xff0c;设置队列长度为 k 2. Front: 从队首获取元素。如果队列为空&#xff0c;返回 -1 3. Rear: 获取队尾元素。如果队列为空&#xff0c;返回 -1 4. enQueue(value): 向循环队列插入一个元素。…

爬取春秋航空航班信息

一、使用fiddler爬取小程序春秋航空航班信息 使用Fiddler爬取春秋航空微信小程序&#xff08;手机上由于网络问题&#xff0c;无法进入&#xff0c;使用电脑版&#xff09; 搜索航班信息 搜索记录 使用Fiddler查找url(没有得到有效url) 继续查找&#xff0c;发现航班信息列…

【总结】坐标变换和过渡矩阵(易忘记)

xCy&#xff0c;此为x到y的坐标变换。 [β1,β2,…,βn] [α1,α2,…αn]C&#xff0c;此为基α到基β的过渡矩阵。 这个概念经常忘记。。。alpha到beta看来就是alpha后面加一个过渡矩阵了&#xff0c;很直观。坐标变换就是根据过渡矩阵和基本形式推一推得到吧&#xff0c;记…

NEJM一篇新文为例,聊聊孟德尔随机化研究mr

2019年3月14日&#xff0c;新英格兰医学杂志发表了一篇论著&#xff0c;Mendelian Randomization Study of ACLY and Cardiovascular disease, 即《ACLY和心血管疾病的孟德尔随机化研究》。与小咖在2017年1月9日报道的一篇发表在新英格兰医学的孟德尔随机化研究——精读NEJM&am…

基于springboot实现在线外卖平台系统项目【项目源码】

基于springboot实现在线外卖平台管理系统演示 Java技术 Java是由SUN公司推出&#xff0c;该公司于2010年被oracle公司收购。Java本是印度尼西亚的一个叫做爪洼岛的英文名称&#xff0c;也因此得来java是一杯正冒着热气咖啡的标识。Java语言在移动互联网的大背景下具备了显著的…

redis的高可用之持久化

1、redis的高可用考虑指标 &#xff08;1&#xff09;正常服务 &#xff08;2&#xff09;数据容量的扩展 &#xff08;3&#xff09;数据的安全性 2、redis实现高可用的四种方式 &#xff08;1&#xff09;持久化 &#xff08;2&#xff09;主从复制 &#xff08;3&…

「浙江科聪新品发布」新品发布潜伏顶升式移动机器人专用控制器

聚焦专用车型 最小专用控制器 控制器只占整机5%&#xff0c;纵向出线方式&#xff0c;占比更小 更易插拔 整体解决方案 更具价格优势 提供整体解决方案&#xff0c;配套各类型产品设备及车体厂家 打造持久稳定使用 坚持工业级品质 采用车规级接口&#xff0c;不用其它类不可…

【giszz笔记】产品设计标准流程【7】

&#xff08;续上回&#xff09; 今天来讨论下产品设计标准流程中&#xff0c;交互设计和视觉设计的内容。 想参考之前文章的&#xff0c;我把链接给到这里。 【giszz笔记】产品设计标准流程【6】-CSDN博客 【giszz笔记】产品设计标准流程【5】-CSDN博客 【giszz笔记】产品…

【漏洞复现】IP-guard WebServer 存在远程命令执行漏洞

漏洞描述 IP-guard是由溢信科技股份有限公司开发的一款终端安全管理软件,旨在帮助企业保护终端设备安全、数据安全、管理网络使用和简化IT系统管理。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危…

微软重磅发布4个适合初学者的机器学习资料

自媒体火起来后&#xff0c;很多科技大佬都开始写博客&#xff0c;录视频了&#xff0c;大佬一入行&#xff0c;整个行业卷上天&#xff0c;像我这样的也只能走资源整合之路了&#xff0c;不过这样也好&#xff0c;科技进步&#xff0c;人类发展需要他们。 除了个人&#xff0…

如何实现MATLAB与Simulink的数据交互

参考链接&#xff1a;如何实现MATLAB与Simulink的数据交互 MATLAB是一款强大的数学计算软件&#xff0c;Simulink则是一种基于模型的多域仿真平台&#xff0c;常用于工程和科学领域中的系统设计、控制设计和信号处理等方面。MATLAB和Simulink都是MathWorks公司的产品&#xff0…

kettle spoon连接MySQL8.0数据库报错解决方法

kettle 连接 mysql 8.0报错&#xff0c;显示无法连接到数据库服务 错误连接数据库 [11] : org.pentaho.di.core.exception.KettleDatabaseException: Error occurred while trying to connect to the databaseError connecting to database: (using class org.gjt.mm.mysql.D…

Android使用Kotlin利用Gson解析多层嵌套Json数据

文章目录 1、依赖2、解析 1、依赖 build.gradle(app)中加入 dependencies { implementation com.google.code.gson:gson:2.8.9 }2、解析 假设这是要解析Json数据 var responseStr "{"code": 200,"message": "操作成功","data&quo…

2023亿发数字化智能工单,专业管理工单处理全流程,助力企业转型腾飞

伴随着智能化和信息化的不断深入&#xff0c;企业数字化转型势如腾飞。在这个过程中&#xff0c;工单管理成为生产、家电、后勤等多个管理场景下频繁应用的关键环节。如何满足管理方对设备、服务等智能化管理的需求&#xff0c;提升工单管理效率、规范管理流程&#xff0c;并实…