AR.JS扫描标识播放视频


AR.JS扫描标识播放视频

  • 前言
    • mark标识
    • 图片标识
    • 通用事件

前言

现在我了解的AR.js扫描有两种 一种是mark标识 一种是图片标识
mark标识是一种方形的图片，有黑色的边框 最小为图片的十分之一
也不知道算不算优点的一方面是在微信打开时播放视频是用的微信的播放器 默认全屏播放不会卡
图片标识就是使用一张图片作为标识，好处是比例随意，长方形，正方形，随意的图片都可以。算是缺点的地方是这个在微信打开时他会将播放器隐藏，然后将其渲染到模型上，就会很卡。

mark标识

生成链接

这个上传图片 然后选择黑框比例即可 最小比例为9:1

这个需要修改的部分在AR.js的源码里的patternRatio 其默认为0.5，将其修改为0.9即可识别0.9尺寸的Mark标识

然后 如果想要识别对应的标识展示不同的视频的话 需要在arController.addEventListener这个函数内的if( event.data.marker.idPatt === artoolkitMarkerId ) 里添加判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 定义视频路径
let videourl = "";
// 获取到标识名称
var list = _this.parameters.patternUrl.split("/")
list = list[list.length - 1].split(".")[0]
//获取video
var video = document.getElementById("video")
if(list == "pattern-trex"){<!-- -->
    if (video.src == "" || video.src != (videourl+"qiu.mp4")) {<!-- -->
        video.pause();
        video.src = videourl+"qiu.mp4"
        video.currentSrc = videourl+"qiu.mp4"
        video.play()
    } else {<!-- -->
        video.play()
    }
}else if(...){<!-- -->......}

注意：源码里直接在if( event.data.marker.idPatt === artoolkitMarkerId ) 判断后面执行了一句话，没有{}，需要自己添加。

图片标识

生成链接
图片标识按照官方的说法是最好使用他们提供的node文件在本地生成，可是我下载后使用时疯狂报错，所以现在只能使用网上链接进行生成。（说是如果想要生成的图片标识宽或高大于1000像素的话需要较长的生成时间，这种方式的标识生成时间无论大小都比Mark标识的长

这里需要修改的地方主要在aframe-ar-nft.js文件里的ARjs.MarkerControls.prototype.updateWithModelViewMatrix函数里 直接在里面写就可以。
主要要写的代码和上面的基本没区别，主要的区别在于标识名的获取

1
2
3
4
markerObject3D.visible = true
// 获取到当前标识名称
let list = this.parameters.descriptorsUrl.split("/");
list = list[list.length - 1];

markerObject3D.visible = true这句话就是展示模型用的，这个事件大概是0.02秒执行一次 疯狂循环。
在其他函数内的**if (ev && ev.data && ev.data.type === ‘found’)**这个判断里 如果成立就会执行上面这个函数调用展示模型。else就断掉了，如果有需求是扫描到就播放，挪开就停止的话就需要else里添加视频停止事件。

通用事件

在微信内播放时会有一个问题，微信内是无法自动播放视频的，需要进行点击。这时就需要添加一张提示播放的按钮图，不然就会展示一个纯黑的模型。
这个先不细说了，脑壳痛，有人要就再说吧。