VR Sync API: Creating a VR Sync Remote

To create your own application that controls the VR Sync session, you can create an Admin client. Similar to the previous quickstart guide, this guide will explain the steps to establish a connection and perform simple commands. 


Setting up a connection

Once our client application has initialized and is ready for playback, the connection to the VR Sync Server can be established. In our case, we have a VR Sync Box. So we can install Socket.io for our development environment and establish a connection to 172.28.1.9, using port 7327.

this.socket = io("http://172.28.1.9:7327", {
    transports: ["websocket"]
});
this.socket.on("connect", () => { this.onConnect(); });
this.socket.on("disconnect", (reason) => { this.onDisconnect(reason); });
this.socket.on("message", (message) => { this.messageReceived(message); });
this.socket.open();


Keeping the connection alive

In order to keep a connection with the server, our admin application needs to send some status update messages. These messages are called Ping messages.

onConnect() {
   this.ping();
   this.pingInterval = setInterval(this.ping.bind(this), 3000);
}
ping() {
    const ping = {
        type: "Ping",
        sender: "Admin",
        licenseCode: "abcdefghijklmnopqrstuvwxyz",
        protocolVersion: 2,
        sentUnixTimestampMs: 1721807772071
    };
    this.socket.emit("message", ping);
    this.emit(Events.PingSent, ping);
}

Not sending the ping within at least a 5 second interval can result in a disconnect.

Note the ping licenseCode. Admin messages should always include the license code. The license code can be found in the user’s licenses page.


Sending commands

To start our VR Sync video playlist, we can send a simple playlist command to our server. Similar to the client quickstart, a play message always contains a playlist. Which can be empty (stop), single media (play command) or multiple media (playlist command).

onPlayVideoClicked(mediaType, mediaId) {
    const command = {
        type: "Command",
        sender: "Admin",
        licenseCode: "abcdefghijklmnopqrstuvwxyz",
        protocolVersion: 2,
        sentUnixTimestampMs: 1721807772071,
        currentTime: 0,
        playlist: [{
            // "LocalVideo", "CloudVideo", "LocalImage", "CloudImage",
            type: "localvideo",
            // The cloud content id, or local preloaded numbered prefix
            identifier: "1",
            // The duration of the media file
            durationInMs: 45000,
            // How much time the device(s) get to buffer the video. A higher number means more accuracy at the cost of waiting time. The server defaults to 5 seconds if this value is omitted.
            playDelayMs: 5000
        }],
        loop: false,
        // Can be ["all"] or a list of device IDs
        deviceUIDs: ["all"]
    };
    this.socket.emit("message", command);
}
onStopClicked() {
    const command = {
        type: "Command",
        sender: "Admin",
        licenseCode: "abcdefghijklmnopqrstuvwxyz",
        protocolVersion: 2,
        sentUnixTimestampMs: 1721807772071,
        currentTime: 0,
        playlist: [],
        loop: false,
        deviceUIDs: ["all"]
    };
    this.socket.emit("message", command);
}
onPauseClicked() {
    const command = {
        type: "PauseResume",
        sender: "Admin",
        licenseCode: "abcdefghijklmnopqrstuvwxyz",
        protocolVersion: 2,
        sentUnixTimestampMs: 1721807772071,
        paused: true,
        deviceUIDs: ["all"]
    };
    this.socket.emit("message", command);
}
onResumeClicked() {
    const command = {
        type: "PauseResume",
        sender: "Admin",
        licenseCode: "abcdefghijklmnopqrstuvwxyz",
        protocolVersion: 2,
        sentUnixTimestampMs: 1721807772071,
        paused: false,
        deviceUIDs: ["all"]
    };
    this.socket.emit("message", command);
}


What’s next

Now that you understand the basics, read the API documentation to understand the more advanced concepts, such as sending media status, text messages, calibration messages, managing groups and more.


Related

VR Sync API: Creating a VR Sync Client Read

VR Sync API: Introduction Read

VR Sync API: Documentation Read