Reactjs: flv player не может загрузить поток с ошибкой TypeError: mediaElement не определен - PullRequest
Новая
       110

Reactjs: flv player не может загрузить поток с ошибкой TypeError: mediaElement не определен

0 голосов
/ 02 июля 2019

Я использую OBS для создания живого видеопотока и использую flv player для загрузки этого видеопотока. Однако я продолжаю получать следующую ошибку, когда я вызываю componentDidUpdate метод с this.buildPlayer();. Я должен обновить мой компонент, чтобы перезагрузить плеер с потоком, но вместо этого я получаю следующую ошибку, 

    TypeError: mediaElement is undefined
attachMediaElement
node_modules/flv.js/src/player/flv-player.js:131

  128 | 
  129 | attachMediaElement(mediaElement) {
  130 |   this._mediaElement = mediaElement;
> 131 |   mediaElement.addEventListener('loadedmetadata', this.e.onvLoadedMetadata);
      | ^  132 |   mediaElement.addEventListener('seeking', this.e.onvSeeking);
  133 |   mediaElement.addEventListener('canplay', this.e.onvCanPlay);
  134 |   mediaElement.addEventListener('stalled', this.e.onvStalled);

Код указан ниже: 

constructor(props) {
    super(props);
    this.videoRef = React.createRef();
    console.log(this.videoRef);
}

componentDidMount() {
    const { id } = this.props.match.params;
    this.props.fetchStream(id);
    this.buildPlayer();
}

componentDidUpdate() {
    this.buildPlayer();
}

componentWillUnmount() {
    this.player.destroy();
}

buildPlayer() {
    if (this.player || !this.props.stream) {
        return;
    }
    const { id } = this.props.match.params;
    this.player = flv.createPlayer({
        type: 'flv',
        url: `http://localhost:8000/live/${id}.flv`
    });
    console.log('Current Video Ref');
    console.log(this.videoRef.current);
    console.log('Player');
    console.log(this.player);
    this.player.attachMediaElement(this.videoRef.currnet);
    this.player.load();
}

render() {
        if (!this.props.stream) {
            return <div>Loading...</div>;
        }

        const { title, description } = this.props.stream;
        return (
            <div>
                <video ref={this.videoRef} style={{ width: '100%' }} controls />
                <h1>{title}</h1>
                <h5>{description}</h5>
            </div>
        );
    }

Не уверен, что вызвало сбой. Код работает отлично, если я удаляю вызов из метода componentDidUpdate(), однако видео не загружается из-за отсутствия обновления. Что я делаю не так?

1 Ответ

0 голосов
/ 03 июля 2019

"Код работает отлично, если я удаляю вызов из метода componentDidUpdate(), однако видео не загружается из-за отсутствия обновления. Что я делаю не так?"

Возможно, команда return; в вашем коде выходит из вашей функции.
Это означает отсутствие шансов инициализации нового видеопроигрывателя.

Попробуйте: 

buildPlayer() 
{
    if (this.player || !this.props.stream) 
    {
        var msg = "If you see this message:" + "\r\n" + "Then your old code would stop here..." + "\r\n" + "Result = No video object created";
        alert( msg );

        //# the "return" command will exit (quit) your function at this point.
        //# so any stuff below the "return;" line will NOT happen....
        //return; 
    }

    const { id } = this.props.match.params;

    var myType = 'flv'; 
    var myURL = 'http://localhost:8000/live/${id}.flv';

    this.player = flv.createPlayer({ type: myType, url: myURL });

    console.log('Current Video Ref');
    console.log(this.videoRef.current);
    console.log('Player');
    console.log(this.player);
    this.player.attachMediaElement(this.videoRef.current);
    this.player.load();
}
...