html5录像功能限制时间,HTML5拍照和摄像机功能实战详解
开篇
最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一是总结梳理知识点,最重要是希望对有相关需求的读者提供一些指导。
注:本篇文章以实战为准,理论知识不做过多介绍。
拍照
HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
浏览器兼容性如下:
从上图可以看到,主流浏览器Firefox、Chrome、Safari、Opera等等已经全面支持。
1、获取视频流,并用video标签播放。
--------------------------------------------------------------
const videoConstraints = { width: 1366, height: 768 };
const videoNode = document.querySelector('#video');
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
videoNode.srcObject = stream;
videoNode.play();
2、多个摄像头设备,如何切换?
// enumerateDevices获取所有媒体设备
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
// 通过设备实例king属性videoinput,过滤获取摄像头设备
const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') || [];
// 获取前置摄像头
const videoDeviceId = videoDevices[0].deviceId;
const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
// 获取后置摄像头
const videoDeviceId = videoDevices[1].deviceId;
const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
// 依次类推...
3、拍照保存图片
// 通过canvas捕捉video流,生成base64格式图片
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 1366;
canvas.height = 768;
context.drawImage(videoNode, 0, 0, canvas.width, canvas.height);
download(canvas.toDataURL('image/jpeg'));
// 下载图片
function download (src) {
if (!src) return;
const a = document.createElement('a');
a.setAttribute('download', new Date());
a.href = src;
a.click();
}
4、关闭摄像头设备
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
// 3s后关闭摄像头
setTimeout(function () {
stream.getTracks().forEach(track => track.stop());
stream = null;
}, 3000);
到此完成简单的相机拍照功能
摄像
摄像基本流程,是录制一段视频流并保存为音视频文件。HTML5 MediaRecorder对象提供了多媒体录音和录视频功能。
浏览器兼容性如下:
从上图所示,浏览器对MediaRecorder兼容性远不如getUserMedia,目前只有Chrome、Firefox对MediaRecorder支持较好。
==注意:摄像预览播放器video标签要设置静音muted(消除回声导致的刺耳噪音)==
const videoConstraints = { width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
let mediaRecorder = new MediaRecorder(stream);
let mediaRecorderChunks = []; // 记录数据流
mediaRecorder.ondataavailable = (e) => {
mediaRecorderChunks.push(e.data);
};
mediaRecorder.onstop = (e) => {
// 通过Blob对象,创建文件二进制数据实例。
let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType });
mediaRecorderChunks = [];
const file = new File([this.recorderFile], (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
type: 'video/mp4'
});
download(URL.createObjectURL(file));
// 下载视频
function download (src) {
if (!src) return;
const a = document.createElement('a');
a.setAttribute('download', new Date());
a.href = src;
a.click();
}
};
mediaRecorder.stop(); // 停止录制,触发onstop事件
总结
通过以上实战,相信读者已经掌握基础相机功能,拍照、摄像、保存文件等。由于应用项目非个人项目,源码不公开,有兴趣的朋友,不妨动手一试。
html5录像功能限制时间,HTML5拍照和摄像机功能实战详解相关推荐
- html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解 发布时间:2020-09-26 20:42:24 来源:脚本之家 阅读:112 作者:krapnik 本文实例讲述了JS/HTML5游戏常 ...
- HTML5实现视频直播功能思路详解
HTML5实现视频直播功能思路详解 最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下 ...
- 视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
- Three.js - 摄像机的使用详解(透视投影摄像机、正交投影摄像机)
一.两种摄像机的区别与比较 Three.js 库提供了两种不同的摄像机:透视投影摄像机和正交投影摄像机. 透视投影摄像机:这种摄像机的效果更贴近真实世界.也就是物体离摄像机越远,它们就会被渲染得越小. ...
- Unity Cinemachine之第三人称摄像机CinemachineFreeLook属性详解
演示 CinemachineFreeLook是一个第三人称视角相机插件,功能非常强大,内置了很多属性可以供开发者根据需求进行调整. 创建 首先是Cinemachine插件的导入,如果是2018以后 ...
- android手机上图像分类技术的研究,用图片分类技术实现“拍照识花”的原理详解...
春暖花开,万物复苏,正是踏青好时候.周末,阿珍组织班级里的小朋友去公园踏青,程序员阿强,作为护花使者也一同前往. 阿强本以为,可以肆意在林间草地自由地奔跑,回忆一下逝去的童真时光,没想到却成了小朋友们 ...
- Linux执行yum不显示时间图形,Linux停的yum命令详解(朝花夕拾)
yum是干什么的使用redhat,fedora的linuxer肯定都为rpm著名的dependency hell而头疼(这也是所有基于rpm发行版都有的问题).foo is needed by bar ...
- 一文速学-时间序列分析算法之移动平均模型(MA)详解+Python实例代码
目录 前言 一.移动平均模型(MA) 模型原理 自回归 移动平均模型 自相关系数 常用的 MA 模型的自相关系数 通用: MA(1)模型: MA(2)模型: 自协方差函数 二.Python案例实现 平 ...
- 转 | 禁忌搜索算法(Tabu Search)求解带时间窗的车辆路径规划问题详解(附Java代码)
以下文章来源于数据魔术师 ,作者周航 欲下载本文相关的代码及算例,请关注公众号[程序猿声],后台回复[TSVRPJAVA]不包括[]即可 前言 大家好呀! 眼看这9102年都快要过去了,小编也是越来越 ...
最新文章
- SpringBoot整合Grpc实现跨语言RPC通讯
- 5.1. Instructions Instead of Data
- url 自动加入链接
- 计算机二级日期格式,09年计算机二级辅导:指定格式的日期字符串转化成java.util.Date类型日期对象...
- 聊聊springboot2的embeded container的配置改动
- 【Alertmanager】腾讯企业邮箱配置
- muduo网络库学习(九)日志类Logger和LogStream,将日志信息打印到屏幕
- HDU1999不可摸数-暴力打表
- 对互联网海量数据实时计算的理解
- 微信小程序|area组件使用的地址数据文件plus
- java swt 文件选择,Java SWT文件对话框中的文件多选
- 樊登读书会极致读后感_樊登:我只不过是把好为人师发挥到了极致
- 代数法化简逻辑函数方法集合
- 消息中间件TongLinkQ(TLQ)使用总结——记那几天趟过的坑
- 当我跨过沉沦的一切,向着永恒开战的时候,你是我的军旗。——王小波
- SharedPreferences的调教
- 路径的单线杠双斜杠区别
- 大学英语精读第三版(第六册)学习笔记(原文及全文翻译)——6B - John Thomas’s Cube(约翰·托马斯的立方体)
- 微信公众号代运营的的技巧有哪些(2)
- 东北女子参加同学聚会倒地猝死,无人参与急救
热门文章
- wxpython下载缓慢_我可以在wxPython的wx.grid.Grid中加速优化GridCellAttr的使用吗?
- 织梦ajax表单提交参数错误,【织梦二次开发】织梦jquery+ajax方式提交自定义表单...
- Python办公自动化,对文件进行自由操作
- java instantiation,Instantiation of List (Java)
- wxlogin php,wxlogin.php
- Java tree set_Java TreeSet tailSet()方法
- 【TypeScript系列教程07】变量声明
- 多家防火墙设备存在信息泄露漏洞
- 漏洞工具:nmap和nessus
- html5标签的兼容性处理