react에서 hls.js를 이용 mp4, m3u8, youtube 비디오 플레이어 만들기 Uncaught TypeError: Cannot read properties of undefined (reading 'call') 오류해결

회사에서 관련된 프로젝트를 진행하는데 왜인지 모르게 mp4비디오만 정상적으로 작동하고 m3u8비디오는 동작하지 않는다 도저히 모르겠어서 이것저것 다해보고 야근까지 하다가 퇴근하고 다시 써본다
원래같으면 작업하던 폴더에서 이어서 하겠지만 내 노트북이 볼모로 잡혀잇고 깃 또한 외부에서 접속이 불가하기에 간단한 프로젝트를 통해 hls.js가 과연 재대로 동작하는지 그리고 그대로 써도 되는지에대해 확인해보고자 아주 조그만 프로젝트를 만들어 보고자 한다

 

첫번째로

 

기본적인 react프로젝트를 만든 후 

npm install react react-dom react-scripts hls.js youtube-iframe

필요한 패키지를 설치해 준다

난 간단한 확인이 필요하기에 그냥 한페이지에 동영상 3개를 때려박을 생각이다

먼저 src폴더에 videoPlayer.js를 만들어준다

import React, { useEffect, useRef } from 'react';
import Hls from 'hls.js';

const VideoPlayer = ({ src, type }) => {
  const videoRef = useRef();

  useEffect(() => {
    if (type === 'm3u8' && Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(videoRef.current);
    }
  }, [src, type]);

  return type === 'm3u8' ? (
    <video ref={videoRef} controls />
  ) : (
    <video ref={videoRef} src={src} controls />
  );
};

export default VideoPlayer;

유튜브 비디오는 따로 만들어 줘야한다

import React, { useEffect, useRef } from 'react';
import YouTubeIframe from 'youtube-iframe';

const YouTubePlayer = ({ videoId }) => {
  const containerRef = useRef();

  useEffect(() => {
    YouTubeIframe.load((YT) => {
      new YT.Player(containerRef.current, {
        height: '360',
        width: '640',
        videoId: videoId,
      });
    });
  }, [videoId]);

  return <div ref={containerRef} />;
};

export default YouTubePlayer;

그 후 App.js에 보내주면 끝

import React from 'react';
import './App.css';
import VideoPlayer from './VideoPlayer';
import YouTubePlayer from './YouTubePlayer';

function App() {
  return (
    <div className="App">
      <h2>MP4 Video</h2>
      <VideoPlayer src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="mp4" />

      <h2>M3U8 Video</h2>
      <VideoPlayer src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" type="m3u8" />

      <h2>YouTube Video</h2>
      <YouTubePlayer videoId="dQw4w9WgXcQ" />
    </div>
  );
}

export default App;

링크는 내가 적은걸 활용해도 좋고 검색하면 금방나온다

 

군더더기 없이 완벽하게 동작하는것을 확인할 수 있다.

 

근데 왜 회사에선 안되는건데????

 

Uncaught TypeError: Cannot read properties of undefined (reading 'call')

이 오류가 문제다

 

알았다 

어떻게 알았냐하면

일단 새로운 빈프로젝트로 hls.js를 통해 비디오 플레이어를 만들어본다 -> 문제없음
package.json을 동일하게 맞추고 시도해본다 -> 문제없음

회사에선 vite기반 으로 react프로젝트를 생성했다 vite까지 동일하게 설정한다 -> 문제발생
그럼 vite랑 hls.js가 꼬이는 게 확실시 되었고......

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

이렇게 확실하게 지정해서 임포트 해주면 .. 문제가 해결된다..

개짜증나네

 

만약 같은 문제 때문에 여기까지 오셧다면

저보다 짧은 시간에 해결하길 바랍니다