Please enable Javascript to view the contents

AR.js中不能自动全屏的问题

 ·  ☕ 1 分钟

问题

ar.js在使用过程中, 一定会遇到的一个问题就是: 首次打开页面不能自动全屏. 这样是比较影响使用体验的.

官方示例中, 使用的是定时任务来获取摄像头的像素信息, 然后再调整显示范围

1
2
3
4
5
arToolkitSource.init(function onReady(){
        setTimeout(() => {
            onResize()
        }, 2000);
	})

上面的代码显示的是, 页面加载2秒后再调整视频显示区域的大小. 但是为什么不能直接打开的时候就全屏呢?

其实在源码中可以看到, 在用户同意摄像头权限之后, 就会调用onResize方法, 但是此时摄像头的视频信息还没有完全就位, 获取不到尺寸信息, 自然也就不能生效.

1
2
3
4
5
6
 navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
           ...
            onReady(); // 这里调用了上面的onResize()方法
        }).catch(function (error) {
          ...
        });

于是官方示例增加了延迟2秒再执行一次的黑科技😂来实现功能, 但效果十分的差强人意 .

其实解决方法也很简单, 浏览器已经为我们准备好了这样的一个事件.

解决方法

我们可以监听Video DOM的loadedmetadata事件, 此时就能获取到video元素的尺寸信息, 可以实现自动全屏的效果:

1
2
3
4
   arToolkitSource.init(function onReady(){
        arToolkitSource.domElement.addEventListener('loadedmetadata',
            ()=>{onResize()})
    })
分享

三排三号
作者
三排三号
Backend Programmer