React - hls로 스트리밍되는 영상 재생하기

 

hls형식의 미디어를 재생하려면 브라우저 호환성으로 인해 hls.js를 import하여 가져오는 것이 추천된다.

yarn add hls.js

 

react에서 미디어를 재생하기 위해 react-player를 추가로 설치한다.

yarn add react-player

 

렌더링하는 부분에 RectPlayer를 통해 master.m3u8이 재생될 수 있도록 코드를 입력한다.

return (
    <>
        <ReactPlayer src='./cat/master.m3u8' controls={ true } />
    </>
)

 

전체 코드는 다음과 같다.

import react from 'react'
import ReactPlayer from 'react-player'
import Hls from 'hls.js'

function App() {
    return (
        <>
            <ReactPlayer src='./cat/master.m3u8' controls={ true } />
        </>
    )
}

export default App

import한 hls를 쓰지않더라도 저렇게 import한 코드를 입력해줘야 오류없이 재생될 수있다.

 

 

Network탭을 보면 다음과 같이 ts segment들이 순차적으로 불러와지면서 영상이 재생되는 것을 확인할 수 있다. mp4파일과 다른 점은 mp4파일은 먼저 페이지가 로드되면 미디어를 한 번에 다운받아 재생하는데 hls는 ts segment를 순차적으로 받아와 재생하게 된다.

 

---

참고 사이트:

https://www.npmjs.com/package/react-player

react-player

 

https://www.npmjs.com/package/hls.js?activeTab=readme

hls.js