ideal如何用标签输出_实战|如何使用JavaScript访问设备前后摄像头
目录
如何使用相机API
捕获视频流
视频规格(requirements)
在页面上显示视频
访问手机的前后摄像头
截屏
完整示例和代码
如何使用相机API
要访问用户的相机(或麦克风),我们使用JavaScript MediaStream API。该API允许通过流访问这些设备捕获的视频和音频。
第一步是检查浏览器是否支持此API:
if ("mediaDevices" in navigator &&"getUserMedia" in navigator.mediaDevices) {// ok, 浏览器支持它}
在现代浏览器中,支持是不错的(当然没有Internet Explorer)。
捕获视频流
要捕获由摄像机生成的视频流,我们使用 mediaDevices
对象的 getUserMedia
方法。这个方法接收一个对象,其中包含我们要请求的媒体类型(视频或音频)和一些要求。首先,我们可以通过 {video: true}
来获取摄像机的视频。
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
此调用将询问用户是否允许访问摄像机。如果用户拒绝,它将引发异常并且不返回流。因此,必须在 try/catch
块内完成处理这种情况。
请注意,它返回一个Promise,因此您必须使用 async/await
或 then
块。在Mac OS系统上还会弹出授权
我使用的是Mac版Edge浏览器
点击“好”,就可以访问电脑摄像头了,控制台输出的 videoStream
对象如下
视频规格(requirements)
我们可以通过传递有关所需分辨率以及最小和最大限制的信息来改善视频的要求:
const constraints = {video: {width: {min: 1280,ideal: 1920,max: 2560, },height: {min: 720,ideal: 1080,max: 1440, }, },};
const videoStream = await navigator.mediaDevices.getUserMedia(constraints);
这样,流以正确的宽度和高度比例进入,如果它是处于纵向模式的手机,则需要进行尺寸反转。
在页面上显示视频
既然有了流,我们该如何处理?
我们可以在页面上的 video
元素中显示视频:
// 页面中有一个 const video = document.querySelector("#video");const videoStream = await navigator.mediaDevices.getUserMedia(constraints);video.srcObject = videoStream;
请注意 video
标签中的自动播放属性 autoplay
,没有它,你需要调用 video.play()
才能真正开始显示图像。
访问手机的前后摄像头
默认情况下,getUserMedia
将使用系统默认的视频录制设备。如果是有两个摄像头的手机,它使用前置摄像头。
要访问后置摄像头,我们必须在视频规格中包括 faceModeMode:"environment"
:
const constraints = {video: {width: { ... },height: { ... },facingMode: "environment" },};
默认值为 faceingMode:"user"
,即前置摄像头。
需要注意的是,如果你想在已经播放视频的情况下更换摄像机,你需要先停止当前的视频流,然后再将其替换成另一台摄像机的视频流。
videoStream.getTracks().forEach((track) => { track.stop();});
截屏
你可以做的另一件很酷的事情是捕获视频的图像(屏幕快照)。
你可以在canvas上绘制当前视频帧,例如:
// 页面中有一个 标签const canvas = document.querySelector("#canvas");canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext("2d").drawImage(video, 0, 0);
你还可以在 img
元素中显示画布内容。
在本教程创建的示例中,我添加了一个按钮,该按钮可从画布动态创建图像并将其添加到页面:
const img = document.createElement("img");img.src = canvas.toDataURL("image/png");screenshotsContainer.prepend(img);
完整代码
在线效果及源代码(点击阅读原文访问):https://coding.zhangbing.site/view.html?url=./list/camera-api/index.html
近期文章仅3行核心CSS代码的rate评分组件使用JavaScript的padStart()和padEnd()格式化字符串Vue 3教程(适用于Vue 2用户)JavaScript vs Dart 两者之间的比较HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”实战 | 使用TypeScript和ES模块发布Node模块避免在单页应用程序中使用CORS,如何以及为什么?测量JavaScript函数的性能的简单方法及与其他方式对比不要过度使用React.useCallback()HTML页面生成器:使用JavaScript和Node创建CLIReact.js和Vue.js的语法并列比较温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件从零开始使用JavaScript制作自己的命令行(CLI工具)Vue.js中编写更好的v-for循环的6种技巧
如果对你有帮助,还可以在看、留言、转发,这是对作者最大的帮助。
ideal如何用标签输出_实战|如何使用JavaScript访问设备前后摄像头相关推荐
- bcb image 动态大小_实战|使用CSS Paint API动态创建与分辨率无关的可变背景
来源:https://medium.com/better-programming,作者:Ferenc Almasi 现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节.通过优化它们,你可以 ...
- 使用KNN模型进行多输出分类实战(Multioutput Classification)
使用KNN模型进行多输出分类实战(Multioutput Classification) 详细的:二分类.多分类.多标签分类.多输出分类的概念参考笔者如下博文. 分类家族:二分类.多分类.多标签分类. ...
- VTK:标签轮廓用法实战
VTK:标签轮廓用法实战 程序输出 程序完整源代码 程序输出 程序完整源代码 #include <vtkActor.h> #include <vtkActor2D.h> #
- 如何用标签打印软件制作物料标识卡
每个公司的物料标识卡都是不同的,显示的信息也不同,一般的物料标识卡上面的信息会有:物料名称.物料编号,物料规格.物料数量等信息,那么如何制作物料标识卡呢?今天小编教大家如何用标签打印软件制作物料标识卡 ...
- 【BERT-多标签文本分类实战】之五——BERT模型库的挑选与Transformers
·请参考本系列目录:[BERT-多标签文本分类实战]之一--实战项目总览 ·下载本实战项目资源:>=点击此处=< [1] BERT模型库 从BERT模型一经Google出世,到tens ...
- 【BERT-多标签文本分类实战】之七——训练-评估-测试与运行主程序
·请参考本系列目录:[BERT-多标签文本分类实战]之一--实战项目总览 ·下载本实战项目资源:>=点击此处=< [1] 损失函数与评价指标 多标签文本分类任务,用的损失函数是BCEW ...
- MySQL入门_实战3_创建和删除数据库
MySQL入门_实战系列文章目录 MySQL入门_实战1 MYSQL安装和卸载 MySQL入门_实战2 MYSQL的登录和断开以及SQL查询常见问题 文章目录 MySQL入门_实战系列文章目录 前言 ...
- 如何用c输出我的名字
如何用c输出我的名字 ①直接输出 printf("TheCat_\n");printf("%s\n", "TheCat_"); //%c用来 ...
- 【BERT-多标签文本分类实战】之二——BERT的地位与名词术语解释
·请参考本系列目录:[BERT-多标签文本分类实战]之一--实战项目总览 ·下载本实战项目资源:>=点击此处=< [注]本篇将从宏观上介绍bert的产生和在众多模型中的地位,以及与bert ...
- R语言使用ggplot2包的快速可视化函数qplot绘制密度图(主题、轴标签设置)实战
R语言使用ggplot2包的快速可视化函数qplot绘制密度图(主题.轴标签设置)实战 目录 R语言使用ggplot2包的快速可视化函数qplot绘制密度图(主题.轴标签设置)实战 #仿真数据
最新文章
- Python作为机器学习语言的老大,跟在它后面的语言都是谁?
- hp服务器安装exsi5.5
- 台湾瑞萨Synergy 助客户攻物联网
- Linux基础第一章 概述
- 将网络中的图片存为NSData并保存到sqlite的BLOB字段中
- 计算机知识说明,请说明计算机的工作原理
- 用TCL调用Hypermesh中的求解器
- STM32F103实现LED呼吸灯程序
- 数学实验matlab韩明版答案,数学实验(MATLAB版)[韩明,王家宝,李林 编著] 2012年版...
- 2021年高压电工考试题及高压电工考试试卷
- 南京大学计算机系副教授名单,2018年度国际“人工智能10大新星”名单公布:南京大学俞扬副教授国内高校入选者...
- 【支付】中国银联作为收单机构的支付流程分析
- VirtualBox中出现“0x00000000指令引用的0x00000000内存该内存不能为written 和visual studio Just in time debugger error
- 通过代码实现EXE文件图标的替换
- 小程序上传文件demo
- 视频-视频基础(H264)
- 原生js 打印 以及 自定义页眉页脚的一些感悟
- java 有10个硬盘有两个重要属性_2013年计算机一级B冲刺试题七及答案解析
- 软件工程-大学体育馆管理系统用例图
- 使用pytorch进行深度学习
热门文章
- VS C++ 重新编译
- Atitit doc mng 文档管理总结目录1. 主要几大内容 12. 存储管理 22.1. 一般来说 ,文档存储在IM网盘note邮箱blog wiki等地 22.2. 文档格式与体
- Atitit 数据库的历史与未来 目录 1.1. 两个对于数据库强需求的行业。电信 金融	1 1.2. 艾提拉分析 对数据库强需求行业金融	1 2. 数据库历史	2 2.1. ,上个世纪50,6
- Atitit 人员评价能力模型 目录 1.1. 深度、大局观、	1 1.2. 影响力, 影响力 分享	1 1.3. 业务洞察力 价值识别	1 1.4. 视野 战略和人才 专业	1 1.5.
- Atitit 朋友圈 微博 之道 朋友圈的dos and donts
- Atitit.播放系统规划新版本 v4 q18 and 最近版本回顾
- atitit.网络文件访问协议.unc smb nfs ftp http的区别
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
- Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现
- paip.c++ cli 命令行 调用总结