@web-kks/player-sdk NPM

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:

npm install @web-kks/player-sdk

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

<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 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.

<!-- 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 or rollup, the exported object will be the Player constructor (unlike the browser where it is attached to window.BlendVision):

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, 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

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

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;