(dash/HLS): update DRM configure (#151)

shiyiya · Feb 18, 2025 · 321e76c · 321e76c
1 parent 69ebbca
commit 321e76c
Show file tree

Hide file tree

Showing 12 changed files with 616 additions and 341 deletions.
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -143,8 +143,16 @@ const player = Player.make<Ctx>('#player', {
       // source: DANMAKU //SUPER_DANMAKU
     }),
     new Playlist({
-      initialIndex: 3,
+      initialIndex: 0,
       sources: [
+        {
+          title: 'DASH DRM',
+          id: 'dash-drm'
+        },
+        {
+          title: 'Hls DRM',
+          id: 'hls-drm'
+        },
         {
           title: 'hls - muti quality & subtitle & audio',
           src: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8'
@@ -197,12 +205,6 @@ const player = Player.make<Ctx>('#player', {
           ],
           highlights: highlight
         },
-        {
-          title: 'BROKEN SOURCE & POSTER',
-          src: '//',
-          poster: '//',
-          duration: '00:00'
-        },
         {
           title: "Disney's Oceans - MP4",
           src: 'https://vjs.zencdn.net/v/oceans.mp4',
@@ -232,7 +234,45 @@ const player = Player.make<Ctx>('#player', {
           // 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
           poster: 'https://api.imlazy.ink/img?webtorrent'
         }
-      ]
+      ],
+      customFetcher(player, source) {
+        if (source.id === 'dash-drm') {
+          ;(player.context.dash as ReturnType<typeof dash>).options.drm = {
+            'com.widevine.alpha': {
+              serverURL: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
+              httpRequestHeaders: {
+                'X-AxDRM-Message':
+                  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.4lWwW46k-oWcah8oN18LPj5OLS5ZU-_AQv7fe0JhNjA'
+              },
+              priority: 0
+            }
+          }
+          return {
+            ...source,
+            src: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd'
+          }
+        } else if (source.id == 'hls-drm') {
+          ;(player.context.hls as ReturnType<typeof hls>).options.config = {
+            ...player.context.hls.options.config,
+            emeEnabled: true,
+            drmSystems: {
+              'com.widevine.alpha': {
+                licenseUrl: 'https://widevine-proxy.appspot.com/proxy'
+              }
+            },
+            licenseXhrSetup(xhr) {
+              xhr.setRequestHeader('content-type', 'application/octet-stream')
+              xhr.setRequestHeader('Authorization', 'Bearer token') // or other headers
+            }
+          }
+
+          return {} //TODO
+        } else {
+          ;(player.context.dash as ReturnType<typeof dash>).options.drm = null
+          ;(player.context.hls as ReturnType<typeof hls>).options.config.emeEnabled = false
+        }
+        return source
+      }
       // m3uList: {
       //   sourceFormat(info) {
       //     const chunk = info.title.substring(3).split(' ')
@@ -257,8 +297,6 @@ function stopLoad() {
   player.$video.src = URL.createObjectURL(new Blob([u8.buffer]))
 }
 
-let src: string = player.context.playlist.options.sources[initialIndex].src
-
 render(
   html`
     <div>

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "lint": "prettier -w ./packages/*/**/*.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.8",
+    "@babel/core": "^7.26.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-destructuring": "^7.25.9",
     "@babel/plugin-transform-logical-assignment-operators": "^7.25.9",
@@ -41,7 +41,7 @@
     "@babel/plugin-transform-parameters": "^7.25.9",
     "@babel/plugin-transform-spread": "^7.25.9",
     "@babel/plugin-transform-template-literals": "^7.26.8",
-    "@changesets/cli": "^2.27.12",
+    "@changesets/cli": "^2.28.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/node": "^20.17.19",
     "@vitejs/plugin-react": "^4.3.4",

diff --git a/packages/dash/README.md b/packages/dash/README.md
@@ -33,20 +33,23 @@ npm i @oplayer/core @oplayer/dash dashjs
 
 ## DRM
 
-```js
-var protData = {
-  'com.widevine.alpha': {
-    serverURL: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
-    httpRequestHeaders: {
-      'X-AxDRM-Message':
-        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.4lWwW46k-oWcah8oN18LPj5OLS5ZU-_AQv7fe0JhNjA'
-    },
-    priority: 0
+```ts
+// https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd
+ODash({
+  drm: {
+    'com.widevine.alpha': {
+      serverURL: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
+      httpRequestHeaders: {
+        'X-AxDRM-Message':
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.4lWwW46k-oWcah8oN18LPj5OLS5ZU-_AQv7fe0JhNjA'
+      },
+      priority: 0
+    }
   }
-}
-
-player.changeSource({ src: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd' })
-player.once('loaderchange', () => {
-  player.context.dash.instance.setProtectionData(protData)
 })
+
+// update drm
+player.context.dash.options.drm = {
+  // ...
+}
 ```
diff --git a/packages/dash/package.json b/packages/dash/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/dash",
-  "version": "1.2.27-beta.0",
+  "version": "1.2.27-beta.1",
   "description": "Dash plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

diff --git a/packages/dash/src/index.ts b/packages/dash/src/index.ts
@@ -3,6 +3,7 @@ import type {
   BitrateInfo,
   MediaPlayerClass,
   MediaPlayerSettingClass,
+  ProtectionDataSet,
   QualityChangeRenderedEvent
 } from 'dashjs'
 
@@ -36,6 +37,8 @@ export interface DashPluginOptions {
    */
   config?: MediaPlayerSettingClass
 
+  drm?: ProtectionDataSet
+
   // qualityLabelBuilder?: (instance: MediaPlayerClass) => {
   //   name: string
   //   default: boolean
@@ -83,7 +86,7 @@ class DashPlugin implements PlayerPlugin {
 
   instance?: MediaPlayerClass
 
-  options: RequiredPartial<DashPluginOptions, 'config' | 'library'> = {
+  options: RequiredPartial<DashPluginOptions, 'config' | 'library' | 'drm'> = {
     textControl: true,
     audioControl: true,
     qualityControl: true,
@@ -119,9 +122,10 @@ class DashPlugin implements PlayerPlugin {
     this.instance = DashPlugin.library.MediaPlayer().create()
 
     const { player, instance } = this
-    const { config } = this.options
+    const { drm, config } = this.options
 
     if (config) instance.updateSettings(config)
+    if (drm) instance.setProtectionData(drm)
     instance.initialize($video, source.src, $video.autoplay)
 
     instance.on(DashPlugin.library.MediaPlayer.events.ERROR, function (event: any) {
@@ -325,6 +329,6 @@ const removeSetting = (player: Player) => {
   )
 }
 
-export default function create(options?: DashPluginOptions): PlayerPlugin {
+export default function create(options?: DashPluginOptions) {
   return new DashPlugin(options)
 }
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
@@ -16,8 +16,9 @@
     "incremental": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "plugins": [{ "name": "next" }]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/hls/README.md b/packages/hls/README.md
@@ -80,3 +80,28 @@ OHls({
   }
 })
 ```
+
+## DRM
+
+```ts
+OHls({
+  forceHLS: true, // use hls.js not native
+  config: {
+    emeEnabled: true,
+    drmSystems: {
+      'com.widevine.alpha': {
+        licenseUrl: 'https://widevine-proxy.appspot.com/proxy'
+      }
+    },
+    licenseXhrSetup(xhr) {
+      xhr.setRequestHeader('content-type', 'application/octet-stream')
+      xhr.setRequestHeader('Authorization', 'Bearer token') // or other headers
+    }
+  }
+})
+
+// update
+player.context.hls.options.config = {
+  //...
+}
+```
diff --git a/packages/hls/package.json b/packages/hls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/hls",
-  "version": "1.2.27",
+  "version": "1.2.28-beta.1",
   "description": "Hls plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

diff --git a/packages/hls/src/index.ts b/packages/hls/src/index.ts
@@ -195,7 +195,7 @@ class HlsPlugin implements PlayerPlugin {
   }
 }
 
-export default function create(options?: HlsPluginOptions): PlayerPlugin {
+export default function create(options?: HlsPluginOptions) {
   return new HlsPlugin(options)
 }
 

diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/plugins",
-  "version": "1.0.15-beta.2",
+  "version": "1.0.15-beta.3",
   "author": "shiyiya",
   "description": "oplayer's plugin",
   "homepage": "https://github.com/shiyiya/oplayer",

diff --git a/packages/plugins/src/playlist.ts b/packages/plugins/src/playlist.ts
@@ -16,7 +16,11 @@ interface Segment {
 
 export interface PlaylistOptions {
   sources?: PlaylistSource[]
-  customFetcher?: (source: PlaylistSource, index: number) => Promise<PlaylistSource> | PlaylistSource
+  customFetcher?: (
+    player: Player,
+    source: PlaylistSource,
+    index: number
+  ) => Promise<PlaylistSource> | PlaylistSource
   autoNext?: boolean
   autoHide?: boolean
   initialIndex?: number
@@ -29,6 +33,7 @@ export interface PlaylistOptions {
 
 export interface PlaylistSource extends Omit<Source, 'src'> {
   src?: string
+  id?: string | number
   duration?: string
   subtitles?: SubtitleSource[]
   thumbnails?: Thumbnails
@@ -132,7 +137,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
 
     return new Promise<PlaylistSource>((resolve) => {
       if (!source.src && this.options.customFetcher) {
-        resolve(this.options.customFetcher?.(source, idx))
+        resolve(this.options.customFetcher?.(this.player, source, idx))
         return
       }
       resolve(source)
@@ -239,7 +244,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
 
     this.player.context.ui.menu.register({
       name: this.player.locales.get('Playlist'),
-      
+
       icon: `<svg style="transform: scale(1.2);" viewBox="0 0 1024 1024"><path d="M213.333333 426.666667h426.666667c23.466667 0 42.666667 19.2 42.666667 42.666666s-19.2 42.666667-42.666667 42.666667H213.333333c-23.466667 0-42.666667-19.2-42.666666-42.666667s19.2-42.666667 42.666666-42.666666z m0-170.666667h426.666667c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666666H213.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667z m0 341.333333h256c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667H213.333333c-23.466667 0-42.666667-19.2-42.666666-42.666667s19.2-42.666667 42.666666-42.666667z m384 37.546667v180.48c0 16.64 17.92 26.88 32.426667 18.346667l150.613333-90.453334c13.653333-8.106667 13.653333-28.16 0-36.693333l-150.613333-90.453333a21.674667 21.674667 0 0 0-32.426667 18.773333z"></path></svg>`,
       position: 'top',
       onClick: () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -195,7 +195,7 @@ class HlsPlugin implements PlayerPlugin { @@
       }
     }
-    export default function create(options?: HlsPluginOptions): PlayerPlugin {
+    export default function create(options?: HlsPluginOptions) {
       return new HlsPlugin(options)
     }
@@ Expand Down @@