質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

858閲覧

Hls.jsをCreate-react-appで作ったアプリで利用するとローカルでエラーになり再生できない

RoyMcCrain

総合スコア4

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/12/07 17:13

編集2022/01/12 10:55

前提・実現したいこと

hls.jsというライブラリをReact Hooksを用いてhlsな動画を再生できる物を作っています。

発生している問題・エラーメッセージ

Codesandboxでのdemo

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せずに修正ができる方法もありましたら教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問