npm package: @kks-web/player-sdk
Description: The BlendVision Player SDK allows you to create, interact with and control an embedded BlendVision Player.
Latest version: 1.0.8

# Player SDK

The BlendVision Player SDK allows you to create, interact with and control an
embedded BlendVision Player.

## Installation

You can install the BlendVision Player SDK through npm:

```bash
npm install @web-kks/player-sdk
```

Alternatively, you can reference an up‐to‐date version on our CDN:

```html
<script src="https://unpkg.com/@web-kks/player-sdk"></script>
```

## Getting Started

You can create the well-crafted BlendVision player for your event with this SDK.

### Create with an element id

Pass an element's `id` and a [config](#config-options) object to the `Player`
constructor to create an embedded player inside that element. The config object should
consist of a `token` which is the `accessToken` of the event powered by BlendVision Moment.

```html
<!-- the element where you would like to display the player -->
<div id="my-player"></div>

<script src="https://unpkg.com/@web-kks/player-sdk"></script>
<script>
    const config = {
      token: "your-token", // the accessToken of the event from BlendVision Moment api
    };
    // Will create inside the my-player div:
    // <iframe width="100%" height="100%" src="https://player.live.kkstream.io/?t=your-token&hl=en" title="Player" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    new BlendVision.Player("my-player", config);
</script>
```
### Using with a module bundler
If you’re using a module bundler like [webpack](https://webpack.js.org/) or [rollup](http://rollupjs.org/), the exported object will be the Player constructor (unlike the browser where it is attached to `window.BlendVision`):
```js
import Player from "@web-kks/player-sdk";

new Player("my-player", {
    token: "your-token", // the accessToken of the event from BlendVision Moment api
});
```

### Using with React
If you're building your projects with [React](https://github.com/facebook/react), you could follow the sample code as described below.
Since we do not provide a React component version of our player for the time being, please instantiate our SDK in React life cycle as below:

#### For React 16.8+ with hooks
```jsx
import React, { useEffect } from "react";
import Player from "@web-kks/player-sdk";

const App = () => {
  useEffect(() => {
    const options = {
      token: "your-token"
    }
    new Player("my-player", options);
  }, [])
  return (
    <div className="App">
      <h1>BlendVision Player SDK</h1>
      <div className="main">
        <div id="my-player"/>
      </div>
    </div>
  );
};
```

#### For React Class components
```jsx
import React from 'react';
import Player from "@web-kks/player-sdk";

class App extends React.Component {
  componentDidMount() {
    const options = {
      token: 'your-token'
    }
    new Player('my-player', options);
  }
  render() {
    return (
      <div className="App">
        <h1>BlendVision Player SDK</h1>
        <div className="main">
          <div id="my-player"/>
        </div>
      </div>
    );
  }
}

export default App;

```

## Config Options

These config options are available to use as an object passed to the
`Player` constructor.

| option    | default                           | description                                                             |
| --------- | --------------------------------- | ----------------------------------------------------------------------- |
| token     |                                   | **Required.** The accessToken of the event from BlendVision Moment api. |
| playerUrl | `https://player.live.kkstream.io` | The URL of the Player service.                                          |
| locale    | en                                | The language of Player. `(en, zh, ja)`                                  |