Player SDK

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

Deploy and Environments

Usually, the deploy flow will be: Development → Staging → Prod.

| Environment | Command | URL | | ----------- | ----------- | --------------------------------------------- | | Development | cibr dev | https://bv-player-sdk-dev.madmax.kkv-test.com | | Staging | cibr stag | https://bv-player-sdk-stag.madmax.kkvqa.com | | Prod | cibr prod | https://bv-player-sdk-prod.live.kkstream.io |

Note: The cibr <branch-name> is a git alias, you can add it by checking this document.

NPM Publish

npm login                                        // login with `webkks` account


npm publish --tag beta                           // publish beta version
npm install —-save @web-kks/player-sdk@beta.     // select and install beta version


npm publish --access public                      // publish prod version
npm install —-save @web-kks/player-sdk           // install latest prod version

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;

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) | | titleSpacing | | Number. Add {X}rem spacing in front of title. | | disableFullscreen | false | Boolean. Hide/Show fullscreen button. | | did | | String. Device ID for concurrent user count and report |