vizbee

// import
import { VizbeeCastButton } from 'react-native-vizbee-sender-sdk';

// in render component
<VizbeeCastButton style={styles.castButton} tintColor="#FFFFFF"></VizbeeCastButton>

// styles (important to set width & height)
const styles = StyleSheet.create({
  castButton: {
    width: 32,

vizbee

// imports
import { VizbeeManager } from 'react-native-vizbee-sender-sdk';

//---
// setup listeners
//---

private subscriptions = [];

public addListeners() {

vizbee

// imports
import { VizbeeManager, VizbeeVideo } from 'react-native-vizbee-sender-sdk';

// create VizbeeVideo 
let vizbeeVideo = new VizbeeVideo();
vizbeeVideo.guid = appVideoObject.guid;
vizbeeVideo.title = appVideoObject.title;
vizbeeVideo.subtitle = appVideoObject.subtitle;
vizbeeVideo.imageUrl = appVideoObject.imageUrl;
vizbeeVideo.startPositionInSeconds = appVideoObject.startPositionInSeconds;

vizbee

Snippets for Vizbee React Native Sender SDK

Initialization

Build Setup

	Scenario	Snippet
1	Add Vizbee RN Sender SDK to your repo and setup iOS and Android dependencies	Snippet

vizbee

Snippets for Vizbee Chromecast CAF SDK

Instructions

• Look up the use case or scenario related to Vizbee SDK integration in the list below.
• The corresponding snippet provides template code to address the scenario.
• Copy the template code and update based on your app's requirements.

Scenarios & Snippets

Initialization

vizbee

// add Vizbee Chromecast CAF SDK library in entry (receiver.html) file of your receiver
<script src="https://static.claspws.tv/sdk/receivers/chromecast/v6/vizbee.js"></script>

// initialize the Vizbee SDK before CastReceiverContext.start in your receiver and
// replace the vzbxxxxxxx with Vizbee appID assigned for your app
let vzbContext = vizbee.framework.ContinuityContext.getInstance();
vzbContext.start('vzbxxxxxxx');

vizbee

// add Vizbee customNamespace in CastReceiverOptions for CastReceiverContext start
let context = cast.framework.CastReceiverContext.getInstance();
context.start({
  supportedCommands: cast.framework.messages.Command.ALL_BASIC_MEDIA
  customNamespaces: {
    'urn:x-cast:tv.vizbee.sync': cast.framework.system.MessageType.STRING
  }
});

vizbee

// optional: Import your own CastQueue if any for playlist implementation
import { CastQueue } from './queuing.js';

// optional: Set the player to start playback as soon as there are five seconds of
//           media content buffered. Default is 10.
const playbackConfig = new cast.framework.PlaybackConfig();
playbackConfig.autoResumeDuration = 5;

// add Vizbee custom namespace in CastReceiverOptions for CastReceiverContext start
let context = cast.framework.CastReceiverContext.getInstance();

vizbee

// intercept the LOAD request to be able to read in a contentId and get data
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD, loadRequestData => {

  // host app performs updates to loadRequestData as needed ...
  return loadRequestData;
});  

vizbee

// create Vizbee LoadRequestInterceptor to intercept and convert loadRequestData sent by Vizbee sdk
let vzbLoadRequestInterceptor = new vizbee.framework.LoadRequestInterceptor((vzbLoadRequestData) => {

  // update vzbLoadRequestData to loadRequestData format expected by your receiver
  let updatedLoadRequestData = vzbLoadRequestData;
  updatedLoadRequestData.media.contentId = vzbLoadRequestData.media.customData.guid;
  return updatedLoadRequestData;
});

// intercept the LOAD request to be able to read in a contentId and get data