[WEB] HLS with secured http headers

[BartusZak]

Hey @balvinderz,

video_player allows now to add http headers to request. (https://github.com/flutter/plugins/pull/3671)

Do you plan to implement that feature to allow to access secured .aac files directly from storage?

In my case I store .aac files in secured Amazon S3 Bucket. I have to be able to calculate separate HTTPS tokens for every .aac file just before I fetch them.

Thanks!

[balvinderz]

I will try to add headers support by next week.

[BartusZak]

Hey @balvinderz,

How are you?

Were you able to add those headers?

Thanks for update :)

[balvinderz]

I am good . I tried adding the headers . but whenever i sent custom headers using hls.js , the preflight request would fail . So i didnt update the plugin. I can push my changes to a separate branch if you want to check if it works for you .

[BartusZak]

Please do :)

Let me give a try.

Thanks a lot.

[balvinderz]

pushed my changes to headers branch . Sending headers are only supported in m3u8 files.

[ForceGT]

Can you make an example web app for the same My use case is

I have a url (hls) with the .m3u8 extension But to request that file I need to give four custom headers: Origin, Referer, Cookie and User-Agent Can you have an example or guide me how I could do the same?

[balvinderz]

You cannt pass Origin, Referer ,User-Agent in headers because they are sent by the browser . For cookie you can pass headers as

headers : { "useCookie" : true } in VideoPlayerController.network

[balvinderz]

@BartusZak did you try ?

[BartusZak]

@balvinderz

I just wanted to let you know that i'm going to take a look at it right now.

I cloned repo and flutter run to /example.

Player does not work:

• (canceled) for seq-8.ts,
• on play click nothing happen,
• no errors

I changed the source to https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 and retried.

Now it plays. Looks like that is source related issue.

I'm going to investigateheaders feature and get back to you.

Example result


flutter doctor -v

``` [√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.19042.867], locale en-US) • Flutter version 2.0.3 at C:\FlutterSDK\flutter • Framework revision 4d7946a68d (3 weeks ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2 [√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at C:\Users\bplos\AppData\Local\Android\sdk • Platform android-30, build-tools 30.0.3 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [√] Android Studio (version 4.1.0) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01) [√] VS Code (version 1.55.1) • VS Code at C:\Users\bplos\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.21.0 [√] Connected device (2 available) • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.114 • Edge (web) • edge • web-javascript • Microsoft Edge 89.0.774.68 ```

[BartusZak]

Hey @balvinderz

I was able to create a working sample with calculating different header per request feature. https://github.com/balvinderz/video_player_web_hls/pull/10

The code still requires refactor and removing of sigv4 library I use for calculating headers.

Please let me know If u want me to provide AWS_ACCESS_KEY and AWS_SECRET_KEY so you can test it out.

Google Dev Tools Network Tab


[balvinderz]

publish video_player_web_hls: 0.1.10 which has support for passing headers . Thank you @BartusZak for your help .

[mrinaljain]

Hey @balvinderz

I was able to create a working sample with calculating different header per request feature. #10

The code still requires refactor and removing of sigv4 library I use for calculating headers.

Please let me know If u want me to provide AWS_ACCESS_KEY and AWS_SECRET_KEY so you can test it out.

Google Dev Tools Network Tab

@BartusZak I am using the video_player_web_hls on top of flick_video_player to play .m3u8 videos in my flutter web app. the plugin works fine for normal .m3u8 URLs but when I am trying to implement AWS signed cookies for web and pass cookies in the header. It gives me the 403 error.

Can you please help me out if it something wrong implemented from my side or its problem from the plugin side?

[abdulllrashid]

@mrinaljain did you manage to solve this issue somehow? Stuck on this issue now and looking for solutions

[balvinderz]

Pass useCookies as true in headers.

[abdulllrashid]

Unfortunately, that doesn't seem to work for me. starting a new issue