README

nativescript-cast

Chromecast support for NativeScript 7+.

Requirements

You must have a valid Chromecast Application ID. You can obtain one at the Google Cast Developer Console.

Installation

Note: Since NativeScript 7, the package name is now @codelab/nativescript-cast.

# NativeScript 7
ns plugin add @codelab/nativescript-cast

# Nativescript 6
tns plugin add nativescript-cast@0.3.0

# NativeScript 5
tns plugin add nativescript-cast@0.1.2

Usage

Android

Set your Application ID.

<!-- App_Resources/Android/src/main/res/values/strings.xml -->
<string name="app_id">4F8B3483</string>

The Google Cast design checklist requires a sender app to provide an expanded controller. Include ExpandedControllerActivity in your AndroidManifest.xml.

<!-- App_Resources/Android/src/main/res/AndroidManifest.xml -->
<activity
  android:name="com.google.android.gms.cast.framework.media.widget.ExpandedControllerActivity"
  android:label="@string/app_name"
  android:launchMode="singleTask"
  android:screenOrientation="portrait">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
  </intent-filter>
  <meta-data
    android:name="android.support.PARENT_ACTIVITY"
    android:value="com.tns.NativeScriptActivity"/>
</activity>

If you are using Webpack, you will need to include '@codelab/nativescript-cast/cast-options-provider' in appComponents.

To do this, create a custom webpack configuration. See the demo for an example.

iOS

Set your Application ID.

<!-- App_Resources/iOS/Info.plist -->
<key>AppID</key>
<string>4F8B3483</string>

You'll need to set up a delegate to initialise the GCKCastContext with your AppID. See the demo for an example.

import { Application } from '@nativescript/core';

if (global.isIOS) {
  @NativeClass()
  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate, GCKLoggerDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary<string, any>): boolean {
      const appId = NSBundle.mainBundle.objectForInfoDictionaryKey('AppID');
      const castOptions = GCKCastOptions.alloc().initWithReceiverApplicationID(appId);
      GCKCastContext.setSharedInstanceWithOptions(castOptions);

      // Optional logger
      const delegate: MyLoggerDelegateImpl = MyLoggerDelegateImpl.new();
      GCKLogger.sharedInstance().delegate = delegate;

      return true;
    }
  }

  Application.ios.delegate = MyDelegate;
}

⚠️ iOS 12+ & Xcode 10 ⚠️

If developing using Xcode 10 and targeting iOS devices running iOS 12 or higher, the "Access WiFi Information" capability is required in order to discover and connect to Cast devices. The plugin comes with an app.entitlements which will add this capability to the workspace, however, you must also Add the Access WiFi information feature to your App ID .

See iOS sender setup for more info.

⚠️ iOS 13+ & Guest Mode ⚠️

iOS 13+ requires Bluetooth and Microphone permissions in order to use Guest Mode with Chromecast. This plugin sets these permissions in the Info.plist file.

See iOS Guest Mode for more info.

⚠️ iOS 14+ ⚠️

iOS 14+ has some permission changes. See iOS Permission Changes for more info.

Be sure to set NSBonjourServices with your AppID as explained in the documentation above. See the demo for an example.

Place `CastButton` in to your view.

NativeScript

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  loaded="pageLoaded"
  class="page"
  xmlns:cast="@codelab/nativescript-cast"
>
  <ActionBar title="App Name">
    <ActionItem ios.position="right">
      <StackLayout>
        <cast:CastButton cast="{{ handleCastEvent }}" />
      </StackLayout>
    </ActionItem>
  </ActionBar>
  <!-- ... -->
</Page>

Angular

Add NativescriptCastModule in your app's module imports, typically in app.module.ts.

import { NativescriptCastModule } from '"@codelab/nativescript-cast/angular';

@NgModule({
  imports: [
    NativescriptCastModule
  ]
});

Include in your template.

<ActionBar [title]="App Name" >
  <ActionItem ios.position="right">
    <StackLayout>
      <CastButton (cast)="handleCastEvent($event)"></CastButton>
    </StackLayout>
  </ActionItem>
</ActionBar>

Vue

Vue.registerElement('CastButton', () => require('n"@codelab/ativescript-cast').CastButton);

Include in your template.

<ActionBar title="App Name">
  <ActionItem ios.position="right">
    <StackLayout>
      <CastButton @cast="handleCastEvent" />
    </StackLayout>
  </ActionItem>
</ActionBar>

Event handler

Set up an event handler for all cast events. The cast instance is available on args.object.

handleCastEvent(args): void {
  console.log('cast: ' + args.object);
  console.log('eventName: ' + args.data.eventName);
}

Casting

When the Cast receiver is ready, you can load your media.

const mediaInfo = {
  contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
  contentType: 'video/mp4',
  streamType: 'BUFFERED',
  duration: undefined,
  metadata: {
    metadataType: 'MOVIE',
    title: 'Tears of Steel',
    subtitle: 'By Blender Foundation',
    description: 'Sintel is an independently produced short film, initiated by the Blender Foundation.',
    images: [
      {
        url: 'http://storage.googleapis.com/gtv-videos-bucket/sample/images_480x270/TearsOfSteel.jpg',
        width: 480,
        height: 270,
      }
    ]
  },
  textTracks: [
    {
      src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-en.vtt',
      contentType: 'text/vtt',
      name: 'English',
      language: 'en'
    },
    {
      src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-es.vtt',
      contentType: 'text/vtt',
      name: 'Spanish',
      language: 'es'
    }
  ],
  textTrackStyle: {
    foregroundColor: '#0000cc',
    backgroundColor: '#00cc00',
  },
  customData: {
    anything: 'you like'
  }
};

cast.loadMedia(mediaInfo);

API

Events

Event names follow the Android naming structure. iOS events are passed from GCKSessionManagerListener, GCKRemoteMediaClientListener and GCKMediaQueueDelegate. Android events are passed from SessionManagerListener, MediaRouter.Callback and MediaQueue.Callback.

NativeScript	Android	iOS
onSessionEnded	onSessionEnded	didEndSession
onSessionEnding	onSessionEnding	willEndSession
onSessionResumed	onSessionResumed	didResumeSession
onSessionResuming	onSessionResuming	willResumeSession
onSessionStarted	onSessionStarted	didStartSession
onSessionStartFailed	onSessionStartFailed	didFailToStartSession
onSessionStarting	onSessionStarting	willStartSession
onSessionSuspended	onSessionSuspended	didSuspendSession
onDeviceVolumeChanged	onRouteVolumeChanged	didReceiveDeviceVolume
onDeviceChanged	onRouteChanged	didUpdateDevice
onMediaStatusChanged	onStatusUpdated	remoteMediaClientDidUpdateMediaStatus
mediaQueueWillChange	mediaQueueWillChange	mediaQueueWillChange
itemsReloaded	itemsReloaded	mediaQueueDidReloadItems
itemsInsertedInRange	itemsInsertedInRange	didInsertItemsInRange
itemsUpdatedAtIndexes	itemsUpdatedAtIndexes	didUpdateItemsAtIndexes
itemsRemovedAtIndexes	itemsRemovedAtIndexes	didRemoveItemsAtIndexes
mediaQueueChanged	mediaQueueChanged	mediaQueueDidChange

All unlisted events are ignored. See related documentation for futher details.

Android

iOS

Methods

See cast.types for method options.

loadMedia(media: CastMediaInfo, options?: LoadMediaOptions): void

Loads the specified media.
loadQueue(options: LoadQueueOptions): void

Loads a queue of media items.
playMedia(customData? any): void

Plays the loaded media.
pauseMedia(customData? any): void

Pauses the loaded media.
seekMedia(position: number, resumeState?: ResumeState , customData?: any): void

Seeks the loaded media to position (seconds).
stopMedia(customData? any): void

Stops the loaded media.
showController(): void

Show the expanded controller.
showCastInstructions(title: string, singleTime: boolean): void

Shows the Cast instructions overlay. title and singleTime arguments are Android-only.
showCastDialog(): void

Show the Cast destination dialog.
getMediaInfo(): CastMediaInfo

Returns the loaded media info.
setActiveTrackIds([trackIds]): void

Pass an array of IDs defined in textTracks to show subtitles. Pass an empty array to hide.
queueNextItem(): void

Play the next item in the queue.
queuePreviousItem(): void

Play the previous item in the queue.
queueSetRepeatMode(repeatMode: RepeatMode): void

Set the queue repeat mode.
queueInsertItem(options: QueueInsertItemOptions): void

Insert a single queue item.
queueInsertItems(options: QueueInsertItemsOptions): void

Insert multiple queue items.
queueRemoveItems(itemIDs: number[], customData?: any): void

Remove queue items by ID.
queueReorderItems(itemIDs: number[], beforeItemID: number, customData?: any): void

Reorder queue items by ID.
queueJumpToItem(itemID: number, playPosition?: number, customData? any): void

Jump to queue item by ID.

TODO

More queue-related functions.
Complete Cast Reference app that adheres to the Google Cast Design Checklist.

Acknowledgements

CodeLab - Current employer. Developed this plugin whilst learning NativeScript.
loop.tv - Financed the development of Queue Support.

Usage no npm install needed!

README

nativescript-cast

Requirements

Installation

Usage

Android

iOS

⚠️ iOS 12+ & Xcode 10 ⚠️

⚠️ iOS 13+ & Guest Mode ⚠️

⚠️ iOS 14+ ⚠️

Place CastButton in to your view.

NativeScript

Angular

Vue

Event handler

Casting

API

Events

Android

iOS

Methods

TODO

Acknowledgements

Place `CastButton` in to your view.