问题
ar.js在使用过程中, 一定会遇到的一个问题就是: 首次打开页面不能自动全屏. 这样是比较影响使用体验的.
官方示例中, 使用的是定时任务来获取摄像头的像素信息, 然后再调整显示范围
|
|
上面的代码显示的是, 页面加载2秒后再调整视频显示区域的大小. 但是为什么不能直接打开的时候就全屏呢?
其实在源码中可以看到, 在用户同意摄像头权限之后, 就会调用onResize方法, 但是此时摄像头的视频信息还没有完全就位, 获取不到尺寸信息, 自然也就不能生效.
|
|
于是官方示例增加了延迟2秒再执行一次的黑科技😂来实现功能, 但效果十分的差强人意 .
其实解决方法也很简单, 浏览器已经为我们准备好了这样的一个事件.
解决方法
我们可以监听Video DOM的loadedmetadata事件, 此时就能获取到video元素的尺寸信息, 可以实现自动全屏的效果:
|
|