移动端H5,拍照,录制视频以及录音功能的调用

什么都不说,先上代码(原创)




  
  
  
  
  
  
  
  调用手机功能
  


调用拍照
调用视频
调用录音

以上的代码,使用的是input标签的type=file的方法

需要浏览器支持FileReader,兼容方面可能稍微有些小问题,比如某些浏览器无法调用摄像头只能从文件选择,比如有些只能拍照而无法进行文件选择

简单的说明下上面代码的原理。

1)点击拍照按钮(其他两个按钮也是一样的)之后,为页面添加一个隐藏的input标签,type=file,并且立刻触发click,调起拍照(或者另外两个)功能

2)不管是拍照还是从文件选择,完成之后都会触发input的change事件

3)change事件回调里可以取得文件,对文件判断类型的判断,通过FileReader的readAsDataUrl方法,将文件读取为base64数据

4)readAsDataUrl方法并不会返回读取结果,这一结果存储在 result属性中(onload回调中可用),在onload回调中,将数据获取到并放入img标签内的src属性中


你可能感兴趣的:(个人笔记)