Cannot read property 'samples' of undefined error when use mse and fmp4

[easychen]

🐛 Bug Report

getSamplesInterval.js:24 Uncaught TypeError: Cannot read property 'samples' of undefined
    at getVideoSamplesInterval (getSamplesInterval.js:24)
    at MP4Probe.updateInterval (mp4Probe.js:28)
    at MP4Probe.getFragmentPosition (mp4Probe.js:51)
    at MSE.seek (controller.js:66)
    at Player._this.handlePlay (player.js:82)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5030)
    at batchedUpdates$1 (react-dom.development.js:21437)
    at batchedUpdates (react-dom.development.js:2247)
    at dispatchEvent (react-dom.development.js:5110)
    at react-dom.development.js:21494
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21493)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)

To Reproduce

add player with fmp4 url , trun on useMSE , click the player then got error in console.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Player from 'griffith'

class App extends Component {
  render() {
    const sources = {
      hd:{
        play_url: 'http://localhost:9999/dog.f.mp4',
        bitrate:1522,
        duration:29,
        format:'mp4'
        
      }
    }
    return (
      <div className="App">
        <header className="App-header">
        <Player sources={sources} id="player"  useMSE={true} />
        </header>
      </div>
    );
  }
}

export default App;

error

getSamplesInterval.js:24 Uncaught TypeError: Cannot read property 'samples' of undefined
    at getVideoSamplesInterval (getSamplesInterval.js:24)
    at MP4Probe.updateInterval (mp4Probe.js:28)
    at MP4Probe.getFragmentPosition (mp4Probe.js:51)
    at MSE.seek (controller.js:66)
    at Player._this.handlePlay (player.js:82)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5030)
    at batchedUpdates$1 (react-dom.development.js:21437)
    at batchedUpdates (react-dom.development.js:2247)
    at dispatchEvent (react-dom.development.js:5110)
    at react-dom.development.js:21494
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21493)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)

Expected behavior

play video without anyerror

Link to repl or repo (highly encouraged)

https://github.com/easychen/bad-player-demo

Run npx envinfo --system --binaries --npmPackages griffith --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
 - Memory: 88.14 MB / 10.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.12.0 - /usr/local/bin/node
 - Yarn: 1.12.3 - ~/.yarn/bin/yarn
 - npm: 6.7.0 - /usr/local/bin/npm
 - Watchman: 4.7.0 - /usr/local/bin/watchman
## npmPackages:
 - griffith: ^1.1.1 => 1.1.1 

[xiaoyuhen]

hi @easychen

This bug occurs mainly because griffith-mp4 converts mp4 to fmp4 and then plays it through MSE. If your video is originally in fmp4 format, this process will throw an error.

we will fix this problem as soon as possible, thank you for your report.

[skaundin]

Hi, is this issue being actively looked it . I can take a look otherwise .

[xiaoyuhen]

hi @skaundin

This bug has not been deployed. You can contribute to it if you want 🤗