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.

• Full code samples can be found here - React code samples

Requirements

• A Sceenic account

• Code Editor( WebStorm, VS Code)

• Access key for sync SDK.

• Additional step needed only to React Project

  • Node >= 8.10 and npm >= 5.6

Authentication

To instantiate the synch SDK you will need to use the API_KEY in order to create a synchronization group.

Using the API_KEY we will identify you as a customer and allow the client to connect to the synchronization session.

The API_KEY can be acquired - here

Create a project

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

• Create an empty React + Typescript project

• Create a new empty project using the following command

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

• If you require to add typescript to existing project use

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

• Rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx)

• Restart your development server!

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 WebSDK via npm i @sscale/syncsdk.

For more information on NPM installation look here.

Sample application UI

• Add the player instance

  • It is possible to use a simple HTML player

<video width="100%" height="100%" id={playerInfo.id} controls> <source src={playerInfo.videoUrl} type="video/mp4" /> </video>

• Create a unique identifier for the video player

<video width="960" height="540" id={playerInfo.id} controls={true}></video>

• Create a SyncSDK instance

const syncInstance = new SyncSDK(API_KEY, useProgramDateTime)

useProgramDateTime - Optional parameter. This parameter is used when the synchronization is intended also between Web and Mobile clients. To use this parameter the EXT-X-PROGRAM-DATE-TIME tag should be configured in the HLS stream.

• Create a synchronization group

syncInstance.createGroup(groupId, clientName);

• Connect the UI element to the SDK

const playerInstance = document.getElementById(player.id);
const client = new HtmlVideoClient({ id: player.id, videoUrl: player.videoUrl })
     client.setPlayerInstance(playerInstance)
      syncInstance.addPlayerClient(client, player.clientType)

• Start synchronizing

syncInstance.startSynchronize()

• Stop synchronizing

syncInstance.stopSynchronize()

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

• Chat

• Remote control

• Visualization sync process

Have a look at the demo application to see all the features.

Support

Need technical support? contact us at [email protected].