如何通过html5调用手机摄像头摄像头拍照

来源：蜘蛛抓取(WebSpider) 时间：2017-07-21 03:14 标签： html5调用手机摄像头

一直接上可以代码参考下：

//这段代 主要是获取摄像头的视频流并显示在Video 签中

//这个是拍照按钮的事件，

//这个是 刷新上 图像的

//实际运用可不写测试代 ， 为单击拍照按钮就獲取了当前图像有其他用途

//获取浏览器页面的画布对象

//在前端截取22位之后的字符串作为图像数据

二.最后的就是接收经过base64编码之后的图像攵件了。

//将base64字符串转换为字节数组

//将字节数组转换为字节流

//将流转回Image用于将PNG 式照片转为jpg，压缩体积以便保存

　　HTML5如何在移动网页端调用手机圖片或者camera可以参考这篇文章：

　　如果你开始基于iOS系统(ios6 above) 的web应用可以考虑这段代码：

　　点击按钮，会调用你的摄像头相册

  1. 采集本地摄像头获取摄像头画面拍照保存，上传服务器；
  2. 前端上传图片处理展示，缩小裁剪，上传服务器
  1. （getUserMedia）/上传图片将图片/视频显示在浏览器上
  2. 拍照/转换 将视頻拍照或是将图片展示在canvas中
  3. 将canvas中的图像，转换成图片格式（png,jpg等）上传到服务器

上述两种方式涉及到的格式转换分别为：
具体获取摄像头的方法可以参考：

File对象也是一个Blob对象二者的处理相同。

转换为Blob对象后可以使用Ajax上传图像文件。

  1. 可以直接转成blob,可以通过canvas.toBlob转换然toBlob方法的浏覽器兼容性不是很好，存在兼容性问题幸运的是已有前人，直接拿来用就好了适用于pc端和移动端

具体过程和相关参考资料：

我要回帖

更多关于 html5调用手机摄像头 的文章

 

随机推荐