前言

现在我了解的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 ) 里添加判断

// 定义视频路径
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函数里直接在里面写就可以。
主要要写的代码和上面的基本没区别，主要的区别在于标识名的获取

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里添加视频停止事件。

通用事件

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

AR.JS扫描标识播放视频相关推荐

示例：使用 Flv.js 和 Reflv 播放视频
1.背景传统的播放视频是采用 flash 播放器方式,然而各大浏览器厂商都不再支持flash , 我们不得不寻找其他解决方案. 2.说明 2.1 Flv.js flv.js 是一个HTML5 Fla ...
使用 Flv.js 和 Reflv 播放视频
1.背景传统的播放视频是采用 flash 播放器方式,然而各大浏览器厂商都不再支持flash , 我们不得不寻找其他解决方案. 2.说明 2.1 Flv.js flv.js 是一个HTML5 Fla ...
高通|AR扫描图片播放视频
片: apk包:http://pan.baidu.com/s/1eQxylcI
Android中WebView使用6，js调java实现播放视频
效果图项目结构: 核心代码: JsCallJavaVideoActivity中 package com.zhh.android;import android.app.Activity; import ...
ar.js 追踪图片mark播放视频，并且根据是否识别控制视频播放操作
首先完成了视频纹理的加载,可以持续的播放视频其次完善了视频播放感受,清除跳跃.跳帧.抖动.每次识别重新播放等现象,不错的感受,可以达到商业效果. 最后,通过通读ar.js代码,终于找到了通过识别进行 ...
html iframe视频自动播放的属性,iframe通用js播放器myplayer.js加自动播放参数
我的播放器调用方式,通用js播放器myplayer.js打开自动播放&后面的多余参数藐视不受影响. iframe可用于通用视频地址,.MP4去掉所有尾巴 &参数最终自动播放mypla ...
canvas+howler.js 解决同页面视频、音频同时播放问题
canvas+howler.js 解决同页面视频.音频同时播放问题参考文章: (1)canvas+howler.js 解决同页面视频.音频同时播放问题 (2)https://www.cnblogs. ...
flv.js播放视频时遇到的问题
文章目录前言一.报错二.原因三.方案前言 rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流,并通过flv.js在页面播放,带有音频的流出现播放不了问 ...
JS自动播放视频脚本
JS自动播放视频脚本: var n = 0,j=0; setInterval(function () {var video = document.querySelector("#J_pris ...

AR.JS扫描标识播放视频

AR.JS扫描标识播放视频

前言

mark标识

图片标识

通用事件

AR.JS扫描标识播放视频相关推荐

最新文章

热门文章