javascript - how to use mp4 videos as an external textures in Facebook AR studio? - Stack Overflow

admin管理员组

文章数量:1421009

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

Share Improve this question Follow edited Oct 20, 2018 at 6:51 Subbu asked Oct 19, 2018 at 11:36 SubbuSubbu 66322 gold badges99 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/

本文标签： javascripthow to use mp4 videos as an external textures in Facebook AR studioStack Overflow