Bitmovin

Known limitations

Because SmartLib relies on player's API, the following statements must be taken into account when integrating the player:

• On all platforms, if the user pauses the stream during a stall, the stall end will be triggered immediately.
• On iOS / tvOS, if the user pauses the stream, a stall is triggered.

1. Attach the player

When creating the player instance, attach it to the current session.

This implementation is based on Bitmovin's official setup guide.

// Create your player
const player = usePlayer({});

...

// Create events object for SmartLib
const [events, setEvents] = useState({});

...

// Define event handlers
const events = {
    onPlaying: (e) => {},
    onPlay: (e) => {},
    onPaused: (e) => {},
    onSourceLoad: (e) => {},
    onPlayerError: (e) => {
        // Stop session on error
        session?.stopStreamingSession();
    },
    onSourceError: (e) => { 
        // Stop session on error
        session?.stopStreamingSession();
    },
    onVideoPlaybackQualityChanged: (e) => {},
    onStallStarted: (e) => {},
    onStallEnded: (e) => {}
};
setEvents(events);
session.attachPlayer(player, events);

...

// Use 'events.onXXX' as callbacks for player events
return (    
<View style={styles.flex1}>
    <PlayerView
    style={styles.flex1}
    player={player}
    onReady={onReady}
    onPlaying={events.onPlaying}
    onPlay={events.onPlay}
    onPaused={events.onPaused}
    onSourceLoad={events.onSourceLoad}
    onPlayerError={events.onPlayerError}
    onSourceError={events.onSourceError}
    onVideoPlaybackQualityChanged={events.onVideoPlaybackQualityChanged}
    onStallStarted={events.onStallStarted}
    onStallEnded={events.onStallEnded}
    />
</View>
);

2. Start a streaming session

The getURL method is used to get the actual streaming URL and start the streaming session. This method is also the starting point of the analytics calculation, for instance the startup time starts from this method.

The returned URL can be different for every video session. In case of using a Broadpeak Advanced CDN or a nanoCDN Agent, it includes a unique token. It can be used only once per session object, once called the session is actually started.

When getURL returns an error, it means no streaming URL can be found. It has to trigger a specific behaviour on the application (error message, dialog...) and stopStreamingSession has to be called. Find more details about getURL errors on the session errors page.

It is recommended to perform this call on a different thread than the main thread, the method runs HTTP requests.

info

This method has to be called even for non-Broadpeak content URLs. In this case, the method will return the same URL.

session.getURL('https://pf7.broadpeak-vcdn.com/bpk-vod/vod1/default/Broadtatou/Broadtatou/index.m3u8').then(result => {
    if (!result.isError()) {
        player.load({
            url: result.url,
            type: SourceType.HLS
        }); 
    } else {
        // Stop the session on error
        session.stopStreamingSession();
    }
});

3. Stop a streaming session

The stopStreamingSession method must be called each time the session is stopped:

• end users: when the playback is stopped by a user action
• loading errors: when the streaming session cannot be started through the getURL method
• player errors: when the player triggers a non-recoverable error during the playback (as a decoding error)
• application or any others actions: when the app is killed

4. Full example

import React, {useEffect, useCallback, useState} from 'react';
import {View, StyleSheet, Button, Platform} from 'react-native';
import {
  usePlayer,
  PlayerView,
  SourceType,
  AudioSession
} from 'bitmovin-player-react-native';

import { SmartLib } from '@broadpeak/smartlib';
import '@broadpeak/smartlib-analytics';
import '@broadpeak/smartlib-ad';
import '@broadpeak/smartlib-react-native';
import '@broadpeak/smartlib-react-native-bitmovin';

export default function PlayerSample() {
  const player = usePlayer({});
  const [session, setSession] = useState(null);
  const [events, setEvents] = useState({});

  SmartLib.getInstance().init('', '', 'pf7.broadpeak-vcdn.com');
  
  useEffect(() => {
    // Bitmovin specific
    AudioSession.setCategory('playback').catch(error => {
      console.log("Failed to set app's audio category to `playback`:\n", error);
    });

    // SmartLib specific
    const events = {
      onPlaying: () => {},
      onPlay: () => {},
      onPaused: () => {},
      onSourceLoad: () => {},
      onPlayerError: () => {
        // Stop session on error
        session?.stopStreamingSession();
      },
      onSourceError: () => {
        // Stop session on error
        session?.stopStreamingSession();
      },
      onVideoPlaybackQualityChanged: () => {},
      onStallStarted: () => {},
      onStallEnded: () => {}
    };

    setEvents(events);

    const session = SmartLib.getInstance().createStreamingSession();
    setSession(session);

    // Attach player and events
    session.attachPlayer(player, events);

    session.getURL('https://pf7.broadpeak-vcdn.com/bpk-vod/vod1/default/Broadtatou/Broadtatou/index.m3u8').then(result => {
      if (!result.isError()) {
        player.load({
          url: result.url,
          type: SourceType.HLS
        }); 
      } else {
        // Stop session on error
        session.stopStreamingSession();
      }
    });

    
  }, [player]);

  const onReady = useCallback(
    () => {
      // Start playback when ready
      player.play();
    },

    [player],
  );

  return (    
    <View style={styles.flex1}>
      <PlayerView
        style={styles.flex1}
        player={player}
        onReady={onReady}
        onPlaying={events.onPlaying}
        onPlay={events.onPlay}
        onPaused={events.onPaused}
        onSourceLoad={events.onSourceLoad}
        onPlayerError={events.onPlayerError}
        onSourceError={events.onSourceError}
        onVideoPlaybackQualityChanged={events.onVideoPlaybackQualityChanged}
        onStallStarted={events.onStallStarted}
        onStallEnded={events.onStallEnded}
      />
    </View>
  );
}

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