资讯专栏INFORMATION COLUMN

HTML5调用手机前置摄像头或后置摄像头拍照,canvas显示,经过Android测试

ygyooo / 1167人阅读

摘要:注意,以上需要在下访问方可正常工作查看在线,如果使用微信访问可能被屏蔽,微信打开链接后点击右下角访问原网页如需本地测试请使用插件使用方法勾选下即可使用调用摄像头拍照可以参考补充下,获取的实际尺寸,可以通过,获取。

HTML5可以通过调用navigator.getUserMedia来获取手机设备摄像头,兼容性写法如下

window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容。新的API更替为MediaDevices.getUserMedia。MediaDevices.getUserMedia可以通过video的facingMode属性指定调用手机的前置或后置摄像头
video:{ "facingMode": "user" }//调用前置摄像头
video: { facingMode: { exact: "environment" } }//后置

具体代码:




    
    
    Document1
    
    


    

开启摄像头

显示到Canvas

关闭摄像头

以上代码并没有进行太多的错误处理,比如用户拒绝授权访问摄像头或浏览器不支持等情况,生产环境使用需添加错误处理代码

以上代码在PC端和Android手机端和微信测试通过,IOS下浏览器均不支持,据说IOS11会开放权限。
注意,以上HTML需要在HTTPS下访问方可正常工作
查看在线DEMO,如果使用微信访问可能被屏蔽,微信打开链接后点击右下角“访问原网页”
如需本地测试请使用Chrome插件:web-server;
webserver使用方法:chrome://apps > web-server > choose folder 勾选 Show Advanced Settings下Set CORS Headers即可
使用input type=”file”调用摄像头拍照可以参考camera API

补充下,获取vedio的实际尺寸,可以通过:this.videoWidth,this.videoHeight获取。

HTML5之drawImage函数

可用函数

drawImage(image, x, y) //按原图片大小绘制。
drawImage(image, x, y, width, height) //按指定大小绘制。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, 
destX, destY, destWidth, destHeight) //常用于图片裁剪

参数

image:所要绘制的图像。这必须是表示  标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素。 
x和y:图片在文档中的坐标位置。 
width和height:图片的宽高。 
对于drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, 
destX, destY, destWidth, destHeight) 常用有图片的裁剪。其参数含义是原来image上从某一个位置开始(sourceX,sourceY),指定长宽进行剪切(sourceX,sourceY),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上,当然裁剪后的会覆盖原来的图片。




    
    drawImage


    
    


除此之外,drawImage()还可以画video,参考链接

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/57361.html

相关文章

  • getUserMedia API及HTML5 调用手机像头拍照

    摘要:失败回调函数的参数,可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

    xiaokai 评论0 收藏0
  • getUserMedia API及HTML5 调用手机像头拍照

    摘要:失败回调函数的参数,可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

    李增田 评论0 收藏0
  • getUserMedia API及HTML5 调用手机像头拍照

    摘要:失败回调函数的参数,可能的异常有硬件问题用户拒绝了当前的浏览器实例的访问请求或者用户拒绝了当前会话的访问或者用户在全局范围内拒绝了所有媒体访问请求。 getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserM...

    ivyzhang 评论0 收藏0
  • 原来这样就可以开发出一个百万量级的Android相机

    摘要:通过可以将和连接起来,当和连接后,获得的预览帧数据就可以通过显示在屏幕上了。预览帧数据传递给,实现预览图像的显示。这里预览帧数据对应的预览图像暂且称作相机预览图像。拍摄帧数据可以生成位图文件,最终保存成或者等格式的图片。欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ空间开发团队发表于云+社区专栏 最近我负责开发了一个跟Android相机有关的需求,新功能允许用户使...

    sorra 评论0 收藏0
  • 原来这样就可以开发出一个百万量级的Android相机

    摘要:通过可以将和连接起来,当和连接后,获得的预览帧数据就可以通过显示在屏幕上了。预览帧数据传递给,实现预览图像的显示。这里预览帧数据对应的预览图像暂且称作相机预览图像。拍摄帧数据可以生成位图文件,最终保存成或者等格式的图片。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ空间开发团队发表于云+社区专栏 最近我负责开发了一个跟Android相机有关的需求,新功能允许...

    darry 评论0 收藏0

发表评论

0条评论

ygyooo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<