Skip to main content

Bitmovin

QUANTEEC plugin can also be used with the React Native version of the bitmovin player. The integration is based on the versions 0.17.0 and 0.28.0 of this project

Setting up the dependencies​

Adding the NPM package dependency​

First you need to connect to our own npm repository with your credentials. This can be made with the following command :

npm login --scope=@quanteec --registry https://npm.quanteec.com/
info

To obtain your credentials for QUANTEEC npm repository, please contact us by mail.

Then you can add our library as a dependency to your project using any node-based package manager, e.g.:

npm install @quanteec/bitmovin-player-react-native-quanteec --registry https://npm.quanteec.com/

Setting up Android dependencies​

You also need to declare the QUANTEEC Maven repository with your credentials. This declaration must be made in your the allprojects.repositories section of settings.gradle file of your android/build.gradle file:

repositories {
  ...
  maven {
      url 'https://maven.quanteec.com/repository/internal/'
      credentials {
        username "username"
        password "password"
      }
      authentication {
        basic(BasicAuthentication)
      }
  }
}

Using QUANTEEC with Bitmovin and React Native​

In order to use QUANTEEC with Bitmovin and react native you can follow the basic example given by bitmovin. There is only three things to modify from this example to make QUANTEEC worked.

1 - Change the dependency bitmovin-player-react-native by @quanteec/bitmovin-player-react-native-quanteec.

import {
  usePlayer,
  SourceType,
  PlayerView,
  AudioSession,
} from '@quanteec/bitmovin-player-react-native-quanteec';

2 - Create a QUANTEEC configuration object which will describe the initial configuration of the QUANTEEC plugin.

    var quanteecConfig = {
        quanteecKey: "<your-quanteec-key>", 
        videoID: "<enter-your-custom-videoID>" // [Optional but recommended] String --> specific name to identify a video. Useful if the videosource url contains a token which is different for every user. By default: the videoSource value is used.
    };
info

To create a new QUANTEEC configuration and/or retrieve your default QUANTEEC key, you must first go to the Config page of your panel.

note

A complete description of the possible options of the quanteecConfiguration object can be found here.

warning

In your QUANTEEC configuration, remember to set a different videoID if you have different formats of the same stream (e.g., one DASH stream and one HLS stream) or two variants of the same stream (one stream with English audio and one stream with another language).

Click here to find more informations on videoID

3 - Initiate the QUANTEEC plugin juste before loading the media with the Bitmovin player instance. It can be done by calling the fonction initQuanteec of the player API. An object corresponding to the quanteecConfig :

player.initQuanteec({
    //Configuration du plugin Quanteec
    quanteecKey:"<enter-your-custom-videoID>", 			
    videoID:"<enter-your-custom-videoID>",
})

player.load({
    url:
      Platform.OS === 'ios'
        ? 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
        : 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
    type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
    title: 'Art of Motion',
});
warning

In your QUANTEEC configuration, remember to set a different videoID if you have different formats of the same stream (e.g., one DASH stream and one HLS stream) or two variants of the same stream (one stream with English audio and one stream with another language).

Click here to find more informations on videoID

Here is a complete example of the use of QUANTEEC for Bitmovin with React Native:

import React, { useEffect, useCallback } from 'react';
import {
  StyleSheet,
  View,
  Button,
} from 'react-native';

import {
  usePlayer,
  SourceType,
  PlayerView,
  AudioSession,
} from '@quanteec/bitmovin-player-react-native-quanteec';

export default function PlayerSample() {
  const player = usePlayer({
    // The only required parameter is the license key but it can be omitted from code upon correct
    // Info.plist/AndroidManifest.xml configuration.
    //
    // Head to `Configuring your License` for more information.
    licenseKey: '<ENTER-YOUR-LICENSE-KEY>'
  });

  useEffect(() => {
    // iOS audio session category must be set to `playback` first, otherwise playback
    // will have no audio when the device is silenced.
    //
    // Usually it's desireable to set the audio's category only once during your app's main component
    // initialization. This way you can guarantee that your app's audio category is properly
    // configured throughout the whole lifecycle of the application.
    AudioSession.setCategory('playback').catch(error => {
      // Handle any native errors that might occur while setting the audio's category.
      console.log("Failed to set app's audio category to `playback`:\n", error);
    });

    player.initQuanteec({
      //Configuration du plugin Quanteec
      quanteecKey:"<enter-your-custom-videoID>",
      videoID:"<enter-your-custom-videoID>",
    })

    player.load({
      url:
        Platform.OS === 'ios'
          ? 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
          : 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
      type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
      title: 'Art of Motion',
    });

  }, [player]);

  // onReady is called when the player has downloaded initial
  // video and audio and is ready to start playback.
  const onReady = useCallback(
    () => {
      // Start playback
      player.play();
    },
    [player],
  );

    return (
        <View style={styles.flex1}>
            <PlayerView style={styles.flex1} player={player} onReady={onReady} />
        </View>
    );
}

const styles = StyleSheet.create({
  flex1: {
    flex: 1,
  },
});

Migrate from an existing project using React Native Bitmovin​

If your project already used the React Native version of the Bitmovin player, you must modify some elements in your project to avoid conflicts.

First you must uninstall the original bitmovin-player-react-native library with the following commands :

npm unisntall bitmovin-player-react-native

Then you must replace all the import of the original library from '@quanteec/bitmovin-player-react-native-quanteec' by the QUANTEEC plugin library

from '@quanteec/bitmovin-player-react-native-quanteec';
note

It must be noted that without calling the function player.initQUanteec() the original operation of the react native bitmovin library is not altered. Therefore, there is no need to make modification for the video that does not use QUANTEEC plugin other than the import name.

Sample app​

A example application is available in the QUANTEEC library folder. After installing the library you can go to your node_modules/@quanteec/bitmovin-player-react-native-quanteec/example folder to find the example. This example can be launched like any React Native project with the following commands :

npm install // Install the dependancy, only needed the first time
npm run start // To start the react native development server