html5调用摄像头,html调用摄像头拍照
开篇
最近在做一个铬应用的云相机应用，应用包括拍照、摄像、保存照片视频、上传文件等等核心功能，其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的，其一是总结梳理知识点，最重要是希望对有相关需求的读者提供一些指导。
注：本篇文章以实战为准，理论知识不做过多介绍。
拍照
HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等)的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
浏览器兼容性如下：
从上图可以看到，主流浏览器火狐、Chrome、Safari、Opera等等已经全面支持。
1、获取视频流，并用video标签播放。
video id= video 自动播放/video-const video constraints={ width:1366，height: 768 } .const视频节点=文档。查询选择器(“# video”)；让stream=await navigator。媒体设备。getuser media({ audio:true，video:video constraints })；视频节点。src object=stream视频节点。play()；2、多个摄像头设备，如何切换？
//枚举的设备获取所有媒体设备等待导航器。媒体设备。枚举设备()；//通过设备实例国王属性视频输入，过滤获取摄像头设备常量视频设备=媒体设备。过滤器(item=item。kind===视频输入) []；//获取前置摄像头常量视频设备id=视频设备[0].deviceIdconst视频约束={设备id:{ exact:视频设备id }，宽度：1366,高度：768 };让stream=await navigator。媒体设备。getuser media({ audio:true，video:video constraints })；//获取后置摄像头常量视频设备id=视频设备[1].deviceIdconst视频约束={设备id:{ exact:视频设备id }，宽度：1366,高度：768 };让stream=await navigator。媒体设备。getuser media({ audio:true，video:video constraints })；//依次类推.3、拍照保存图片
//通过帆布捕捉录像流，生成base64格式图片const canvas=文档。createelement(“canvas”)；const context=画布。获取上下文(“2d”)；canvas.width=1366 canvas . height=768 context . draw image(video node，0，0，canvas . width，canvas。身高)；下载(画布。toda taurl( image/JPEG )；//下载图片函数下载(src) { if(！src)返回；const a=文档。createelement( a )；a.setAttribute(download ，new Date())；a.href=srca。单击()；}4、关闭摄像头设备
让stream=await navigator。媒体设备。getuser media({ audio:true，video:video constraints })；//3s后关闭摄像头settime out(函数(){ stream。获取曲目().forEach(track=track。stop())；stream=null}，3000)；到此完成简单的相机拍照功能
摄像
摄像基本流程，是录制一段视频流并保存为音视频文件HTML5媒体记录器对象提供了多媒体录音和录视频功能。
浏览器兼容性如下：
从上图所示，浏览器对捕捉音频内容兼容性远不如getUserMedia，目前只有Chrome、Firefox对捕捉音频内容支持较好。
==注意：摄像预览播放器录像标签要设置静音静音（消除回声导致的刺耳噪音)==
const video constraints={宽度：1366，高度：768 }；让stream=await navigator。媒体设备。getuser media({ audio:true，video:video constraints })；let media recorder=新媒体记录器(流)；let mediaRecorderChunks=[]；//记录数据流媒体记录器。在可用数据上=(e)={ mediarecorderchunks。推送(e . data)；};mediaRecorder.onstop=(e)={ //通过一滴对象，创建文件二进制数据实例let recorder file=new Blob(mediaRecorderChunks，{ type :媒体记录器。mime类型})；mediaRecorderChunks=[]；常量文件=新文件([this.recorderFile]，(新日期)。toISOString().替换(/:\。/g，-) .mp4 ，{ type: video/MP4 })；下载(网址。createobjecturl(file))；//下载视频函数下载(src) { if(！src)返回；const a=文档。createelement( a )；a.setAttribute(download ，new Date())；a.href=srca。单击()；} };媒体记录器。stop()；//停止录制，触发onstop事件总结
通过以上实战，相信读者已经掌握基础相机功能，拍照、摄像、保存文件等。由于应用项目非个人项目，源码不公开，有兴趣的朋友，不妨动手一试。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。