[Proposal] Add hidden "Dummy media API" experimental feature and add integration tests linked to DRM

demo/scripts/components/Options/Playback.tsx

@@ -10,11 +10,15 @@ function PlaybackConfig({
   onAutoPlayChange,
   tryRelyOnWorker,
   onTryRelyOnWorkerChange,
+  useDummyMediaElement,
+  onUseDummyMediaElementChange,
 }: {
   autoPlay: boolean;
   onAutoPlayChange: (val: boolean) => void;
   tryRelyOnWorker: boolean;
   onTryRelyOnWorkerChange: (val: boolean) => void;
+  useDummyMediaElement: boolean;
+  onUseDummyMediaElementChange: (val: boolean) => void;
 }): React.JSX.Element {
   return (
     <>
@@ -51,6 +55,25 @@ function PlaybackConfig({
             : "Currently running the RxPlayer's main logic only in main thread."}
         </span>
       </li>
+
+      <li>
+        <Checkbox
+          className="playerOptionsCheckBox playerOptionsCheckBoxTitle"
+          name="useDummyMediaElement"
+          ariaLabel="Rely in a WebWorker when possible"
+          checked={useDummyMediaElement}
+          onChange={onUseDummyMediaElementChange}
+        >
+          Dummy Media API
+        </Checkbox>
+        <span className="option-desc">
+          {useDummyMediaElement
+            ? "Use mocked media API: The content will not really play but the RxPlayer " +
+              "will believe it does. Useful for debugging the RxPlayer's logic even on " +
+              "undecipherable or undecodable content."
+            : "Actually play the chosen content."}
+        </span>
+      </li>
     </>
   );
 }

demo/scripts/controllers/Player.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import DummyMediaElement from "../../../src/experimental/tools/DummyMediaElement";
 import type {
   IAudioRepresentationsSwitchingMode,
   ILoadVideoOptions,
@@ -17,6 +18,7 @@ import type {
   ILoadVideoSettings,
   IConstructorSettings,
 } from "../lib/defaultOptionsValues";
+import { toDummyDrmConfiguration } from "../lib/parseDRMConfigurations";
 
 const { useCallback, useEffect, useRef, useState } = React;
 
@@ -45,6 +47,7 @@ function Player(): React.JSX.Element {
     defaultOptionsValues.loadVideo,
   );
   const [relyOnWorker, setRelyOnWorker] = useState(false);
+  const [useDummyMediaElement, setUseDummyMediaElement] = useState(false);
   const [hasUpdatedPlayerOptions, setHasUpdatedPlayerOptions] = useState(false);
   const displaySpinnerTimeoutRef = useRef<number | null>(null);
 
@@ -156,11 +159,14 @@ function Player(): React.JSX.Element {
     if (playerModule) {
       playerModule.destroy();
     }
+    const videoElement = useDummyMediaElement
+      ? (new DummyMediaElement() as unknown as HTMLMediaElement)
+      : videoElementRef.current;
     const playerMod = new PlayerModule(
       Object.assign(
         {},
         {
-          videoElement: videoElementRef.current,
+          videoElement,
           textTrackElement: textTrackElementRef.current,
           debugElement: debugElementRef.current,
         },
@@ -169,7 +175,24 @@ function Player(): React.JSX.Element {
     );
     setPlayerModule(playerMod);
     return playerMod;
-  }, [playerOpts, playerModule]);
+  }, [useDummyMediaElement, playerOpts, playerModule]);
+
+  useEffect(() => {
+    if (playerModule === null) {
+      return;
+    }
+    const mediaElement = playerModule.actions.getMediaElement();
+    if (mediaElement === null) {
+      return;
+    }
+    if (useDummyMediaElement) {
+      if (!(mediaElement instanceof DummyMediaElement)) {
+        setHasUpdatedPlayerOptions(true);
+      }
+    } else if (mediaElement !== videoElementRef.current) {
+      setHasUpdatedPlayerOptions(true);
+    }
+  }, [setHasUpdatedPlayerOptions, useDummyMediaElement, playerModule]);
 
   const onVideoClick = useCallback(() => {
     if (playerModule === null) {
@@ -202,6 +225,9 @@ function Player(): React.JSX.Element {
         created.actions.updateWorkerMode(relyOnWorker);
         playerMod = created;
       }
+      if (useDummyMediaElement && contentInfo.keySystems !== undefined) {
+        contentInfo.keySystems = toDummyDrmConfiguration(contentInfo.keySystems);
+      }
       loadContent(playerMod, contentInfo, loadVideoOpts);
     },
     [
@@ -285,6 +311,8 @@ function Player(): React.JSX.Element {
           }
           tryRelyOnWorker={relyOnWorker}
           updateTryRelyOnWorker={setRelyOnWorker}
+          useDummyMediaElement={useDummyMediaElement}
+          updateUseDummyMediaElement={setUseDummyMediaElement}
         />
         <div className="video-player-wrapper" ref={playerWrapperElementRef}>
           <div className="video-screen-parent">

demo/scripts/controllers/Settings.tsx

@@ -31,6 +31,8 @@ function Settings({
   updateDefaultVideoRepresentationsSwitchingMode,
   tryRelyOnWorker,
   updateTryRelyOnWorker,
+  useDummyMediaElement,
+  updateUseDummyMediaElement,
 }: {
   playerOptions: IConstructorSettings;
   updatePlayerOptions: (
@@ -50,6 +52,8 @@ function Settings({
   ) => void;
   tryRelyOnWorker: boolean;
   updateTryRelyOnWorker: (tryRelyOnWorker: boolean) => void;
+  useDummyMediaElement: boolean;
+  updateUseDummyMediaElement: (useDummyMediaElement: boolean) => void;
   showOptions: boolean;
 }): React.JSX.Element | null {
   const {
@@ -123,6 +127,13 @@ function Settings({
     [updateLoadVideoOptions],
   );
 
+  const onUseDummyMediaElementChange = useCallback(
+    (useDummyMediaElement: boolean) => {
+      updateUseDummyMediaElement(useDummyMediaElement);
+    },
+    [updateUseDummyMediaElement],
+  );
+
   const onVideoResolutionLimitChange = useCallback(
     (videoResolutionLimitArg: { value: string }) => {
       updatePlayerOptions((prevOptions) => {
@@ -366,6 +377,8 @@ function Settings({
             onAutoPlayChange={onAutoPlayChange}
             tryRelyOnWorker={tryRelyOnWorker}
             onTryRelyOnWorkerChange={onTryRelyOnWorkerChange}
+            useDummyMediaElement={useDummyMediaElement}
+            onUseDummyMediaElementChange={onUseDummyMediaElementChange}
           />
         </Option>
         <Option title="Video adaptive settings">

demo/scripts/lib/parseDRMConfigurations.ts

@@ -20,10 +20,6 @@ export default async function parseDRMConfigurations(
         serverCertificateUrl,
       } = drmConfig;
 
-      if (!licenseServerUrl) {
-        return;
-      }
-
       const type = drm.toLowerCase();
       const keySystem: IKeySystemOption = {
         type,
@@ -45,6 +41,61 @@ export default async function parseDRMConfigurations(
   return keySystems.filter((ks): ks is IKeySystemOption => ks !== undefined);
 }
 
+/**
+ * Update `keySystems` options given to the RxPlayer, especially the
+ * `getLicense` callback, so it is compatible to the `DummyMediaElement` feature
+ * of the RxPlayer: here, an EME fully-defined in JavaScript will be used instead
+ * of the browser's implementation, so we cannot rely on real CDM <-> license
+ * server exchanges.
+ *
+ * What we do here instead is just parsing that mock's challenge, and return a
+ * fake license with all keys supported.
+ * @param {Array.<Object>} baseOptions - The initial `keySystems` options to
+ * pass to the RxPlayer.
+ * @returns {Array.<Object>} baseOptions - The updated `keySystems` options with
+ * the updated `getLicense` callback.
+ */
+export function toDummyDrmConfiguration(
+  baseOptions: IKeySystemOption[],
+): IKeySystemOption[] {
+  return baseOptions.map((ks) => {
+    return {
+      ...ks,
+      getLicense(...args: Parameters<IKeySystemOption["getLicense"]>) {
+        try {
+          const challenge = args[0];
+          const challengeStr = utf8ToStr(challenge);
+          const challengeObj = JSON.parse(challengeStr) as {
+            certificate: string | null;
+            persistent: boolean;
+            keyIds: string[];
+          };
+          const keys: Record<
+            string,
+            {
+              policyLevel: number;
+            }
+          > = {};
+          challengeObj.keyIds.forEach((kid) => {
+            keys[kid] = {
+              policyLevel: 50,
+            };
+          });
+          const license = {
+            type: "license",
+            persistent: false,
+            keys,
+          };
+          const licenseU8 = strToUtf8(JSON.stringify(license));
+          return licenseU8.buffer;
+        } catch (e) {
+          return ks.getLicense(...args);
+        }
+      },
+    };
+  });
+}
+
 function getServerCertificate(url: string): Promise<ArrayBuffer> {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
@@ -89,6 +140,9 @@ function generateGetLicense(
 ): (rawChallenge: BufferSource) => Promise<BufferSource | null> {
   const isPlayready = drmType.indexOf("playready") !== -1;
   return (rawChallenge: BufferSource): Promise<BufferSource | null> => {
+    if (licenseServerUrl === "") {
+      throw new Error("The content is encrypted but no license server URL was entered");
+    }
     const challenge = isPlayready ? formatPlayreadyChallenge(rawChallenge) : rawChallenge;
     const xhr = new XMLHttpRequest();
     xhr.open("POST", licenseServerUrl, true);

demo/scripts/modules/player/index.ts

@@ -275,6 +275,14 @@ const PlayerModule = declareModule(
         player.setVolume(volume);
       },
 
+      /**
+       * Get media element linked to the RxPlayer Instance.
+       * @returns {HTMLMediaElement|null}
+       */
+      getMediaElement(): HTMLMediaElement | null {
+        return player.getVideoElement();
+      },
+
       updateWorkerMode(enabled: boolean) {
         if (enabled && !hasAttachedMultithread) {
           attachMultithread(player);

src/compat/browser_compatibility_types.ts

@@ -16,6 +16,7 @@
 
 import type { IListener } from "../utils/event_emitter";
 import globalScope from "../utils/global_scope";
+import type { IEmeApiImplementation } from "./eme";
 
 /**
  * Browser implementation of a VTTCue constructor.
@@ -229,6 +230,14 @@ export interface IMediaElementEventMap {
  *     implement it.
  */
 export interface IMediaElement extends IEventTarget<IMediaElementEventMap> {
+  /**
+   * Optional property allowing to force a specific MSE Implementation when
+   * relying on a given `IMediaElement`.
+   */
+  FORCED_MEDIA_SOURCE?: new () => IMediaSource;
+
+  FORCED_EME_API?: IEmeApiImplementation;
+
   /* From `HTMLMediaElement`: */
   autoplay: boolean;
   buffered: TimeRanges;
@@ -256,11 +265,10 @@ export interface IMediaElement extends IEventTarget<IMediaElementEventMap> {
 
   addTextTrack: (kind: TextTrackKind) => TextTrack;
   appendChild<T extends Node>(x: T): void;
-  hasAttribute(attr: string): boolean;
   hasChildNodes(): boolean;
   pause(): void;
   play(): Promise<void>;
-  removeAttribute(attr: string): void;
+  removeAttribute(attr: "src"): void;
   removeChild(x: unknown): void;
   setMediaKeys(x: IMediaKeys | null): Promise<void>;
 

src/compat/browser_detection.ts

@@ -170,7 +170,7 @@ let isA1KStb40xx = false;
     isPanasonic = true;
   } else if (navigator.userAgent.indexOf("Xbox") !== -1) {
     isXbox = true;
-  } else if (navigator.userAgent.indexOf("Model/a1-kstb40xx")) {
+  } else if (navigator.userAgent.indexOf("Model/a1-kstb40xx") !== -1) {
     isA1KStb40xx = true;
   }
 })();

src/compat/eme/eme-api-implementation.ts

@@ -28,16 +28,6 @@ import getOldKitWebKitMediaKeyCallbacks, {
 import getWebKitMediaKeysCallbacks from "./custom_media_keys/webkit_media_keys";
 import { WebKitMediaKeysConstructor } from "./custom_media_keys/webkit_media_keys_constructor";
 
-/**
- * Automatically detect and set which EME implementation should be used in the
- * current platform.
- *
- * You can call `getEmeApiImplementation` for a different implementation.
- */
-const defaultEmeImplementation = getEmeApiImplementation("auto");
-
-export default defaultEmeImplementation;
-
 /**
  * Generic interface harmonizing the structure of the different EME API
  * implementations the RxPlayer could use.
@@ -54,7 +44,7 @@ export interface IEmeApiImplementation {
   requestMediaKeySystemAccess: (
     keyType: string,
     config: MediaKeySystemConfiguration[],
-  ) => Promise<IMediaKeySystemAccess | CustomMediaKeySystemAccess>;
+  ) => Promise<IMediaKeySystemAccess>;
 
   /**
    * API allowing to listen for `"encrypted"` events, presumably sent by the
@@ -126,19 +116,21 @@ export type IPreferredEmeApiType = "auto" | "standard" | "webkit";
  * (@see IPreferredEmeApiType).
  * @returns {Object}
  */
-function getEmeApiImplementation(
+export default function getEmeApiImplementation(
   preferredApiType: IPreferredEmeApiType,
-): IEmeApiImplementation {
+): IEmeApiImplementation | null {
   let requestMediaKeySystemAccess: IEmeApiImplementation["requestMediaKeySystemAccess"];
   let onEncrypted: IEmeApiImplementation["onEncrypted"];
   let setMediaKeys: IEmeApiImplementation["setMediaKeys"] = defaultSetMediaKeys;
   let implementation: IEmeApiImplementation["implementation"];
   if (
-    (preferredApiType === "standard" ||
-      (preferredApiType === "auto" && !shouldFavourCustomSafariEME())) &&
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    (isNode || !isNullOrUndefined(navigator.requestMediaKeySystemAccess))
+    preferredApiType === "standard" ||
+    (preferredApiType === "auto" && !shouldFavourCustomSafariEME())
   ) {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    if (isNode || isNullOrUndefined(navigator.requestMediaKeySystemAccess)) {
+      return null;
+    }
     requestMediaKeySystemAccess = (...args) =>
       navigator.requestMediaKeySystemAccess(...args);
     onEncrypted = createCompatibleEventListener(["encrypted"]);

src/compat/eme/index.ts

@@ -19,12 +19,12 @@ import type {
   IEmeApiImplementation,
   IPreferredEmeApiType,
 } from "./eme-api-implementation";
-import defaultEmeImplementation from "./eme-api-implementation";
+import getEmeApiImplementation from "./eme-api-implementation";
 import generateKeyRequest from "./generate_key_request";
 import type { IEncryptedEventData } from "./get_init_data";
 import getInitData from "./get_init_data";
 import loadSession from "./load_session";
 
-export default defaultEmeImplementation;
+export default getEmeApiImplementation;
 export type { IEmeApiImplementation, IPreferredEmeApiType, IEncryptedEventData };
 export { closeSession, generateKeyRequest, getInitData, loadSession };