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

easychen commented 5 years ago

🐛 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 commented 5 years ago

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 commented 5 years ago

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

xiaoyuhen commented 5 years ago

hi @skaundin

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

zhihu / griffith