web是否能够修改手机端调用摄像头弹出来的界面？

Question

现在想用web实现上图的这种效果，我发现直接使用下面的代码是直接跳转系统的图象界面，不知道能不能实现途中的效果。

<input type="file" apture="camera"></input>

Answer 1

这里面的坑是非常可怕的。

主要是用到 MediaDevice.getUserMedia 这个东西。

界面先不说，要注意的是这东西的兼容性非常糟糕，比如：

创建的时候需要传递配置参数，多数情况下你可以按文档中的说法去指定分辨率:

{
    video: {
        width: xxx,
        height: xxx
    }
}

然而，这个写法会导致在 IOS 平台获取不到任何流数据，正确姿势是这样的：

{
    video: true
}

但是很显然，这样就没办法指定你的视频流的分辨率大小，系统想给你怎样的就是怎样的。

然后就是更加坑的第二点：

在文档的兼容性列表中，提到了 Safari Mobile 的最低支持版本为 11，但是我在测试时（四台 IOS 设备，三台 iPhone，一台 iPad，均为 IOS 11）只能在 iPad 上获得流数据，iPhone 上是不行的。

这里面引发了第三点：

这个 API 有个历史兼容的旧版本: navigator.getUserMedia，两个版本的 API 差别大到一个是用 Promise (新版本) 处理而另一个是用 callback (旧版本)，因此你必须在使用前进行 if(navigator.MediaDevices) 来判断是否有新 API 能调用，而问题在于，即便同为 IOS 11，iPhone 上只有旧版本，iPad 上却是新的。

所以，虽然有接口可以让你获得摄像头的流数据，但是感觉兼容性是个硬伤，请多考虑。

另外请多留意文档中提及的兼容性处理库 webrtc-adapter，而这里是个测试接口可用性的页面。

由于我并不是前端开发，因此这个兼容性问题已经折磨得我无法再钻研下去，也许我测试方法或结果有误，有了解这方面情况的朋友还请麻烦指出错误，谢谢！