Example of playing DRM contents with shaka library

Pie Cas

unread,

Feb 22, 2017, 5:17:26 AM2/22/17

to Shaka Player Users

Hi, I'd like see a simple html+js code with shaka library that plays my encrypted video (using shaka-packager) wth the following command:

packager input=LynyrdSkynyrdFreebird.mp4,stream=audio,output=LynyrdSkynyrdFreebirdAudio.mp4 input=LynyrdSkynyrdFreebird.mp4,stream=video,output=LynyrdSkynyrdFreebirdVideo.mp4 --profile on-demand --enable_widevine_encryption --key_server_url "https://license.uat.widevine.com/cenc/getcontentkey/widevine_test" --content_id "3031323334353637" --signer "widevine_test" --aes_signing_key "1ae8ccd0e7985cc0b6203a55855a1034afc252980e970ca90e5202689f947ab9" --aes_signing_iv "d58ce954203b7c9a9a9d467f59839249" --mpd_output example-av.mpd

Here i saw that it's necessary to configure the player in the following way:

player.configure({ drm: { servers: { 'com.widevine.alpha': '//widevine-proxy.appspot.com/proxy' } } });

But how to merge the two things? I hope you could help me. Thanks in advance.

Please tell me a simple example of using shaka library for playing this contents.

Please help me step by step, starting from your repo on github. I'd like using shaka library in uncompiled mode, because of i'm using a tomcat docker container and i insert under webapps folder all my contents.

I have also to tell that for now i've used your index.html page on demo folder on github and than i've modified a ManifestUri in asset.js code for pointing to my mpd, when i click on one of the asset generated by gendeps.py script. Now i want to reproduce my content directly from a "click" on button.

Auto Generated Inline Image 1

Auto Generated Inline Image 2

Pie Cas

unread,

Feb 22, 2017, 5:43:27 AM2/22/17

to Shaka Player Users

I've saw here (in uncompiled mode section) and here; this is my code:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TurtleTube - Basic Test</title>
    <!-- Load the Shaka Player library. -->
  <script src="third_party/closure/goog/base.js"></script>
  <script src="dist/deps.js"></script>
  <script src="shaka-player.uncompiled.js"></script>
  </head>
  <body>
    <video id="video"
           width="640" height="480"
           crossorigin="anonymous"
           controls>
      Your browser does not support HTML5 video.
    </video>
  </body>
  <script>
    function initPlayer() {
      // Install polyfills.
      shaka.polyfill.installAll();

      // Find the video element.
      var video = document.getElementById('video');

      // Construct a Player to wrap around it.
      var player = new shaka.player.Player(video);

      // Attach the player to the window so that it can be easily debugged.
      window.player = player;

      // Listen for errors from the Player.
      player.addEventListener('error', function(event) {
        console.error(event);
      });

      // Construct a DashVideoSource to represent the DASH manifest.
      var mpdUrl = 'https://turtle-tube.appspot.com/t/t2/dash.mpd';
      var estimator = new shaka.util.EWMABandwidthEstimator();
      var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

      // Load the source into the Player.
      player.load(source);
    }
    document.addEventListener('DOMContentLoaded', initPlayer);
  </script>
</html>

I was expecting that i can see content, but in the network console there is the following error:

Uncaught TypeError: Cannot read property 'Player' of undefined
    at HTMLDocument.initPlayer

related to var player = new shaka.player.Player(video);

Jacob Trimble

unread,

Feb 22, 2017, 1:02:24 PM2/22/17

to Shaka Player Users

You also asked this on GitHub (https://github.com/google/shaka-player/issues/704), I will continue the discussion there.

Reply all

Reply to author

Forward