customSourceNode register HLSNode is not work

[jo-hnny]

i'm defginition a HLSNode, but it's not work; hls-node.js

import Hls from 'hls.js'
import VideoContext from 'videocontext'

export default class HLSNode extends VideoContext.NODES.VideoNode {
  constructor(
    src,
    gl,
    renderGraph,
    currentTime,
    playbackRate = 1,
    sourceOffset = 0,
    preloadTime = 4,
    videoElementAttributes = {},
    hlsOptions = {}
  ) {
    const video = document.createElement('video')

    const hls = new Hls(hlsOptions)
    // hls.loadSource(src)
    hls.attachMedia(video)

    super(
      video,
      gl,
      renderGraph,
      currentTime,
      playbackRate,
      sourceOffset,
      preloadTime,
      undefined,
      videoElementAttributes
    )

    this.hls = hls

    this._displayName = 'HLSNode'
    this._elementType = 'hls'

    this._src = src
  }

  _load() {

    console.log('is loadeed')

    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
      super._load()
        this._ready = true;
        this._triggerCallbacks("loaded");
    });

    this.hls.loadSource(this._src);
}

  destroy() {
    if (this.hls) {
      this.hls.destroy()
    }
    super.destroy()
  }
}

index.js

import VideoContext from 'videocontext'
import HlsNode from './hls-node'
import Hls from 'hls.js'

const hlsSrc = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'

const start = () => {

  registerVideo()

  const canvas = document.querySelector('canvas')

  const videoCtx = new VideoContext(canvas)

  const hlsNode = videoCtx.customSourceNode(HlsNode,hlsSrc)

  hlsNode.connect(videoCtx.destination)

  videoCtx.play()
}

const registerVideo = () => {
  const videoEle = document.querySelector('video')

  const hls = new Hls()

  hls.attachMedia(videoEle)

  hls.loadSource(hlsSrc)

}

window.onload = start

[richski]

Hi @johnny19941216, looks like our README example was a bit out of date, so I've just opened a PR (#172) with an updated example (view here) and a working CodeSandbox demo (view demo).

Please give those a try!

[jo-hnny]

Hi @johnny19941216, looks like our README example was a bit out of date, so I've just opened a PR (#172) with an updated example (view here) and a working CodeSandbox demo (view demo).

Please give those a try!

thank you very much, it's work,but on my project ,load very slow , so i delete the_load hook, load source in constructor, it's work better

import Hls from 'hls.js'
import VideoContext from 'videocontext'

export default class HLSNode extends VideoContext.NODES.VideoNode {
  constructor(
    src,
    gl,
    renderGraph,
    currentTime,
    sourceOffset,
    preloadTime,
    videoElementAttributes = {},
    playbackRate = 1.0,
    hlsOptions = {}
  ) {
    const video = document.createElement('video')

    super(
      video,
      gl,
      renderGraph,
      currentTime,
      playbackRate,
      sourceOffset,
      preloadTime,
      undefined,
      videoElementAttributes
    )

    this.hls = new Hls(hlsOptions)
    this.hls.attachMedia(video)
    this.hls.loadSource(src)

    this._displayName = 'HLSNode'
    this._elementType = 'hls'
  }

  destroy() {
    if (this.hls) {
      this.hls.destroy()
    }
    super.destroy()
  }
}

[PTaylour]

Great!

You could also try increasing the preloadTime if your video isn't loading in time for playback. That would mean _load is called earlier before playback.

Give us a shout if you have any questions