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:

Are there any playback controls for external video texture?

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

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./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?

• javascript
• spark-ar-studio

2 Answers 2

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!

You can do that using an "External Texture" by linking a video texture that is hosted online.

1. Create a material
2. Under the material diffuse texture property choose "New External Texture"
3. In the texture properties enter the URL for your video into the URL field

To use a tracker, look at the documentation for the PlaneTracker object: https://developers.facebook./docs/ar-studio/docs/plane-tracker/