# 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](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 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
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
{% 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
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](https://documentation.sceenic.co/synchronization-sdk/tutorials/web/web-sdk-npm-package).
## Basic setup
* Add the following import
```javascript
import { SyncSdk, PlayerDecorator } from '@sscale/syncsdk';
```
* Create player instance (it is possible to use a simple HTML player)
```markup
```
* 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
Need technical support? contact us at .
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://documentation.sceenic.co/synchronization-sdk/tutorials/web/web-typescript-react.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.