how to use mp4 videos as an external textures in Facebook AR studio?

Question

I'm working on Facebook Spark Studio for the first time.

I wanted to do a marker based AR, like I usually do with Vuforia.

I wanted to play a mp4 video by scanning the a marker.

I read the Facebook AR studio docs, where they are supporting png and jpg file formats only.

Ref: https://developers.facebook.com/docs/ar-studio/before-you-start/file-formats

Are there any playback controls for external video texture?

Can any one help me to play a video on scanning a tracker?

Answer 1

We had the same issue. The trick (or Facebook bug) is to set the url in the editor in the material with the link to your video. Then in your code do this:

const Scene = require('Scene');
const Animation = require('Animation');
const Materials = require('Materials');
const Textures = require('Textures');
const D = require('Diagnostics');
const Audio = require('Audio');

const animRoot = Scene.root.find('animRoot');
const planeTracker = Scene.root.find('planeTracker');
const targetMat = Materials.get('targetMat');
const externalText = Textures.get('externalAnimation');
const playbackController = Audio.getPlaybackController('playback_controller_model0');

planeTracker.confidence.eq('HIGH').onOn({fireOnInitialValue: true}).subscribe(function(e) {

    playbackController.play();

    externalText.url = '';

    externalText.url = 'https://urlToYourVideo.mp4';

    D.log('Tracking starts');
});

planeTracker.confidence.eq('HIGH').onOff({fireOnInitialValue: true}).subscribe(function(e) {

    playbackController.stop();

    externalText.url = '';

    D.log('Tracking stops');
});

Hope this helps!