HTML5如何调用手机后置摄像头和实现拍照上传功能
你想知道HTML5怎么调用手机的后置摄像头吗？其实，这个功能在新版Chrome浏览器（30版本以上安卓）已经支持啦！通过getUserMedia接口，开发者可以直接访问手机后置摄像头，轻松拍照上传。比如下面的代码就能快速实现：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script>
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
// 这里处理摄像头视频流
})
.catch(function(err) {
console.error("摄像头调用失败: ", err);
});
</script>
别小看这段代码，它利用了HTML5的Media Capture API，这可不是简简单单的调用，而是实现了稍微高级点的实时视频流访问，你甚至可以在网页上直接显示，真的超级方便！
而且，不止是拍照，很多手机微博和社交App就是这么实现用户在网页端直接拍照并上传的。只要浏览器支持，HTML5就能做到这一点，真是太神奇了。
HTML5开发App的可能性有哪些 怎么实现手机网页调用原生功能
很多小伙伴都会问：HTML能不能开发App，怎么做到调用手机原生功能呢？答案是：虽然HTML本身是网页语言，但结合一些插件和扩展，确实可以做成伪原生App，甚至访问摄像头、陀螺仪等硬件。例如：
-
HTML5+规范扩展：像W3C和中国的相关指导标准，推出了HTML5+，可以用JavaScript调用系统硬件，比如摄像头用
plus.camera，陀螺仪数据用plus.device，二维码扫描用plus.barcode。 -
使用类似于百度地图这样的案例，你用短信打开URL，能跳转到网页并自动开启地图App，这背后就是微信开放平台的API支持，用JS就能间接调用原生功能。
-
当然，虽然这些方式很酷，但现在还有不少限制，比如微信内置浏览器对支付或某些功能支持比较特殊，单纯用HTML5直接实现所有功能还是有点挑战。
-
但说实话，结合微信H5技术或者用cordova、uni-app等混合开发框架，HTML5做App已经越来越给力了，咱们就可以在网页里弄点酷炫的原生体验啦！
相关问题解答
-
HTML5调用摄像头需要哪些浏览器支持？
嘿，想拍个照啥的，最重要的是浏览器得支持getUserMedia接口，现在主流的Chrome和Opera浏览器都支持，尤其是安卓Chrome 30以上。其他浏览器可能支持得不太完美，没准也有点卡顿啥的，得看具体型号哦。 -
用HTML5开发的App能完全取代原生App吗？
说实在的，短时间内嘛，还不能完全取代，虽然你可以调用摄像头、陀螺仪啥的，但有些深度系统功能，安全权限都比较高，网页是不太能直接拿下的。不过用它做轻量级应用或快速上线真的超级实惠！ -
HTML5如何实现网页上直接拍照并上传？
这很有趣，基本流程是先调用getUserMedia拿到视频流，然后把拍的照片转成图片格式，再通过Ajax或者表单上传服务器，这样用户就能边拍边上传，体验顺滑得不得了！ -
微信内置浏览器支持用HTML5调用摄像头吗？
微信内置浏览器嘛，支持度有点复杂，有时候能调用，有时候不给力，尤其在微信支付或者一些高级API上有很多限制。不过，好消息是微信官方开放平台API经常更新，慢慢支持会越来越好，所以咱们继续期待吧！
新增评论