Failed to read the 'buffered' property from 'SourceBuffer'

[jared-hale-IL]

Describe the bug When running a Unity WebGL app an error popup appears with this message. This appears to be happening when opening a new video. It seems to happen more on older/worse machines.

Identical to this issue on the HLS.js board: https://github.com/video-dev/hls.js/issues/2268

Your Setup (please complete the following information):

• Unity version: 2018.2.21f1
• AVPro Video version: 1.9.14

Bug reports come in from machines like this: Laptop: OS: Windows 10 (64-bit) Device Make/Model: HP Stream 11 Processor: Intel Celeron N2840 RAM: 4 GB Browser: Chrome Browser Version: 74 (64-bit)

To Reproduce To reproduce this on a nice machine you have to play a few videos in a row really fast. On a machine that is not as good, it seems to have a chance of happening whenever a video is started.

Screenshots

[AndrewRH]

Hmmm..okay, I think someone reported this before, but we weren't able to work out why it was happening...

[jared-hale-IL]

@AndrewRH Let me know if you'd like any more info. I'm currently rebuilding a branch with the newest version of AVPro and I'll let you know how that goes.

[jared-hale-IL]

@AndrewRH I just finished a test with the upgraded version and the issue still occurs. Currently happening on version 1.10.0.

[jared-hale-IL]

@AndrewRH I don't suppose there is an update on this is there? We just had a big client run into the issue so I'm hoping to resolve it. In some of the cases that we have been unable to reproduce it is also losing audio when you click ok on the message. I'm happy to collect any data that might be useful for you. For now I'll probably try to wrap all of the calls in the AVProVideo.jslib with try catches. Hopefully that will catch this error.

[AndrewRH]

Hmmm I'm afraid I still have no update on this.....Were you able to solve it finally? Perhaps they fixed it in the newer versions of HLS.js?

[jared-hale-IL]

Unfortunately the newer versions of HLS.js haven't been able to fix this issue. It's still affecting us quite a bit but there aren't a lot of alternatives at this point. I'm happy to do some work and collect any data you might find useful.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because it has not had recent activity. If you wish to continue this issue, then please create a new issue as we do not monitor closed issues.

[nietehkg]

@jared-hale-IL I have the same problem and I Solved. When I use CloseVideo(). There are still many request work in F12/Network. The requests are come from hls.min.js. I guess AVProVideo didn't cancel streaming. So I modified AVProVideo.jslib to close streaming. If it help you, I will be happy. My English isn't very good, please don't mind.

var AVProVideoWebGL = {
    isNumber: function (item) {
        return typeof(item) === "number" && !isNaN(item);
    },
    assert: function (equality, message) {
        if (!equality)
            console.log(message);
    },
    count: 0,
    videos: [],
    hasVideos__deps: ["videos"],
    hasVideos: function (videoIndex) {
        if (videoIndex) {
            if (videoIndex == -1) {
                return false;
            }

            if (_videos) {
                if (_videos[videoIndex]) {
                    return true;
                }
            }
        } else {
            if (_videos) {
                if (_videos.length > 0) {
                    return true;
                }
            }
        }

        return false;
    },
    AVPPlayerInsertVideoElement__deps: ["count", "videos", "hasVideos"],
    AVPPlayerInsertVideoElement: function (path, idValues, externalLibrary) {
        if (!path) {
            return false;
        }

        // NOTE: When loading from the indexedDB (Application.persistantDataPath), 
        //       URL.createObjectURL() must be used get a valid URL.  See:
        //       http://www.misfitgeek.com/html5-off-line-storing-and-retrieving-videos-with-indexeddb/
        path = Pointer_stringify(path);
        _count++;

        var vid = document.createElement("video");
        var useNativeSrcPath = true;
        var vidData = {};
        if (externalLibrary == 1)
        {
            useNativeSrcPath = false;
            var player = dashjs.MediaPlayer().create();
            player.initialize(vid, path, true);
        }
        else if (externalLibrary == 2)
        {
            useNativeSrcPath = false;
            var hls = new Hls();
            hls.loadSource(path);
            hls.attachMedia(vid);
            vidData.hls = hls;
            hls.on(Hls.Events.MANIFEST_PARSED,function() 
            {
                //video.play();
            });
        }
        else if (externalLibrary == 3)
        {
            //useNativeSrcPath = false;
        }

        // Some sources say that this is the proper way to catch errors...
        /*vid.addEventListener('error', function(event) {
            console.log("Error: " + event);
        }, true);*/

        var hasSetCanPlay = false;
        var playerIndex;
        var id = _count;

        vidData.id = id;
        vidData.video = vid;
        vidData.ready = false;
        vidData.hasMetadata = false;
        vidData.isStalled = false;
        vidData.buffering = false;
        vidData.lastErrorCode = 0;

        _videos.push(vidData);
        playerIndex = (_videos.length > 0) ? _videos.length - 1 : 0;

        vid.oncanplay = function () {
            if (!hasSetCanPlay) {
                hasSetCanPlay = true;
                vidData.ready = true;
            }
            //console.log("ONCANPLAY");
        };

        vid.onloadedmetadata = function () {
            vidData.hasMetadata = true;
        };

        vid.oncanplaythrough = function () {
            vidData.buffering = false;
            //console.log("CANPLAYTHROUGH");
        };

        vid.onplaying = function () {
            vidData.buffering = false;
            vidData.isStalled = false;
            //console.log("PLAYING");
        };

        vid.onwaiting = function () {
            vidData.buffering = true;
            //console.log("WAITING");
        };

        vid.onstalled = function () {
            vidData.isStalled = true;
            //console.log("STALLED");
        }

        /*vid.onpause = function () {
        };*/

        vid.onended = function () {
            vidData.buffering = false;
            vidData.isStalled = false;
            //console.log("ENDED");
        };

        vid.ontimeupdate = function() {
            vidData.buffering = false;
            vidData.isStalled = false;
            //console.log("vid current time: ", this.currentTime);
        };

        vid.onerror = function (texture) {
            var err = "unknown error";

            switch (vid.error.code) {
                case 1:
                    err = "video loading aborted";
                    break;
                case 2:
                    err = "network loading error";
                    break;
                case 3:
                    err = "video decoding failed / corrupted data or unsupported codec";
                    break;
                case 4:
                    err = "video not supported";
                    break;
            }

            vidData.lastErrorCode = vid.error.code;

            console.log("Error: " + err + " (errorcode=" + vid.error.code + ")", "color:red;");
        };

        vid.crossOrigin = "anonymous";
        vid.autoplay = false;
        if (useNativeSrcPath)
        {
            vid.src = path;
        }

        HEAP32[(idValues>>2)] = playerIndex;
        HEAP32[(idValues>>2)+1] = id;

        return true;
    },
    AVPPlayerGetLastError__deps: ["videos", "hasVideos"],
    AVPPlayerGetLastError: function(playerIndex){
        if(!_hasVideos(playerIndex))
        {
            return 0;
        }

        var ret = _videos[playerIndex].lastErrorCode
        _videos[playerIndex].lastErrorCode = 0;

        return ret;
    },
    AVPPlayerFetchVideoTexture__deps: ["videos", "hasVideos"],
    AVPPlayerFetchVideoTexture: function (playerIndex, texture, init) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[texture]);
        if (!init)
        {
            GLctx.texSubImage2D(GLctx.TEXTURE_2D, 0, 0, 0, GLctx.RGBA, GLctx.UNSIGNED_BYTE, _videos[playerIndex].video);
        }
        else
        {
            GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA, GLctx.UNSIGNED_BYTE, _videos[playerIndex].video);
        }

        //NB: This line causes the texture to not show unless something else is rendered (not sure why)
        //GLctx.bindTexture(GLctx.TEXTURE_2D, null);
    },
    AVPPlayerUpdatePlayerIndex__deps: ["videos", "hasVideos"],
    AVPPlayerUpdatePlayerIndex: function (id) {
        var result = -1;

        if (!_hasVideos()) {
            return result;
        }

        _videos.forEach(function (currentVid, index)
        {
            if (currentVid != null && currentVid.id == id)
            {
                result = index;
            }
        });

        return result;
    },
    AVPPlayerWidth__deps: ["videos", "hasVideos"],
    AVPPlayerWidth: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.videoWidth;
    },
    AVPPlayerHeight__deps: ["videos", "hasVideos"],
    AVPPlayerHeight: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.videoHeight;
    },
    AVPPlayerReady__deps: ["videos", "hasVideos"],
    AVPPlayerReady: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        if (_videos) {
            if (_videos.length > 0) {
                if (_videos[playerIndex]) {
                    return _videos[playerIndex].ready;
                }
            }
        } else {
            return false;
        }

        //return _videos[playerIndex].video.readyState >= _videos[playerIndex].video.HAVE_CURRENT_DATA;
    },
    AVPPlayerClose__deps: ["videos", "hasVideos"],
    AVPPlayerClose: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        var vid = _videos[playerIndex].video;

        vid.src = "";
        vid.load();
        if (_videos[playerIndex].hls != null)
        {
          _videos[playerIndex].hls.destroy();
          _videos[playerIndex].hls = null;
        }

        _videos[playerIndex].video = null;
        _videos[playerIndex] = null;

        var allEmpty = true;
        for (i = 0; i < _videos.length; i++) {
            if (_videos[i] != null) {
                allEmpty = false;
                break;
            }
        }
        if (allEmpty)
        {
            _videos = [];
        }
        //_videos = _videos.splice(playerIndex, 1);

        // Remove from DOM
        //vid.parentNode.removeChild(vid);
    },
    AVPPlayerSetLooping__deps: ["videos", "hasVideos"],
    AVPPlayerSetLooping: function (playerIndex, loop) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        _videos[playerIndex].video.loop = loop;
    },
    AVPPlayerIsLooping__deps: ["videos", "hasVideos"],
    AVPPlayerIsLooping: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].video.loop;
    },
    AVPPlayerHasMetadata__deps: ["videos", "hasVideos"],
    AVPPlayerHasMetadata: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return (_videos[playerIndex].video.readyState >= 1);
        //return _videos[playerIndex].video.hasMetadata;
    },
    AVPPlayerIsPlaying__deps: ["videos", "hasVideos"],
    AVPPlayerIsPlaying: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        var video = _videos[playerIndex].video;

        return !(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA);
    },
    AVPPlayerIsSeeking__deps: ["videos", "hasVideos"],
    AVPPlayerIsSeeking: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].video.seeking;
    },
    AVPPlayerIsPaused__deps: ["videos", "hasVideos"],
    AVPPlayerIsPaused: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].video.paused;
    },
    AVPPlayerIsFinished__deps: ["videos", "hasVideos"],
    AVPPlayerIsFinished: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].video.ended;
    },
    AVPPlayerIsBuffering__deps: ["videos", "hasVideos"],
    AVPPlayerIsBuffering: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].buffering;
    },
    AVPPlayerIsPlaybackStalled__deps: ["videos", "hasVideos"],
    AVPPlayerIsPlaybackStalled: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].isStalled;
    },
    AVPPlayerPlay__deps: ["videos", "hasVideos"],
    AVPPlayerPlay: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        // https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
        // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
        var playPromise = _videos[playerIndex].video.play();
        if (playPromise !== undefined) 
        {
            playPromise.then(function() {
              // Automatic playback started!
              // Show playing UI.
             })
             .catch(function(error) {
              // Auto-play was prevented
              // Show paused UI.
              return false;
            });
        }
        return true;
    },
    AVPPlayerPause__deps: ["videos", "hasVideos"],
    AVPPlayerPause: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        _videos[playerIndex].video.pause();
    },
    AVPPlayerSeekToTime__deps: ["videos", "hasVideos"],
    AVPPlayerSeekToTime: function (playerIndex, timeSec, fast) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        var vid = _videos[playerIndex].video;

        if (vid.seekable && vid.seekable.length > 0) {
            for (i = 0; i < vid.seekable.length; i++) {
                if (timeSec >= vid.seekable.start(i) && timeSec <= vid.seekable.end(i)) {
                    vid.currentTime = timeSec;
                    return;
                }
            }

            if (timeSec == 0) {
                _videos[playerIndex].video.load();
            }
        }
    },
    AVPPlayerGetCurrentTime__deps: ["videos", "hasVideos"],
    AVPPlayerGetCurrentTime: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.currentTime;
    },
    AVPPlayerGetPlaybackRate__deps: ["videos", "hasVideos"],
    AVPPlayerGetPlaybackRate: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.playbackRate;
    },
    AVPPlayerSetPlaybackRate__deps: ["videos", "hasVideos"],
    AVPPlayerSetPlaybackRate: function (playerIndex, rate) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        _videos[playerIndex].video.playbackRate = rate;
    },
    AVPPlayerSetMuted__deps: ["videos", "hasVideos"],
    AVPPlayerSetMuted: function (playerIndex, mute) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        _videos[playerIndex].video.muted = mute;
    },
    AVPPlayerGetDuration__deps: ["videos", "hasVideos"],
    AVPPlayerGetDuration: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.duration;
    },
    AVPPlayerIsMuted__deps: ["videos", "hasVideos"],
    AVPPlayerIsMuted: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].video.muted;
    },
    AVPPlayerSetVolume__deps: ["videos", "hasVideos"],
    AVPPlayerSetVolume: function (playerIndex, volume) {
        if (!_hasVideos(playerIndex)) {
            return;
        }

        _videos[playerIndex].video.volume = volume;
    },
    AVPPlayerGetVolume__deps: ["videos", "hasVideos"],
    AVPPlayerGetVolume: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.volume;
    },
    AVPPlayerHasVideo__deps: ["videos", "hasVideos"],
    AVPPlayerHasVideo: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        var isChrome = !!window.chrome && !!window.chrome.webstore;

        if(isChrome){
            return Boolean(_videos[playerIndex].video.webkitVideoDecodedByteCount);
        }

        if(_videos[playerIndex].video.videoTracks){
            return Boolean(_videos[playerIndex].video.videoTracks.length);
        }

        return true;
    },
    AVPPlayerHasAudio__deps: ["videos", "hasVideos"],
    AVPPlayerHasAudio: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }

        return _videos[playerIndex].video.mozHasAudio || Boolean(_videos[playerIndex].video.webkitAudioDecodedByteCount) || Boolean(_videos[playerIndex].video.audioTracks && _videos[playerIndex].video.audioTracks.length);
    },
    AVPPlayerAudioTrackCount__deps: ["videos", "hasVideos"],
    AVPPlayerAudioTrackCount: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return false;
        }
        var result = 0;
        if (_videos[playerIndex].video.audioTracks)
        {
            result = _videos[playerIndex].video.audioTracks.length;
        }
        return result;
    },
    AVPPlayerSetAudioTrack: function (playerIndex, trackIndex) {
        if (!_hasVideos(playerIndex)) {
            return;
        }
        if (_videos[playerIndex].video.audioTracks) {
            var audioTracks = _videos[playerIndex].video.audioTracks;
            for (i = 0; i < audioTracks.length; i++) {
                audioTracks[i].enabled = (i == trackIndex);
            }
        }
    },
    AVPPlayerGetDecodedFrameCount__deps: ["videos, hasVideos"],
    AVPPlayerGetDecodedFrameCount: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        var vid = _videos[playerIndex].video;
        if (vid.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA) {
            return 0;
        }

        var frameCount = 0;

        if (vid.webkitDecodedFrameCount)
        {
            frameCount = vid.webkitDecodedFrameCount;
        }
        else if (vid.mozDecodedFrames)
        {
            frameCount = vid.mozDecodedFrames;
        }

        return frameCount;
    },
    AVPPlayerSupportedDecodedFrameCount__deps: ["videos, hasVideos"],
    AVPPlayerSupportedDecodedFrameCount: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        var vid = _videos[playerIndex].video;

        if (vid.webkitDecodedFrameCount)
        {
            return true;
        }
        else if (vid.mozDecodedFrames)
        {
            return true;
        }

        return false;
    },    
    AVPPlayerGetNumBufferedTimeRanges__deps: ["videos, hasVideos"],
    AVPPlayerGetNumBufferedTimeRanges: function(playerIndex){   
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        return _videos[playerIndex].video.buffered.length;
    },
    AVPPlayerGetTimeRangeStart__deps: ["videos, hasVideos"],
    AVPPlayerGetTimeRangeStart: function(playerIndex, rangeIndex){
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        if(rangeIndex >= _videos[playerIndex].video.buffered.length){
            return 0;
        }

        return _videos[playerIndex].video.buffered.start(rangeIndex);
    },
    AVPPlayerGetTimeRangeEnd__deps: ["videos, hasVideos"],
    AVPPlayerGetTimeRangeEnd: function(playerIndex, rangeIndex){
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        if(rangeIndex >= _videos[playerIndex].video.buffered.length){
            return 0;
        }

        return _videos[playerIndex].video.buffered.end(rangeIndex);
    }
};

autoAddDeps(AVProVideoWebGL, 'count');
autoAddDeps(AVProVideoWebGL, 'videos');
autoAddDeps(AVProVideoWebGL, 'hasVideos');
mergeInto(LibraryManager.library, AVProVideoWebGL);

[jared-hale-IL]

@nietehkg Hey, I didn't get an alert from this and I just barely saw this response. I tried this by just altering my AVProVideo.jslib file to include this:

if (_videos[playerIndex].hls != null)
{
    _videos[playerIndex].hls.destroy();
    _videos[playerIndex].hls = null;
}

It didn't fix the issue for me though. Do you know which version of HLS.js you are running? And which version of AVPro? Mine are a touch outdated because upgrading didn't fix this issue and I didn't want to have to run the whole product through QA if there wasn't really a reason to.