jhomlala / betterplayer

Better video player for Flutter, with multiple configuration options. Solving typical use cases!
Apache License 2.0
932 stars 1.04k forks source link

Feature/web plugin #1210

Open SairamVemula opened 1 year ago

SairamVemula commented 1 year ago

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 https://github.com/flutter/flutter/issues/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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

SairamVemula commented 1 year ago

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 commented 1 year ago

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>
hanovof0811 commented 1 month ago

@SairamVemula Hi, I tried exmaple code but web drm clearkey is not working.