通过H5唤起摄像头前后置转换问题

navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

getUserMedia的适配问题暂且不提,只关心如何更换前后置摄像头问题。
其实官方已经给出了一个最简单的方法,只需要配置facingMode参数即可,user为前置,environment为后置

navigator.mediaDevices.getUserMedia({video:{facingMode:'user/environment'}})

在这里插入图片描述
在这里插入图片描述
具体参考链接

当然事情往往不会随着心愿发展,虽然该方法确实可以实现摄像头的选择,但是在兼容性方面确定差了很多,例如该参数即使在安卓上,Chrome for Android也得59版本以上,更别提IOS上的各种问题了。

当然如果系统不能选择,我们是否可以自主选择呢,当然可以,虽然也有限制

navigator.mediaDevices.enumerateDevices().then(gotDevices);

在这里插入图片描述
在这里插入图片描述
具体参考链接

我们可以通过enumerateDevices来获取摄像头和麦克风,其中kind为videoinput的,就是摄像头的设备了,一般应该会有两个,前置和后置,然后我们可以通过deviceId来设置使用的摄像头

navigator.mediaDevices.getUserMedia({video:{deviceId:'实际id'}})

但实际情况下,你并不清楚的知道那个设备时前置,那个设备是后置,通常情况下,应该是最后一个deviceId是后置。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章