WebAR小程序xr-frame识别追踪播放视频

WebAR小程序xr-frame识别追踪播放视频

接上一篇 [初识xr-frame识别追踪渲染3D模型]https://blog.csdn.net/wujianar/article/details/130306825

xr-frame的发布已经有一段时间了，功能及兼容性也提升了不了，前段时间用xrframe播放视频时，遇到不少问题，如没有暂定/继续播放，不能播放声音的问题，现在已经解决了。
本文介绍云识别结合xrframe的marker追踪来播放视频。
内置AR系统支持，AR追踪器ARTracker是AR系统的一部分，提供了一种非常简单的方式，在特定的识别模式下识别出图像或者物体，对其进行跟随。
云识别的使用方法请查看：https://developer.wujianar.com/iss/search.html。

1. 云识别配置

使用无间科技的开发中心创建一个云识别库，上传识别图与配置关联信息，本次开发用到的如下：

识别图：

关联信息：

{"videoUrl":"https://wujianar-cdn.oss-cn-hangzhou.aliyuncs.com/ardemo/videos/2.mp4"}

下载地址：https://gitee.com/wujianar/wujianar-wx-mini-sample

在云别库中的图库密钥中选择客户端密钥，选择一个有效期，并把生成的Token复制下来，云识别需要用这个来认证，替换app.ts中的Token就行。

2. 小程序开发配置

将域名 iss-api.wujianar.cn　加入到request合法域名中，及将 wjasset.oss-cn-hangzhou.aliyuncs.com　加入到downloadFile合法域名中。在开发的时候也可以勾选不检测域名。

3. wxml文件

xr-video/index.wxml

<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:tick="handleTick">
    <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
        <xr-asset-load wx:if="{{assetId != ''}}" type="video-texture" asset-id="{{assetId}}" options="loop:true,autoPlay:false,abortAudio:false" src="{{videoUrl}}" />
        <xr-asset-material wx:if="{{assetId != ''}}" asset-id="mat" effect="simple" uniforms="u_baseColorMap: video-{{assetId}}" />
    </xr-assets>
    <xr-node>
        <xr-ar-tracker wx:if="{{isLoaded}}" mode="Marker" src="{{markerUrl}}" id="arTracker" bind:ar-tracker-switch="handleTrackerSwitch">
            <xr-mesh wx:if="{{isLoaded}}" node-id="mesh-plane" geometry="plane" material="mat" scale="1 1 {{videoHeight}}" />
        </xr-ar-tracker>
        <xr-camera id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
    </xr-node>
    <xr-shadow id="shadow-root"></xr-shadow>
    <xr-node node-id="lights">
        <xr-light type="ambient" color="1 1 1" intensity="1" />
        <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
    </xr-node>
</xr-scene>

4. ts文件（不完整，请下载sample查看完成代码）

xr-video/index.ts

云识别部分

# 获取场景的内容，发送到云识别服务识别
const base64 = this.scene.share.captureToDataURL({ type: 'type', quality: 0.7 });
wuJianAR.search({ image: base64.split('base64,').pop() }).then(msg => {
    console.info(msg);

    // code为200时识别到目标，非200时为未识别到目标
    if (msg.code !== 200) {
        wx.showToast({ title: `未识别到目标`, icon: 'none', duration: 1000 });
        return;
    }

    this.triggerEvent('searchSuccess', msg.data, {});
    wx.showToast({ title: `识别到目标：${msg.data.name}`, icon: 'none', duration: 1000 });

    this.showVideo(msg.data);
}).catch(err => {
    console.warn(err);
});

加载视频部分

showVideo: async function (data: any) {
    let brief: VideoSetting;
    try {
        brief = JSON.parse(data.brief);
    } catch (e) {
        console.error(e);
        wx.showModal({
            title: '提示',
            content: '解析关联数据错误',
            showCancel: false,
        });
        return;
    }

    this.setData({
        assetId: data.uuid,
        markerUrl: data.image,
        videoUrl: brief.videoUrl,
    });
    wx.showLoading({ title: '视频加载中' });
},

视频加载完成，加入追踪

handleAssetsLoaded: function () {
    wx.hideLoading();

    const asset = this.scene.assets.getAsset('video-texture', this.data.assetId);
    if (!asset) {
        wx.showToast({
            icon: 'error',
            title: '视频播放失败', // xr-frame的问题，有一定概率播放失败
        });
        console.warn('not found video');
        return;
    }

    this.setData({ videoHeight: asset.height / asset.width, isLoaded: true });
    this.scene.assets.getAsset('video-texture', this.data.assetId)?.play();
    wx.showToast({
        icon: 'none',
        title: '请将相机对着识别图',
    });
}

丢失目标与发现目标，暂停与断续播放视频

handleTrackerSwitch: function (e: any) {
    try {
        const video = this.scene.assets.getAsset('video-texture', this.data.assetId);
        e.detail.value ? video?.resume() : video?.pause();
    } catch (e) {
        console.warn(e);
    }
},

5. 需要注意的地方

使用Nightly版本的工具

xr-frame目前仍然是是Beta版本，需要Nightly版本的工具，特定客户端（8.0.29以上）和基础库（2.28.1以上），更多限制请见限制和展望。

xr-model/index.json文件中要设置xr-frame，不然是不会加载xr-frame引擎的。

{
  "component": true,
  "renderer": "xr-frame"
}

miniprogram/app.json文件是增加一条 “lazyCodeLoading”: “requiredComponents”，如

{
    "pages": [
        "pages/index/index",
        "pages/xr-model/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "无间WebAR 微信小程序Sample",
        "navigationBarTextStyle": "black"
    },
    "lazyCodeLoading": "requiredComponents",
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "useExtendedLib": {
        "weui": true
    }
}
｀｀｀

## 6. 最终效果

sample下载　https://gitee.com/wujianar/wujianar-wx-mini-sample