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

Author: shiyiya

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>

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",

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 = {
+  // ...
+}
 ```

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",

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)
 }

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"]
 }

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 = {
+  //...
+}
+```

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",

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)
 }
 

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",