Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue + hls.js bug , Uncaught TypeError: Cannot read properties of undefined (reading 'call') #5146

Closed
5 tasks done
ba0gu0 opened this issue Jan 7, 2023 · 14 comments
Closed
5 tasks done

Comments

@ba0gu0
Copy link

ba0gu0 commented Jan 7, 2023

What version of Hls.js are you using?

1.2.9

What browser (including version) are you using?

Chrome/FixFox/Edge

What OS (including version) are you using?

Macos 13.1/windows11

Test stream

https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

Configuration

{ debug:true }

Additional player setup steps

I wrote a simple demo, also have problems.

  • package.json
{
  "name": "hlstest",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "hls.js": "^1.2.9",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}
  • APP.vue
<template>
    <video ref="hlsRef" controls></video>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import Hls from 'hls.js'

const hlsRef = ref()
const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'

onMounted( () => {
    var hls = new Hls({ debug:true });
    hls.loadSource(videoSrc);
    hls.attachMedia(hlsRef.value);
    // hlsRef.value.play()
})
</script>

Checklist

Steps to reproduce

  1. I wrote a simple demo, also have problems.
  2. command: yarn create vite hlsTest --template vue
  3. command: cd hlsTest && yarn install && yarn add hls.js
  4. edit APP.vue
  5. open chrome with http://localhost:viteport/
  6. this Bug will appear

Expected behaviour

Buffer video and play

What actually happened?

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__3 (997125ee-68fb-4269-81dd-f71b50571fe8:155:48)
    at ./src/demux/transmuxer-worker.ts (997125ee-68fb-4269-81dd-f71b50571fe8:11:66)
    at __webpack_require__3 (997125ee-68fb-4269-81dd-f71b50571fe8:155:48)
    at webpackBootstrapFunc2 (997125ee-68fb-4269-81dd-f71b50571fe8:207:28)
    at 997125ee-68fb-4269-81dd-f71b50571fe8:209:15

Console output

[log] > Debug logs enabled for "Hls instance"
hls.ts:375 [log] > stopLoad
hls.ts:343 [log] > loadSource:https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
stream-controller.ts:543 [log] > [stream-controller]: Trigger BUFFER_RESET
hls.ts:314 [log] > attachMedia
level-controller.ts:172 [log] > [level-controller]: manifest loaded, 5 level(s) found, first bitrate: 2149280
buffer-controller.ts:136 [log] > 1 bufferCodec event(s) expected
hls.ts:365 [log] > startLoad(-1)
level-controller.ts:251 [log] > [level-controller]: switching to level 3 from -1
level-controller.ts:537 [log] > [level-controller]: Attempt loading level index 3 with URL-id 0 https://test-streams.mux.dev/x36xhzz/url_0/193039199_mp4_h264_aac_hd_7.m3u8
base-stream-controller.ts:1404 [log] > [stream-controller]: STOPPED->IDLE
base-stream-controller.ts:1404 [log] > [subtitle-stream-controller]: STOPPED->IDLE
buffer-controller.ts:756 [log] > [buffer-controller]: Media source opened
stream-controller.ts:608 [log] > [stream-controller]: Level 3 loaded [0,63], cc [0, 0] duration:634.584
buffer-controller.ts:648 [log] > [buffer-controller]: Updating Media Source duration to 634.584
base-stream-controller.ts:620 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-63] level: 3, target: 0
base-stream-controller.ts:1404 [log] > [stream-controller]: IDLE->FRAG_LOADING
transmuxer-interface.ts:68 [log] > demuxing in webworker
transmuxer-interface.ts:200 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 0 p: -1 level: 3 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0
        initSegmentChange: true
base-stream-controller.ts:380 [log] > [stream-controller]: Loaded fragment 0 of level 3
[warn] > Exception in webworker, fallback to inline
TransmuxerInterface2.worker.onerror @ transmuxer-interface.ts:78
error(异步)
TransmuxerInterface2 @ transmuxer-interface.ts:76
_handleFragmentLoadProgress @ stream-controller.ts:692
progressCallback2 @ base-stream-controller.ts:357
onProgress @ fragment-loader.ts:131
readystatechange @ xhr-loader.ts:192
XMLHttpRequest.send(异步)
loadInternal @ xhr-loader.ts:134
Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__3 (045361ef-bf59-4198-aa1a-9292aa7e1528:155:48)
    at ./src/demux/transmuxer-worker.ts (045361ef-bf59-4198-aa1a-9292aa7e1528:11:66)
    at __webpack_require__3 (045361ef-bf59-4198-aa1a-9292aa7e1528:155:48)
    at webpackBootstrapFunc2 (045361ef-bf59-4198-aa1a-9292aa7e1528:207:28)
    at 045361ef-bf59-4198-aa1a-9292aa7e1528:209:15

Chrome media internals output

{
  "75:0": {
    "id": "75:0",
    "properties": {
      "render_id": 75,
      "player_id": 0,
      "created": "2023-01-07 03:06:42.312 UTC",
      "origin_url": "http://localhost:5173/",
      "kFrameUrl": "http://localhost:5173/",
      "kFrameTitle": "Vite + Vue",
      "url": "blob:http://localhost:5173/0ebd7db8-a2aa-43b2-a161-b2b8e9609a29",
      "kTextTracks": [],
      "info": "ChunkDemuxer",
      "kRendererName": "RendererImpl",
      "pipeline_state": "kStopped",
      "duration": 634.584,
      "event": "kWebMediaPlayerDestroyed"
    },
    "allEvents": [
      {
        "time": 0,
        "key": "created",
        "value": "2023-01-07 03:06:42.312 UTC"
      },
      {
        "time": 1.3940000000293367,
        "key": "origin_url",
        "value": "http://localhost:5173/"
      },
      {
        "time": 1.400000000023283,
        "key": "kFrameUrl",
        "value": "http://localhost:5173/"
      },
      {
        "time": 1.4020000000018626,
        "key": "kFrameTitle",
        "value": "Vite + Vue"
      },
      {
        "time": 1.7239999999874271,
        "key": "url",
        "value": "blob:http://localhost:5173/0ebd7db8-a2aa-43b2-a161-b2b8e9609a29"
      },
      {
        "time": 1.7270000000135042,
        "key": "kTextTracks",
        "value": []
      },
      {
        "time": 1.7370000000228174,
        "key": "info",
        "value": "ChunkDemuxer"
      },
      {
        "time": 1.8140000000130385,
        "key": "kRendererName",
        "value": "RendererImpl"
      },
      {
        "time": 3.037000000011176,
        "key": "pipeline_state",
        "value": "kStarting"
      },
      {
        "time": 2936.3369999999995,
        "key": "duration",
        "value": 634.584
      },
      {
        "time": 445750.74100000004,
        "key": "event",
        "value": "kWebMediaPlayerDestroyed"
      },
      {
        "time": 445750.767,
        "key": "pipeline_state",
        "value": "kStopping"
      },
      {
        "time": 445750.77300000004,
        "key": "pipeline_state",
        "value": "kStopped"
      }
    ],
    "lastRendered": 0,
    "firstTimestamp_": 420547.968
  },
@ba0gu0 ba0gu0 added Bug Needs Triage If there is a suspected stream issue, apply this label to triage if it is something we should fix. labels Jan 7, 2023
@ba0gu0
Copy link
Author

ba0gu0 commented Jan 9, 2023

I fixed this bug, hls.min.js should be used when loading modules.

import Hls from 'hls.js/dist/hls.min'

I can't understand why such a bug occurs.

@ba0gu0 ba0gu0 closed this as completed Jan 9, 2023
@nostrorom
Copy link

I fixed this bug, hls.min.js should be used when loading modules.

import Hls from 'hls.js/dist/hls.min'

I can't understand why such a bug occurs.

Having a similar issue on a sveltekit + vite project. It is fine in build & preview but does not work in dev

Your fix works, we've also found another fix by passing the enableWorker: false options.

These however are not satisfactory fixes, could this issue be reopened?

@robwalch robwalch reopened this Jan 12, 2023
@ba0gu0
Copy link
Author

ba0gu0 commented Jan 13, 2023

I fixed this bug, hls.min.js should be used when loading modules.

import Hls from 'hls.js/dist/hls.min'

I can't understand why such a bug occurs.

Having a similar issue on a sveltekit + vite project. It is fine in build & preview but does not work in dev

Your fix works, we've also found another fix by passing the enableWorker: false options.

These however are not satisfactory fixes, could this issue be reopened?

of course

@robwalch
Copy link
Collaborator

robwalch commented Jan 13, 2023

@nostrorom Here is my response to the current state of worker injection #5107 (comment)

I reopened this issue because @ba0gu0 provided excellent steps to reproduce with a specific build setup. If you'd like any work to be verified against your own setup please do the same.

#5107 will be used to track enhancing the API to allow for a customer Worker URL to be provided to bypass injection (especially useful if you are rebundling HLS.js). Either way, you should not need to set enableWorker: false in the latest release, as the player should fallback to this mode after error, but that has not been verified with this particular setup.

@nostrorom
Copy link

@robwalch Many thanks for your reply. I will test around in my project and follow the issues you linked. If I still I have issues I will provide steps to reproduce the bug in my own case. Cheers :)

@tonimercadante
Copy link

tonimercadante commented Feb 2, 2023

I'm facing this same issue using React + vite, the error started to show when i upgraded vite from 3.0.0 to the latest 4.0.4.

890d857a-de01-4981-acb1-e2af111b1ecd:187 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
at __webpack_require__3 (890d857a-de01-4981-acb1-e2af111b1ecd:187:52)
at ./src/demux/transmuxer-worker.ts (890d857a-de01-4981-acb1-e2af111b1ecd:13:70)
at __webpack_require__3 (890d857a-de01-4981-acb1-e2af111b1ecd:187:52)
at webpackBootstrapFunc2 (890d857a-de01-4981-acb1-e2af111b1ecd:239:32)
at 890d857a-de01-4981-acb1-e2af111b1ecd:241:19

Changing my hls import like @ba0gu0 did solved the issue:

// import Hls from "hls.js";

import Hls from "hls.js/dist/hls.min.js";

@stanislavpodolia
Copy link

stanislavpodolia commented Feb 22, 2023

I'm facing this same issue using React + vite, the error started to show when i upgraded vite from 3.0.0 to the latest 4.0.4.

890d857a-de01-4981-acb1-e2af111b1ecd:187 Uncaught TypeError: Cannot read properties of undefined (reading 'call') at __webpack_require__3 (890d857a-de01-4981-acb1-e2af111b1ecd:187:52) at ./src/demux/transmuxer-worker.ts (890d857a-de01-4981-acb1-e2af111b1ecd:13:70) at __webpack_require__3 (890d857a-de01-4981-acb1-e2af111b1ecd:187:52) at webpackBootstrapFunc2 (890d857a-de01-4981-acb1-e2af111b1ecd:239:32) at 890d857a-de01-4981-acb1-e2af111b1ecd:241:19

Changing my hls import like @ba0gu0 did solved the issue:

// import Hls from "hls.js";

import Hls from "hls.js/dist/hls.min.js";

For this to work with nuxt 3.2.2 I had to add 'hls.js/dist/hls.min.js' to vite.optimizeDeps.include in nuxt.config.ts, in case this might help someone or to resolve this issue.

@pedrolamas
Copy link

While using import Hls from "hls.js/dist/hls.min.js"; does solve the problem, that breaks the TypeScript typings.

As I am using vitejs, it was easier to keep the import as "hls.js" and then adding an alias to the vite.config.js with 'hls.js': 'hls.js/dist/hls.min.js'

@robwalch
Copy link
Collaborator

When you import from "hls.js" you get the main package and type definitions as they are declared in the package.json:

https://github.com/video-dev/hls.js/blob/v1.3.3/package.json#L14-L15

  "main": "./dist/hls.js",
  "types": "./dist/hls.js.d.ts",

When switching to a specific dist file like hls.min.js, you need to tell TypeScript where to find the type definitions: hls.js.d.ts.

Thanks and sorry for having putting up with this. There's been discussion about how to address worker instantiation without increasing payload size while keeping it effortless (#2910 and #5107). JavaScript optimization settings shouldn't get in the way as they do now with webworkify-webpack.js, and you shouldn't have to loose your TypeScript bindings or manually import type defs to get around this issue.

@robwalch robwalch added Confirmed and removed Needs Triage If there is a suspected stream issue, apply this label to triage if it is something we should fix. labels Feb 27, 2023
@robwalch robwalch added this to the 1.5.0 milestone Feb 27, 2023
@nathanbabcock
Copy link

As I am using vitejs, it was easier to keep the import as "hls.js" and then adding an alias to the vite.config.js with 'hls.js': 'hls.js/dist/hls.min.js'

Thanks for this tip, it was much more elegant than my hacky workaround:

// https://github.com/video-dev/hls.js/issues/5146#issuecomment-1375070955
import type HlsType from 'hls.js'
import HlsMin from 'hls.js/dist/hls.min'
const Hls = HlsMin as typeof HlsType

@robwalch
Copy link
Collaborator

Hello!

Version 1.4 is in beta now. We've switched from webpack to rollup for packaging. The library now includes ES module output with "hls.mjs", and a separate worker script "hls.worker.js" which you can point to via config.workerPath should you choose to use the ESM output or repackage HLS.js such that the UMD worker injection is no longer available. The worker injection is also much simpler, and the player will fallback to inline demuxing when it fails (this issue).

Please give it a try an provide feedback. If you are still running into issues with this release let us know and consider providing a sample we can use to reproduce the issue:

https://github.com/video-dev/hls.js/releases/tag/v1.4.0-beta.2

Thanks 👋

@robwalch robwalch modified the milestones: 1.5.0, 1.4.0 Mar 29, 2023
@pedrolamas
Copy link

@robwalch I just did a quick test with v1.4.0-beta.2, worked fine in both dev and build mode, with no need for my vite.config.js "hack"! 🙂

@nathanbabcock
Copy link

Tried it today also, it works great 👍

@robwalch
Copy link
Collaborator

Closing as fixed with #5299 in v1.4.0.

If you are still experiencing a similar issue in the latest release, please file a new bug report with steps to reproduce.

@video-dev video-dev locked as resolved and limited conversation to collaborators Apr 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Development

No branches or pull requests

7 participants