nativescript-cast

支持 NativeScript 6 的 Chromecast。

要求

您必须有一个有效的 Chromecast 应用程序 ID。您可以在 Google Cast 开发者控制台 获取一个。

NativeScript 6 或更高版本。对于较低版本，您可以使用此插件的旧版本 0.1.2。

安装

tns plugin add nativescript-cast

用法

Android

设置您的应用程序 ID。

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

Google Cast 设计清单要求发送应用程序提供扩展控制器。在您的 AndroidManifest.xml 中包含 ExpandedControllerActivity。

<!-- 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>

如果您正在使用 Webpack，请将 'nativescript-cast/cast-options-provider' 添加到 appComponents。您必须在执行 tns update 后重复此步骤。

// webpack.config.js
const appComponents = [
  'tns-core-modules/ui/frame',
  'tns-core-modules/ui/frame/activity',
  'nativescript-cast/cast-options-provider'
];

或者，您可以创建一个 自定义 webpack 配置。请参阅 示例。

iOS

设置您的应用程序 ID。

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

在您的 application.run() 之前添加以下内容。这将使用您的 Info.plist 文件中的应用程序 ID 初始化 GCKCastContext。

import * as application from 'tns-core-modules/application';
import * as utils from 'tns-core-modules/utils/utils';

application.on(application.launchEvent, (args) => {
  if (args.ios !== undefined) {
    // AppID value from Info.plist
    const mainBundle = utils.ios.getter(NSBundle, NSBundle.mainBundle);
    const appId = mainBundle.infoDictionary.objectForKey('AppID');

    const castOptions = GCKCastOptions.alloc().initWithReceiverApplicationID(appId);
    GCKCastContext.setSharedInstanceWithOptions(castOptions);
  }
});

⚠️ iOS 12+ & Xcode 10 ⚠️

如果您正在使用 Xcode 10 开发并针对运行 iOS 12 或更高版本的 iOS 设备，则需要“访问 WiFi 信息”功能才能发现和连接到 Cast 设备。该插件包含一个 app.entitlements，它将此功能添加到工作区，但是，您还必须 将访问 WiFi 信息功能添加到您的 App ID。

有关更多信息，请参阅 iOS 发送器设置。

⚠️ iOS 13+ & 客户模式 ⚠️

iOS 13+ 需要蓝牙和麦克风权限才能使用 Chromecast 的客户模式。此插件将在 Info.plist 文件中设置这些权限。

有关更多信息，请参阅 iOS 客户模式。

将 CastButton 放入您的视图中。

NativeScript

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

Angular

在您的应用程序模块的 imports 中添加 NativescriptCastModule，通常在 app.module.ts 中。

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

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

在您的模板中包含。

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

Vue

在您的应用程序的主要入口点中注册元素，通常在 main.ts 中。

Vue.registerElement('CastButton', () => require('nativescript-cast').CastButton);

在您的模板中包含。

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

事件处理程序

为所有 cast 事件 设置事件处理程序。cast 实例在 args.object 上可用。

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

播放

当 Cast 接收器准备好时，您可以加载您的媒体。

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

事件

事件名称遵循 Android 命名结构。iOS 事件从 GCKSessionManagerListener、GCKRemoteMediaClientListener 和 GCKMediaQueueDelegate 传递，Android 事件从 SessionManagerListener、MediaRouter.Callback 和 MediaQueue.Callback 传递。

所有未列出的事件将被忽略。请参阅相关文档以获取更多详细信息。

Android

• SessionManagerListener
• MediaRouter.Callback
• MediaQueue.Callback

iOS

• GCKSessionManagerListener
• GCKRemoteMediaClientListener
• GCKMediaQueueDelegate

方法

请参阅 cast.types 以获取方法选项。

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

  加载指定的媒体。

• loadQueue(options: LoadQueueOptions): void

  加载一组媒体项。

• playMedia(customData? any): void

  播放加载的媒体。

• pauseMedia(customData? any): void

  暂停加载的媒体。

• seekMedia(position: number, resumeState?: ResumeState , customData?: any): void

  将加载的媒体定位到指定位置（秒）。

• stopMedia(customData? any): void

  停止加载的媒体。

• showController(): void

  显示扩展控制器。

• showCastInstructions(title: string, singleTime: boolean): void

  显示Cast指令叠加层。参数 title 和 singleTime 仅适用于Android。

• showCastDialog(): void

  显示Cast目标对话框。

• getMediaInfo(): CastMediaInfo

  返回加载的媒体信息。

• setActiveTrackIds([trackIds]): void

  传递一个由 textTracks 中定义的ID数组来显示字幕。传递空数组以隐藏。

• queueNextItem(): void

  播放队列中的下一项。

• queuePreviousItem(): void

  播放队列中的上一项。

• queueSetRepeatMode(repeatMode: RepeatMode): void

  设置队列重复模式。

• queueInsertItem(options: QueueInsertItemOptions): void

  插入单个队列项。

• queueInsertItems(options: QueueInsertItemsOptions): void

  插入多个队列项。

• queueRemoveItems(itemIDs: number[], customData?: any): void

  通过ID移除队列项。

• queueReorderItems(itemIDs: number[], beforeItemID: number, customData?: any): void

  通过ID重新排列队列项。

• queueJumpToItem(itemID: number, playPosition?: number, customData? any): void

  通过ID跳转到队列项。

TODO

• 更多队列相关函数。
• 完成符合 Cast参考应用，该应用遵循 Google Cast设计清单。

致谢

• CodeLab - 当前雇主。在学习NativeScript的同时开发了此插件。
• loop.tv - 为队列支持的开发提供资金。