Blackbox-javascript-sdk NPM

Blackbox javascript SDK

Blackbox SDK for JavaScript includes a library of events that can be used to communicate with a Blackbox 3d-room.

Installation

Use npm package manager

npm install blackbox-javascript-sdk

Or directly in your browser For the latest version use:

<script src="//unpkg.com/blackbox-javascript-sdk/dist/blackbox-javascript-sdk.min.js"><script>

Or a specific version:

<script src="//unpkg.com/blackbox-javascript-sdk@version/dist/blackbox-javascript-sdk.min.js"><script>

Basic usage

Attach the blackbox sdk to your current window.

Blackbox.init();

Blackbox.subject.subscribe((event) => {
    if (event instanceof PongEvent) {
        alert('Received pong event!')
        return
    }
});

Send a ping request to test if your integration works.

Blackbox.post(new PingEvent())

You should now get a prompt saying 'Received pong event!'

Usage with vanilla JS via a CDN.

When included via a CDN you will have to prefix the blackbox instance with 'blackbox.':

var instance = blackbox.Blackbox;
instance.init();

instance.subject.subscribe(function(event) {
    if (event.channel == 'pong') {
        alert('Received pong event!')
        return
    }
})

instance.post(new blackbox.PingEvent())

Attach to iframe

To use the SDK with an embedded blackbox iframe you can initialize the SDK with a reference to the iframe element.

<html>
<head>
  <title>iframe example</title>
</head>
<body>
  <iframe id="iframe-element" src="http://your-blackbox-url/embed"></iframe>
</body>
</html>

const iframe = document.getElementById('iframe-element');
Blackbox.init(iframe);
...

List available elements

Request a list of elements in the room. An array of element types can be passed to the request. The available element type can be found in ElementType.ts

Blackbox.init();

Blackbox.post(new ElementListRequest());

Blackbox.subject.subscribe((event) => {
    if (event instanceof ElementListResponse) {
        // List all elements in the console.
        console.log(event.elements)
        return
    }
});

With filter

Blackbox.init();

// Only request all video elements in the room.
Blackbox.post(new ElementListRequest([
    ElementType.Video
]));

Blackbox.subject.subscribe((event) => {
    if (event instanceof ElementListResponse) {
        // List the filtered elements in the console.
        console.log(event.elements)
        return
    }
});

Available events

Event	Description	Parameters
ElementChangeTextEvent	Set the text of a text element	`element_id: string, text: string`
ElementListRequestEvent	Request a list of available elements in a room	`filter: enum ElementType`
ElementListResponseEvent	Return all available elements in a room.	`elements: Array<RoomElement>`
ElementMuteEvent	Mute or un-mute an element.	`element_id: string, state: boolean`
ElementPositionEvent	Set the position of an element.	`element_id: string, x: number, y:number, z: number, tween: boolean, tween_duration: number`
ElementRotateEvent	Set the rotation of an element.	`element_id: string, x: number, y:number, z: number, tween: boolean, tween_duration: number`
ElementScaleEvent	Set the scaling factor of an element.	`element_id: string, x: number, y:number, z: number, tween: boolean, tween_duration: number`
ElementVisibilityEvent	Set the visibility of an element.	`element_id: string, state: boolean`
MuteMasterEvent	Mute or un-mute the whole room.	`excluded_element: string, state: boolean`
PingEvent	Event used to check communication between the windows.	`-`
PongEvent	Event used to check communication between the windows	`-`
PlayEvent	Set the play or pause state of the current room.	`state: boolean, proximity: boolean`
ViewPointSelectEvent	Set the active viewpoint.	`view_point_id: number`
VolumeEvent	Set the volume of the current room.	`volume: number`

rxjs

@everything-registry/sub-chunk-1242

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago