nativescript-cast

支持 NativeScript 7+ 的 Chromecast。

要求

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

安装

注意：由于 NativeScript 7，包名现在是 @codelab/nativescript-cast。

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

# Nativescript 6
tns plugin add [email protected]

# NativeScript 5
tns plugin add [email protected]

用法

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，您需要在 appComponents 中包含 '@codelab/nativescript-cast/cast-options-provider'。

为此，创建一个 自定义 webpack 配置。请参阅 示例。

iOS

设置您的应用程序 ID。

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

您需要设置一个代理来使用您的 AppID 初始化 GCKCastContext。请参阅 示例。

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 ⚠️

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

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

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

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

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

⚠️ iOS 14+ ⚠️

iOS 14+ 有一些权限更改。有关更多信息，请参阅 iOS 权限更改。

请确保按照上述文档中的说明设置 NSBonjourServices，使用您的 AppID。请参阅 示例。

将 CastButton 放入您的视图中。

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

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

import { NativescriptCastModule } from '"@codelab/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('n"@codelab/ativescript-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

• 更多与队列相关的功能。
• 完成遵守《Google Cast设计清单》的《Cast参考应用》。

鸣谢

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