JavaScript
MagicLeap
MagicScript

Magic Leap MagicScript Landscape Application. VideoNode

Prepare

Magic Leap One

https://www.magicleap.com/magic-leap-one

mlsdk v.0.20.0

https://creator.magicleap.com/downloads/lumin-sdk/overview

magic-script-cli v2.0.1

https://www.npmjs.com/package/magic-script-cli

magic-script-polyfills v2.2.0

https://www.npmjs.com/package/magic-script-polyfills

Create Project

magic-script init my-video org.magicscript.video "Video"

cd my-video

Code

Change app.js

import { 

LandscapeApp
, ui
, VideoEventType
, VideoEventData} from 'lumin';
const {
UiLinearLayout
, UiButton
, Alignment } = ui;

export class App extends LandscapeApp {

init() {
this._prism = null;
return 0;
}

onAppStart () {
const prism = this.requestNewPrism([1.0, 1.2, 1.0]);
const layout = UiLinearLayout.Create(prism);
layout.setAlignment(Alignment.CENTER_CENTER);

const video = prism.createVideoNode();
video.setLooping(1);
const button = UiButton.Create(prism, 'PLAY!', 0, 0.1);
button.setEnabled(false);
button.onActivateSub(function (uiEventData) {
if (!video.isPlaying())
{
video.start();
button.setText("STOP");
}
else
{
video.pause();
button.setText("PLAY");
}
});

prism.onEvent = function(event)
{
if (event instanceof VideoEventData)
{
if (event.getVideoEventType() === VideoEventType.kPrepared)
{
button.setEnabled(true);
}
}
return true;
}

// https://mixkit.co/
// https://mixkit.co/videos/city/56/
video.setVideoUri("https://assets.mixkit.co/videos/56/56-720.mp4");

layout.addItem(video
, [0.01, 0.01, 0.01, 0.01]
, Alignment.TOP_CENTER);
layout.addItem(button
, [0.01, 0.01, 0.01, 0.01]
, Alignment.CENTER_CENTER);
prism.getRootNode().addChild(layout);
this._prism = prism;
}

eventListener(event) {
if (this._prism.onEvent)
{
this._prism.onEvent(event);
}
return true;
}
}

Change manifest.xml

<manifest xmlns:ml="magicleap"

ml:package="org.magicscript.video"
ml:version_name="0.0.1"
ml:version_code="1">
<application ml:visible_name="Video"
ml:application_type="untrusted"
ml:sdk_version="1.0">
<component ml:name=".universe"
ml:visible_name="Video"
ml:binary_name="bin/index.js"
ml:type="Universe">
<mode ml:shareable="true"/>
<icon ml:model_folder=""
ml:portal_folder=""/>
</component>
<uses-privilege ml:name="MagicScript"/>
<uses-privilege ml:name="Internet"/>
</application>
</manifest>

Build

magic-script build -i

Run

magic-script run --port=10000

Reference

VideoNode(Magic Script API Doc)

https://docs.magicscript.org/lumin.VideoNode.html

magicscript

https://www.magicscript.org/

Thanks!