TypeError: "shaka.util.FakeEvent is not a constructor"

[yash0212]

Library versions

Video.js - 7.8.1 Shaka-player - 2.4.7 Videojs-shaka - 0.4.3

Code

<video controls id="video-box" class="video-js vjs-default-skin"></video>

<script>
    var player = videojs('video-box', {
        playbackRates: [0.5, 1, 1.5, 2],
        techOrder: ['shaka'],
        shaka: {
            debug: true

        }
    });

    player.qualityPickerPlugin();
    player.src([{
        type: 'application/dash+xml',
        src: 'output.mpd'
    }]);
</script>

Error

VIDEOJS: ERROR: TypeError: "shaka.util.FakeEvent is not a constructor" qualitySwitchCallback http://localhost:8000/node_modules/videojs-shaka/dist/videojs-shaka.min.js:2 handleClick http://localhost:8000/node_modules/videojs-shaka/dist/videojs-shaka.min.js:2 dispatcher https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js:12

[davidjamesherzog]

@yash0212 - Do you have an example stream to test with that this is failing for? The sample app has a DASH stream and it is working so I don't know what is example happening for you.

[yash0212]

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<MPD mediaPresentationDuration="PT1M58.886S" minBufferTime="PT1.500S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011" type="static" xmlns="urn:mpeg:dash:schema:mpd:2011">
    <Period duration="PT1M58.886S">
        <AdaptationSet segmentAlignment="true" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
            <Representation bandwidth="4496028" codecs="avc1.4d401f" frameRate="30" height="720" id="VIDEO-1" mimeType="video/mp4" startWithSAP="1" width="1280">
                <BaseURL>v4.mp4</BaseURL>
                <SegmentBase indexRange="918-1093" indexRangeExact="true">
                    <Initialization range="0-917"/>
                </SegmentBase>
            </Representation>
            <Representation bandwidth="2269084" codecs="avc1.4d401f" frameRate="30" height="480" id="VIDEO-2" mimeType="video/mp4" startWithSAP="1" width="854">
                <BaseURL>v3.mp4</BaseURL>
                <SegmentBase indexRange="923-1098" indexRangeExact="true">
                    <Initialization range="0-922"/>
                </SegmentBase>
            </Representation>
            <Representation bandwidth="1137422" codecs="avc1.4d401e" frameRate="30" height="360" id="VIDEO-3" mimeType="video/mp4" startWithSAP="1" width="640">
                <BaseURL>v2.mp4</BaseURL>
                <SegmentBase indexRange="919-1094" indexRangeExact="true">
                    <Initialization range="0-918"/>
                </SegmentBase>
            </Representation>
            <Representation bandwidth="575709" codecs="avc1.4d401e" frameRate="30" height="240" id="VIDEO-4" mimeType="video/mp4" startWithSAP="1" width="426">
                <BaseURL>v1.mp4</BaseURL>
                <SegmentBase indexRange="918-1093" indexRangeExact="true">
                    <Initialization range="0-917"/>
                </SegmentBase>
            </Representation>
            <Representation bandwidth="8418189" codecs="avc1.4d4028" frameRate="30" height="1080" id="VIDEO-5" mimeType="video/mp4" startWithSAP="1" width="1920">
                <BaseURL>v5.mp4</BaseURL>
                <SegmentBase indexRange="920-1095" indexRangeExact="true">
                    <Initialization range="0-919"/>
                </SegmentBase>
            </Representation>
        </AdaptationSet>
        <AdaptationSet>
            <Representation audioSamplingRate="48000" bandwidth="129761" codecs="mp4a.40.2" id="AUDIO-1" mimeType="audio/mp4" startWithSAP="1">
                <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
                <BaseURL>a1.mp4</BaseURL>
                <SegmentBase indexRange="832-1007" indexRangeExact="true">
                    <Initialization range="0-831"/>
                </SegmentBase>
            </Representation>
        </AdaptationSet>
    </Period>
</MPD>

This is the dash source file I am using, the link to this file

[davidjamesherzog]

@yash0212 - I used the dash stream you provided in Chrome via the sample app that comes with this repo (npm run sample) and it played just fine. Is this failing for you in a specific browser?

[yash0212]

I tested in 2 of the browsers on my machine and error is coming in both of them Chrome - 81.0.4044.138 Firefox - 76.0 I am using cdn links instead of node modules and serving the website using simple php localhost server

[yash0212]

I just noticed that the error is thrown if I use the non-debug shaka player module from the node_modules or cdn. If I use the debug shaka-player js from node_modules, I won't get the error but still the variantchanged event is not getting triggered

[davidjamesherzog]

@yash0212 - I am finally able to reproduce the error. Thanks for that extra information. I recently added the following code for a 3rd party integration I was working on that needed to know when the variantchanged event fires - https://github.com/davidjamesherzog/videojs-shaka/blob/master/src/setup-quality-tracks.js#L96-L98. Unfortunately, shaka player is not firing that event when the tracks are changed so I had to add this code. I'm thinking the following might work:

      // fire `variantchanged` event - determine if debug or not
      let event;
      if (shaka.util.FakeEvent) {
        event = new shaka.util.FakeEvent('variantchanged');
      } else {
        event = 'variantchanged';
      }
      shakaPlayer.dispatchEvent(event);

I tested in my sample app and it seems to do the trick. I want to test within my enterprise app to make sure it will truly work. I'll let you know soon if this is going to work or not. I'm not sure why I have to got through this check, but if I just do shakaPlayer.dispatchEvent('variantchanged');, I get a console error when using the debug version of shaka player.

[davidjamesherzog]

Dispatching the event in non-debug mode does not work. However, for the sake of getting rid of the error, I've changed the code only to fire the variantchanged event in debug mode. I will try and solve the underlying issue at a later date.

Fixed as part of https://github.com/davidjamesherzog/videojs-shaka/releases/tag/0.4.4