前提・実現したいこと
hls.jsというライブラリをReact Hooksを用いてhlsな動画を再生できる物を作っています。
発生している問題・エラーメッセージ
Codesandboxでは無事再生できますが、ローカルで実行すると以下のようなエラーが表示され映像が再生されません。
Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (c5d21dde-0532-4406-9ede-488c38df9621:42) at Object.srcDemuxDemuxerWorkerJs (c5d21dde-0532-4406-9ede-488c38df9621:184) at __webpack_require__ (c5d21dde-0532-4406-9ede-488c38df9621:42) at webpackBootstrapFunc (c5d21dde-0532-4406-9ede-488c38df9621:170) at c5d21dde-0532-4406-9ede-488c38df9621:173
該当のソースコード
tsx
1import * as React from "react"; 2import { render } from "react-dom"; 3import Hls from "hls.js"; 4 5import "./styles.css"; 6 7function App() { 8 const [hls, setHls] = React.useState(new Hls()); 9 const videoEl = React.useRef<HTMLVideoElement>(null); 10 11 React.useEffect(() => { 12 if (videoEl.current) { 13 hls.attachMedia(videoEl.current); 14 hls.on(Hls.Events.MEDIA_ATTACHED, () => { 15 hls.loadSource( 16 "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" 17 ); 18 }); 19 } 20 21 return () => { 22 if (hls) { 23 hls.destroy(); 24 } 25 }; 26 }); 27 28 return ( 29 <div className="App"> 30 <video ref={videoEl} controls /> 31 </div> 32 ); 33} 34 35const rootElement = document.getElementById("root"); 36render(<App />, rootElement); 37
試したこと
yarn build
した後にhttp-serverで見ると動画が再生されていたのでwebpack-dev-serverの不都合なのではと思ってます。
react-scripts
のversionは初めは3.3.0で出たエラーでしたがcodesandboxのソースコードでは2.1.3だったのですが、変わらず同じエラーが出ました。
補足情報(FW/ツールのバージョンなど)
macOS Catalina v10.15.1
"hls.js": "0.12.4", "react": "16.8.4", "react-dom": "16.8.4", "react-scripts": "2.1.3", "typescript": "3.3.3"
最後に
Create-react-appのみ利用経験がありwebpackやwebpack-dev-serverを直接設定したことがありません。
今回のエラーに関しては具体的にどこのエラーなのか助言をいただけるとありがたいです。
もしyarn eject
せずに修正ができる方法もありましたら教えていただきたいです。
あなたの回答
tips
プレビュー