Dashjs player compatibility support

[codestrap97a]

Environment

• [x] The MPD passes the DASH-IF Conformance Tool on https://conformance.dashif.org/
• [x] The stream has correct Access-Control-Allow-Origin headers (CORS)
• [x] There are no network errors such as 404s in the browser console when trying to play the stream
• [x] The issue observed is not mentioned on https://github.com/Dash-Industry-Forum/dash.js/wiki/FAQ
• [x] The issue occurs in the latest reference client on http://reference.dashif.org/dash.js/ and not just on my page
• Link to playable MPD file: https://dev.kavoshfarda.ir/output/stream.mpd
• Dash.js version: 4.7.4
• Browser name/version: Brave, Version 1.66.115 Chromium: 125.0.6422.112
• OS name/version: Ubuntu 22.04

I am using clearkey encryption method to encrypt a sample clip for checking dashjs player functionality! I used Bento4 tool to dash and encrypt the clip with a key, everything is fine on Firefox desktop browser. the encrypted clip is sent to the browser and decrypted and played thoroughly without any issues. But on Chrome/Brave/Edge desktop and android browser devices, although the whole dash segments and mpd file is downloaded by browser but the clip is not played on such platforms/browsers!

The console error in chrome/ Brave browser:

[135][Stream] Error sending update() message! TypeError 

The client js code is shown below:

 function init() {
          const protData = {
                  "org.w3.clearkey": {
                          "clearkeys": {
                              "TcLE3lyyED7NgHNH6W0p6g" : "7SZugA/S7Yxok+CpHxnaWQ"
                          },
                          "priority": 0
                  }
          };
          var video,
              player,
              url = "https://dev.kavoshfarda.ir/output/stream.mpd";

          video = document.querySelector("video");
          player = dashjs.MediaPlayer().create();
          player.updateSettings({ 'debug': { 'logLevel': dashjs.Debug.LOG_LEVEL_DEBUG }});

          player.initialize(video, url, true);
          player.setProtectionData(protData);

      }
      function check() {
          if (location.protocol === 'http:' && location.hostname !== 'localhost') {
              var out = 'This page has been loaded under http. This might result in the EME APIs not being available to the player and any DRM-protected content will fail to play. ' +
                  'If you wish to test manifest URLs that require EME support, then <a href=\'https:' + window.location.href.substring(window.location.protocol.length) + '\'>reload this page under https</a>.'
              var div = document.getElementById('http-warning');
              div.innerHTML = out;
              div.style.display = ''
          }
      }

[davemevans]

At a guess I would say this is because your key is not base64url encoded as required by EME. Checking the browser code, it appears Firefox explicitly forgives this when parsing the key object, but Chromium is more strict, requiring base64url alphabet only.

Replace + with -, and / with _, and retry.

[codestrap97a]

At a guess I would say this is because your key is not base64url encoded as required by EME. Checking the browser code, it appears Firefox explicitly forgives this when parsing the key object, but Chromium is more strict, requiring base64url alphabet only.

Replace + with -, and / with _, and retry.

it works! I appreciate your assistance! you are right chromium uses strict base64 url!

[dsilhavy]

Thanks for your help @davemevans