Modify AES-128 KEY URI response

[ptdanh392]

What do you want to do with Hls.js?

I encode hls aes 128 with 16byte key, and player call a url that is api return 16byte (key)+16byte(random). The player decrypt hls aes is OK, But I change api return 16byte(random)+16byte(key), the player cannot decrypt hls aes. I change config in hls hls.on(Hls.Events.KEY_LOADING, function(event, data) {
fetch('http://my-api/api/key') .then(response => response.arrayBuffer()) .then(data => {
const keyBytes = new Uint8Array(data.slice(-16)); console.log('last 16byte ',keyBytes); const decryptConfig = { data:data, key: keyBytes, iv: new Uint8Array(16), / aesMode: 0, }; hls.config.decryptionData = [decryptConfig]; hls.startLoad(); }) .catch(error => { console.error('Error fetching or processing the key:', error); }); }); The hls player dont decrypt hls AES 128. What wrong in my code?

What have you tried so far?

No response

[robwalch]

Please fill out the Bug Report Template as part of your issue, making sure to include:

• Test stream/page (if possible)
• Steps to reproduce
• Expected behavior
• Actual behavior

If the issue is related to your stream, and you cannot share the stream, please include all the information we would need to reproduce the issue. This includes how to generate a stream that reproduces the issue.

[robwalch]

player call a url that is api return 16byte (key)+16byte(random).

KEY_LOADING is an event that notifies the application that a key is loading. It does not accept a return value with key data. Key data should either be hosted at or provided using a data:// URI in the KEY tag provided in the HLS Playlist.

[ptdanh392]

If I want provide a special key, how to change key in hls.js player? Ex: HLS encrypt with key AES 128, the hls player will recive key from URI, but key at URI will encrypt and it will decrypt to return orginal key and input original ky to player, How to input this key into hls player (use which funtion or what else?)

[robwalch]

You can use xhrSetup or a custom loader or perhaps to modify a request or provide a custom response.

[ptdanh392]

f (Hls.isSupported()) {
                const hls = new Hls({
                    xhrSetup: xhr => {
                        //xhr.withCredentials=true;
                        xhr.setRequestHeader('Authorization', 'Bearer ' + token)
                        console.log(token);
                    }
                });

                 hls.loadSource(videoSrc);
                 hls.attachMedia(video);
                 hls.on(Hls.Events.MANIFEST_PARSED, function () {
                     video.play();
                });
            } else {
                console.error('HLS.js is not supported in this browser.');
            }

I use this code it chow error Access to XMLHttpRequest at 'http://xxxxxx.xxx.com:8081/xxx_1080p/playlist.m3u8' from origin 'http://localhost' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.Understand this error THis script is right?

[robwalch]

xhrSetup and replacing loader with a custom loader class allow for requests to be intercepted, modified, and delayed. Use a custom loader if you need more context than the URL and if you want provide a custom response or bypass the request completely.

Forming valid requests and complying with the browsers cross-origin security policy is your responsibility.