hlsjs.tsx

import React, { Component } from 'react'
import { Subscription } from 'rxjs';
import Hls from "hls.js";

type HlsJSPlayerProps = {
  broadcastId: string
};

type HlsJSPlayerState = {};

export class HlsJSPlayer extends Component<HlsJSPlayerProps, HlsJSPlayerState> {

  private video = React.createRef<HTMLVideoElement>();

  private hls = new Hls(hlsConfig);

  componentDidMount() {
    this.reload();
  }

  onClick() {
    this.reload();
  }

  reload() {
    let url = "http://localhost:9002/streamers/" + this.props.broadcastId + "/index.m3u8?key=a&player=hlsjs";

    if (this.hls) {
      this.hls.detachMedia();
      this.hls.destroy();
    }
    this.hls = new Hls(hlsConfig);
    this.hls.loadSource(url);
    this.hls.attachMedia(this.video.current);
    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
      this.video.current.play();
    });
  }

  render() {
    return <div>
      <video ref={ this.video } width="480" height="360" style={{background: "black"}}></video>
      <div>
        <button onClick={ this.onClick.bind(this) } className="btn-small btn-primary">Reload</button>
      </div>
    </div>;
  }

}

const hlsConfig: Partial<Hls.Config> = {
  debug: false,
  enableWorker: true
};