# Web - TypeScript/React

## Overview <a href="#overview" id="overview"></a>

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](https://bitbucket.org/svmt/react-demo-sync/src/master)\
[Demo application](https://sceenicsyncdemo.web.app/)\
[API Documentation](https://sync-api-doc.web.app/)

## Requirements <a href="#requirements" id="requirements"></a>

* A Sceenic account
* Code Editor( [WebStorm](https://www.jetbrains.com/webstorm/download/), [VS Code](https://code.visualstudio.com/download))
* Access key for sync SDK.
* [Node >= 8.10 and npm >= 5.6](https://nodejs.org/en/)

## Authentication <a href="#authentication" id="authentication"></a>

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

{% hint style="danger" %}
**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.
{% endhint %}

### Acquiring an Access Token <a href="#acquiring-an-access-token" id="acquiring-an-access-token"></a>

{% tabs %}
{% tab title="cUrl(Bash)" %}

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

{% endtab %}
{% endtabs %}

The `Access Token` is a JWT token - more about jwt you can read - [here](https://en.wikipedia.org/wiki/JSON_Web_Token).

A successful response will look like that:

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

{% hint style="info" %}
You can get your API\_KEY and API\_SECRET in your private area, [here](https://media.sceenic.co/).
{% endhint %}

{% hint style="warning" %}
**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`.
{% endhint %}

### 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 ](https://media.sceenic.co/)
* Your own working authentication server

## Create a project <a href="#create-a-project" id="create-a-project"></a>

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 <a href="#add-the-sync-sdk-library-to-your-project" id="add-the-sync-sdk-library-to-your-project"></a>

* 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](https://documentation.sceenic.co/synchronization-sdk/tutorials/web/web-sdk-npm-package).

## Basic setup <a href="#sample-application-ui" id="sample-application-ui"></a>

* Add the following import

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

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

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

* Create Sync SDK instance

```typescript
const syncInstance = new SyncSDK()
```

* Connect to group or create new

```javascript
 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](https://bitbucket.org/svmt/react-demo-sync/src/master/src/decorators). Check API of `PlayerDecorator`[ here](https://sync-api-doc.web.app/classes/PlayerDecorator.html).

```javascript
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

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

* Enable/disable synchronization

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

```typescript
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 ](https://sceenicsyncdemo.web.app/)to see all the features and API of sync instance [here](https://sync-api-doc.web.app/classes/SyncSDK.html).

## Support <a href="#support" id="support"></a>

Need technical support? contact us at <Support@sceenic.co>.