Incorrect keyid in clearkey encrypted Dash

I encrypted dash file with key_id (base64) - a7X8EOOtu8/8I5GOO4voug However when I play the file using videojs-contrib-eme, I get key_id(base64) -a7X8EOOtu8_8I5GOO4voug which is not correct.

There seems to be some issue in converting dash cenc pssh which is hex string. Here is the working example of the same.

Here is the working html of the issue

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>videojs-contrib-eme Demo</title>
<link href="https://cdn.jsdelivr.net/npm/video.js@7.5.4/dist/video-js.css" rel="stylesheet" />
</head>

<body>
  <video id="v1" class="video-js vjs-default-skin" controls data-setup='{"plugins": {"eme": {}}}'></video>
  <script src="https://cdn.jsdelivr.net/npm/video.js@7.8.0/dist/video.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-eme@3.7.0/dist/videojs-contrib-eme.js"></script>
  <script type="text/javascript">
      (function(window, videojs) {
        // Example derived from http://www.html5rocks.com/en/tutorials/eme/basics/#clear-key

        const KEY = 'f93deea9570bb4899a3a78d6ea502eeb'
        let player = window.player = videojs('v1');

        // Hex to Base64
        function hexToBase64(str) {
            return btoa(String.fromCharCode.apply(null,
              str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" "))
            ).replace(/\+/g, '-').replace(/\//g, '_').replace(/=*$/, '');
        }

        // Base64 to Hex
        function base64ToHex(str) {
            for (var i = 0, bin = atob(str.replace(/[ \r\n]+$/, "")), hex = []; i < bin.length; ++i) {
                let tmp = bin.charCodeAt(i).toString(16);
                if (tmp.length === 1) tmp = "0" + tmp;
                hex[hex.length] = tmp;
            }
            return hex.join("");
        }

        player.src({
          src: 'https://penpencil-vdo.sgp1.cdn.digitaloceanspaces.com/42570f11-b471-4468-9ff4-8fee7d3a5be2/master.mpd',
          type: 'application/dash+xml',
          keySystems: {
            'org.w3.clearkey': {
              videoContentType: 'video/mp4;codecs="avc1.42c01e"',
              audioContentType:  'audio/mp4;codecs="mp4a.40.2"',
              getLicense: (emeOptions, keyMessage, callback) => {
                let request = JSON.parse(new TextDecoder().decode(keyMessage));
                console.log('request', request)
                console.log('key_id base64', request.kids[0])
                console.log('key_id:', base64ToHex(request.kids[0]))
                let keyObj = {
                  kty: 'oct',
                  kid: request.kids[0],
                  k: hexToBase64(KEY)
                };

                console.log('Key object:', keyObj);
                callback(null, new TextEncoder().encode(JSON.stringify({
                  keys: [keyObj]
                })));
              }
            }
          }
        });
      }(window, window.videojs));
  </script>
</body>
</html>

videojs / videojs-contrib-eme

Incorrect keyid in clearkey encrypted Dash #104