内容简介:最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一是总结梳理知识点,最重要是希望对有相关需求的读者提供一些指导。注:本篇文章以实战为准,理论知识不做过多介绍。HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一是总结梳理知识点,最重要是希望对有相关需求的读者提供一些指导。
注:本篇文章以实战为准,理论知识不做过多介绍。
拍照
HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
浏览器兼容性如下:
从上图可以看到,主流浏览器Firefox、Chrome、Safari、Opera等等已经全面支持。
1、获取视频流,并用video标签播放。
<video id="video" autoplay></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拍照、摄像机功能实战》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- OpenCv通过RTSP预览大华摄像机视频
- 游戏制作之路(52)更换摄像机的天空盒
- 各厂AI摄像机引爆智能监控,神仙打架!
- 乐橙 TP2 智能摄像机:抬头保安全,低头守隐私
- 从虚拟世界伸到现实的机械臂,靠摄像机就能玩转任何物体
- 「Flask实战」鱼书项目实战一
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Smashing Book
Jacob Gube、Dmitry Fadeev、Chris Spooner、Darius A Monsef IV、Alessandro Cattaneo、Steven Snell、David Leggett、Andrew Maier、Kayla Knight、Yves Peters、René Schmidt、Smashing Magazine editorial team、Vitaly Friedman、Sven Lennartz / 2009 / $ 29.90 / € 23.90
The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create succes......一起来看看 《The Smashing Book》 这本书的介绍吧!