Feature/web plugin

[SairamVemula]

New Feature Added Web Plugin

As I was working on a Flutter web/iOS project were I needed to implement DRM as I was searching and came across betterplayer and read through documentation but there is no support for web.

As I was looking for a way to implement this feature i came across this issue flutter/flutter#66931
where i have found this link https://github.com/AriasBros/flutter_video_player_web_shaka.

Thanks to AriasBros I got a understanding not how to port a js library to dart implementation some I thought why don't I try and contribute this feature into this package.

As for changes

1. Added web plugin in pubspec.yaml

2. Added kIsWeb checks https://github.com/jhomlala/betterplayer/compare/master...SairamVemula:betterplayer:feature/web_plugin?expand=1#diff-137646528f598ccebc81e702611e051581d92f83806d5c4201b712ec6e8019b1

3. Removed FittedBox for web as it causing issue with geasture detect need to look into it why https://github.com/jhomlala/betterplayer/compare/master...SairamVemula:betterplayer:feature/web_plugin?expand=1#diff-ecddee61430798b92fdcb934035f80423065e87794561a836e13155c91a1d340

4. Added drmType which will be need to better_player_web plugin https://github.com/jhomlala/betterplayer/compare/master...SairamVemula:betterplayer:feature/web_plugin?expand=1#diff-08b78d589bd10b4bb99993fbdca6fe451ce35c399112c072ad5d7553b3ce92b8

5. Remove fullscreen feature for web for now

6. Added a Web to example

TODO to for it to work on web need to add

<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.4.2/shaka-player.compiled.debug.min.js"
crossorigin="anonymous" referrerpolicy="no-referrer"></script>in index.html

[MaciejCaputa]

@SairamVemula Hi, the only thing that is stopping us from using betterplayer is web support. We are really counting on DRM support with betterplayer on web. We don't see an alternative that would help us achieve it.

How can I assist to fast track this PR?

[SairamVemula]

we had postponed DRM for something and just picked up it again and I have almost done with the backend for DRM on my project and will be continuing to work the DRM part

[MaciejCaputa]

we had postponed DRM for something and just picked up it again and I have almost done with the backend for DRM on my project and will be continuing to work the DRM part

Can I ask what DRM provider have you chosen for web?
Will it be possible with your implementation to use sing DRM provider across web, iOS or Android? or will one need 3 different DRM providers for each of these platforms?

Thank you in advance for taking these questions into a consideration

[SairamVemula]

I am currently using vdocipher.com provider.They provide for all the platforms that you have mentioned about and they even have their own Flutter SDK (https://pub.dev/packages/vdocipher_flutter) which is currently supported by all Android, IOS and Web.

[MaciejCaputa]

Thanks. Is it possible to self-host my videos and use a DRM provider? Do you know any that enable that?

[SairamVemula]

Both Widevide and Fairplay are working now

Just for Fairplay request transform code needs to be updated like this inside html script tag

    function requestFilter(type, request) {
      console.log('request filter before license check', type, request);
      console.log(shaka.net.NetworkingEngine.RequestType);
      if (type !== shaka.net.NetworkingEngine.RequestType.LICENSE) {
        return;
      }

      const originalPayload = new Uint8Array(request.body);
      const base64Payload = shaka.util.Uint8ArrayUtils.toBase64(originalPayload);
      request.headers['Content-Type'] = 'application/json';
      request.body = '{"spc": "' + base64Payload + '"}';
      console.log('request filter after license check');
    }

@JS('requestFilter')
external Function requestFilter;

[SairamVemula]

If you want HLS to working in web then add this in index.html head

<script src="https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.1.0/mux.min.js" crossorigin="anonymous"referrerpolicy="no-referrer"></script>