videojs / http-streaming

HLS, DASH, and future HTTP streaming protocols library for video.js
https://videojs-http-streaming.netlify.app/
Other
2.5k stars 422 forks source link

Unable to play dash with widevine drm #260

Closed bansalvks closed 2 years ago

bansalvks commented 5 years ago

Please do not delete the template, by filling out the required information we can investigate your issue more quickly.

Before opening an issue see if your problem can be resolved with the troubleshooting guide.

Description

Briefly describe the issue. Unable to play Dash with Widevine DRM

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

    <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268"> </video-js>

    <link href="//vjs.zencdn.net/7.2/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.2/video.min.js"></script>
    <script src="https://unpkg.com/@videojs/http-streaming@1.3.0/dist/videojs-http-streaming.js"></script>
    <script src="./node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.js"></script>

    <script>
        var player = videojs('my_video_1');
        player.eme();
        player.src({
            src: 'manifest.mpd',
            type: 'application/dash+xml',
            keySystems: {
                'com.widevine.alpha': '<url>'
            }
        });
    </script>

Results

Expected

The stream should have been played

Error output

VIDEOJS: ERROR: failed to get and set license TypeError: Failed to execute 'update' on 'MediaKeySession': Rejected with system code (13)

videojs-http-streaming version

what version of videojs-http-streaming does this occur with? videojs-http-streaming 1.3.0

videojs version

what version of videojs does this occur with? video.js 7.2

Browsers

what browsers are affected? please include browser and version for each

Platforms

what platforms are affected? please include operating system and version or device and version for each *

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below.

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below.

welcome[bot] commented 5 years ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

forbesjo commented 5 years ago

Would you be able to provide an example video for us to debug? If the source can't be shared with the public please post in the video.js slack and we can help you there

Kogoruhn commented 5 years ago

Same here. (But my proxy works w\o 400 errors) No log errors, no video. videojs 7.2.3, videojs-contrib-eme 3.4.1.

logs ``` 14:13:09.483 bundle.js:1748 VIDEOJS: DEBUG: VHS: PlaybackWatcher > initialize 14:13:09.522 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > playlist update [null => 0] 14:13:09.523 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.524 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] 14:13:09.528 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > playlist update [0 => 0] 14:13:09.528 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.529 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] 14:13:09.530 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > live window shift [0] 14:13:09.533 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > playlist update [null => undefined] 14:13:09.534 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.535 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.536 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] 14:13:09.540 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > INIT -> READY 14:13:09.541 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[main][video/mp4; codecs="avc1.4d401e"] > created SourceBuffer 14:13:09.545 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > playlist update [undefined => undefined] 14:13:09.546 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.547 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.548 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] 14:13:09.548 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > live window shift [0] 14:13:09.549 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > INIT -> READY 14:13:09.550 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[audio][audio/mp4; codecs="mp4a.40.2"] > created SourceBuffer 14:13:09.553 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [time: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.556 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > READY -> WAITING 14:13:09.562 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [time: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.563 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > READY -> WAITING 14:13:09.594 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > time mapping for timeline 0: [time: 0] [mapping: 0] 14:13:09.596 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > WAITING -> APPENDING 14:13:09.597 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > appending [0] of [0, 1] from playlist [0] [0 => 0.073] in timeline [0] 14:13:09.600 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > time mapping for timeline 0: [time: 0] [mapping: 0] 14:13:09.601 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > WAITING -> APPENDING 14:13:09.602 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > appending [0] of [0, 1] from playlist [undefined] [0 => 0.136875] in timeline [0] 14:13:09.605 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[main][video/mp4; codecs="avc1.4d401e"] > buffered [] 14:13:09.607 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[audio][audio/mp4; codecs="mp4a.40.2"] > buffered [] 14:13:09.609 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[main][video/mp4; codecs="avc1.4d401e"] > buffered [] 14:13:09.610 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > APPENDING -> READY 14:13:09.610 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.611 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.611 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] 14:13:09.612 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[audio][audio/mp4; codecs="mp4a.40.2"] > buffered [] 14:13:09.612 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > APPENDING -> READY 14:13:09.612 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.613 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:13:09.613 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] After click "PLAY" bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[main][video/mp4; codecs="avc1.4d401e"] > remove [0 => 0.073] 14:24:32.120 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[audio][audio/mp4; codecs="mp4a.40.2"] > remove [0 => 0.073] 14:24:32.122 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[main][video/mp4; codecs="avc1.4d401e"] > buffered [] 14:24:32.123 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[audio][audio/mp4; codecs="mp4a.40.2"] > buffered [] 14:24:32.128 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [time: 0.073] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:24:32.129 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > READY -> WAITING 14:24:32.132 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [time: 0.073] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:24:32.133 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > READY -> WAITING 14:24:32.143 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > WAITING -> APPENDING 14:24:32.144 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > appending [0] of [0, 1] from playlist [0] [0 => 0.073] in timeline [0] 14:24:32.146 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[main][video/mp4; codecs="avc1.4d401e"] > buffered [] 14:24:32.147 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[main] > APPENDING -> READY 14:24:32.147 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:24:32.148 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:24:32.148 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] 14:24:32.149 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > WAITING -> APPENDING 14:24:32.150 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > appending [0] of [0, 1] from playlist [undefined] [0 => 0.136875] in timeline [0] 14:24:32.151 bundle.js:1748 VIDEOJS: DEBUG: VHS: SourceUpdater[audio][audio/mp4; codecs="mp4a.40.2"] > buffered [] 14:24:32.151 bundle.js:1748 VIDEOJS: DEBUG: VHS: SegmentLoader[audio] > APPENDING -> READY 14:24:32.151 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:24:32.152 bundle.js:1748 VIDEOJS: DEBUG: VHS: SyncController > syncPoint for [segmentIndex: 0] chosen with strategy [VOD]: [time:0, segmentIndex:0] 14:24:32.152 bundle.js:1748 VIDEOJS: DEBUG: VHS: MPC > seekable updated [0 => 0.073] ```
vksbansal commented 5 years ago

Would you be able to provide an example video for us to debug? If the source can't be shared with the public please post in the video.js slack and we can help you there

@forbesjo Pardon me for a late reply.

As the token has a very short life span it would be use less to provide the source. If it is possible for you to provide me a time(with timezone) with your slack Id, I will send you the source at that particular time.

Here is a screen shot of error:

screenshot 2018-10-29 at 5 06 00 pm
Kogoruhn commented 5 years ago

@vksbansal temporary solution, works for me: downgrade video.js to 6.12.1, install videojs-contrib-dash (dash included eme service), see dash manual.

vksbansal commented 5 years ago

@Kogoruhn many thanks for the response.

Yes I have tried it and its working. However I will have to include 2 more libs for this videojs-contrib-dash and dash.js which obviously increasing the size of page.

Is it not possible for videojs-http-streaming (VHS) to add .dash (dash-if) support?

danrossi commented 5 years ago

I'm working on a feature that needs to reset the source after playing a different source. the keysystem config is there. But for some reason it hangs. No playback

player.src(player.currentSources());
danrossi commented 5 years ago

never mind sorry this works

 if (player.eme) {
                    player.eme.activeSrc = null;
 }
 player.src(player.currentSources());
vksbansal commented 5 years ago

A warm good morning to you @Kogoruhn and @forbesjo I am taking follow up regarding this issue. it has been 16 days since the ticket has marked as a bug. Just need to confirm if this issue will be fixed in the coming release?

many thanks, vikas bansal

danrossi commented 5 years ago

I have a fresh checkout of the eme plugin, with the sources of video.js. It is working with that wierd configuration requirement above.

gesinger commented 5 years ago

"system code (13)" is sometimes seen when the license is invalid. Are you able to check you server's response to ensure it's returning just a license (and not JSON or some other response)?

luiscerqueira commented 4 years ago

Hi @gesinger ,

I am currently experiencing this issue, My license server returns a json response containing the license. So, trying to overcome this poblem, I have implemented a getLicense logic to fetch the license and access the json object to get the license. The license comes as a string, but the plugin requests an ArrayBuffer; so what I am doing is encoding the license string using the TextEncoder API.

Even doing this, i got the: VIDEOJS: ERROR: failed to get and set license TypeError: Failed to execute 'update' on 'MediaKeySession': Rejected with system code (13)

Any thoughts of what could be the problem?

Here is the code i am doing:

getLicense: function(emeOptions, keyMessage, callback) {
        // request license
        fetch('http://localhost:8080/license-widevine/', { 
          method: "POST", 
          headers: {
            "Content-type": "application/octet-stream"
          },
          body: keyMessage
        })
        .then(response => {
          if(!response.ok)
            throw response;
          return response
        })
        .then(response => response.json())
        .then(data => {
          callback(null, new TextEncoder().encode(data.license));
        })
        .catch(err => {
          callback(err);
        });
      } 
nehaboob commented 4 years ago

@luiscerqueira - did you solve this problem ? we are facing the same issue.

sanjuc commented 3 years ago

yeah, we are also facing the same issue.

gkatsev commented 2 years ago

Unfortunately, due to the nature of DRM, it's almost impossible for us to help out with a live test page. Widevine does work with DASH in Video.js. See https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&fluid=false&minified=false&sync-workers=false&liveui=true&llhls=false&url=https%3A%2F%2Fstorage.googleapis.com%2Fshaka-demo-assets%2Fangel-one-widevine%2Fdash.mpd&type=application%2Fdash%2Bxml&keysystems=%7B%0A%20%20%22com.widevine.alpha%22%3A%20%22https%3A%2F%2Fcwip-shaka-proxy.appspot.com%2Fno_auth%22%0A%7D&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=false&override-native=true&preload=auto&mirror-source=true for an example. Also, make sure you're on a recent version of Video.js and videojs-contrib-eme.

If you're still facing an issue, please open a new issue with as much detail as possible. If you aren't able to share your test page publicly, you can find someone to help out privately on our slack (https://videojs-slack.herokuapp.com/).