Web - TypeScript/React

Overview

Follow this step-by-step tutorial to implement the video playback Synchronization SDK.

While the client-side SDK will take care of most of the functionality, in order to make this sample application work, you will need to use the API_KEY provided to you.

Code samples Demo application API Documentation

Requirements

• A Sceenic account

• Code Editor( WebStorm, VS Code)

• Access key for sync SDK.

• Node >= 8.10 and npm >= 5.6

Authentication

An Access Token is needed in order to allow a client to connect to a sync group.

Note: It is important that the client application does not request an Access Token directly from the frontend. By doing that you risk exposing the API_TOKEN and API_SECRET.

Acquiring an Access Token

cUrl(Bash)

curl -iL --request GET --url https://YOUR_CAS_URL/sync/token --header 'auth-api-key: API_KEY'   --header 'auth-api-secret: API_SECRET'

The Access Token is a JWT token - more about jwt you can read - here.

A successful response will look like that:

{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
}

You can get your API_KEY and API_SECRET in your private area, here.

Note: Every Sync Token corresponds to one specific sync group only. To allow two different clients to connect to the same group, the clients need to use the same Access Token.

Going to production

When moving from the Sandbox environment to production you will need to implement your own authentication server. This server will supply the various clients (Web, Android, and iOS) with a valid Access Token so that they can use the service.

For that you will need:

• API_KEY, and API_SECRET - can be retrieved in your private area once you login
• Your own working authentication server

Create a project

To create a project we recommended using the following stack: React + TypeScript + SyncSDK.

• Create an empty React + Typescript project

npx create-react-app my-app --template typescript  

Add the sync SDK library to your project

• Create .npmrc file. In the project’s root folder

• Put your Access Token inside //registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN.

• Install Sync SDK via npm i @sscale/syncsdk.

For more information on NPM installation look here.

Basic setup

• Add the following import

import { SyncSdk, PlayerDecorator } from '@sscale/syncsdk';

• Create player instance (it is possible to use a simple HTML player)

<video width="960" height="540" id='player'></video>

• Create Sync SDK instance

const syncInstance = new SyncSDK()

• Connect to group or create new

 syncInstance.createGroup(JWT_ACCESS_TOKEN, clientName)
             .then(() => {})
             .catch(e => {});

• Implement player decorator by extending PlayerDecorator and implementing required methods. PlayerDecorator example implementation for different players can be found here. Check API of PlayerDecorator here.

class HtmlVideoClient extends PlayerDecorator {
    public isSeekable(): boolean;
    public play(): void;
    public pause(): void;
    public mute(): void;
    public unmute(): void;
    public isPlaying(): boolean;
    public getCurrentPosition(): number;
    public getPlaybackRate(): number;
    public changePlaybackRate(rate: number): void;
    public fastSeekToPosition(position: number): void;
    public setVolume(volume: number): void;
}

• Connect HTML5 video client to the SDK

const video = document.getElementById('player');
const client = new HtmlVideoClient(video);
syncInstance.addPlayerClient(client);

• Enable/disable synchronization

syncInstance.startSynchronize()
            .then(() => {})
            .catch(e => {});

syncInstance.stopSynchronize()

In addition, have a look at the extra features available for you:

• Chat

• Remote control

• Sync process visualization

Have a look at the demo application to see all the features and API of sync instance here.

Support

Need technical support? contact us at [e-mail].