Merge pull request #64 from Uscreen-video/com-4097-support-custom-google-cast-receiver-for-web-player

chore: send drm data to google cast

Author: sck-v

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
           run_install: false
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version-file: 'package.json'
           cache: 'pnpm'

package.json

@@ -36,7 +36,7 @@
     "types/**/*"
   ],
   "engines": {
-    "node": "^20",
+    "node": "^22",
     "pnpm": "^8"
   },
   "packageManager": "pnpm@8.6.0",

src/components/video-chromecast/Video-chromecast.component.ts

@@ -2,7 +2,7 @@ import { unsafeCSS, LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import styles from "./Video-chromecast.styles.css?inline";
 import { connect, createCommand, dispatch, listen } from "../../state";
-import { Action, Command, State } from "../../types";
+import { Action, Command, State, DRMOptions, KeySystems, MuxParams } from "../../types";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import _castIcon from "../../icons/chrome-cast-outline.svg?raw";
 // import { CastStatus } from '../../types';
@@ -34,9 +34,18 @@ export class VideoChromecast extends LitElement {
   @connect("activeTextTrackId")
   activeTextTrackId: string;
 
+  @connect("drmOptions")
+  drmOptions?: DRMOptions;
+
+  @connect("muxData")
+  muxData: MuxParams;
+
   @state()
   targetDevise: string;
 
+  @property({ type: String, attribute: "receiver-application-id" })
+  receiverApplicationId?: string;
+
   @listen(Command.togglePlay, { castActivated: true })
   @listen(Command.play, { castActivated: true })
   @listen(Command.pause, { castActivated: true })
@@ -145,6 +154,11 @@ export class VideoChromecast extends LitElement {
         url: this.poster,
       },
     ];
+    media.customData = this.drmOptions ? {
+      "drm": {
+        "licenseUrl": this.drmOptions[KeySystems.widevine]?.licenseUrl
+      }
+    } : {};
 
     const request = new window.chrome.cast.media.LoadRequest(media);
 
@@ -157,6 +171,10 @@ export class VideoChromecast extends LitElement {
         subtitlesLanguageIdx !== -1 ? [subtitlesLanguageIdx] : [];
     }
 
+    request.customData = {
+      ...(this.muxData?.env_key && { "mux": { "envKey": this.muxData.env_key } })
+    };
+
     try {
       await window.cast.framework.CastContext.getInstance().requestSession();
 
@@ -189,8 +207,7 @@ export class VideoChromecast extends LitElement {
 
   initChromeCast() {
     window.cast.framework.CastContext.getInstance().setOptions({
-      receiverApplicationId:
-        window.chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
+      receiverApplicationId: this.receiverApplicationId || window.chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
       autoJoinPolicy: window.chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
       resumeSavedSession: false,
     });