RTSP 웹 스트리밍 오픈소스 프로젝트 - RTSPtoWeb으로 React에서 스트리밍 해보기

 

 

프로젝트 정보
Language: Go
GitHub: https://github.com/deepch/RTSPtoWeb (MIT License)
API Docs: https://github.com/deepch/RTSPtoWeb/blob/master/docs/api.md
Docker Image: ghcr.io/deepch/rtsptoweb:latest

 

주요 기능

• RTSP URL을 통해 Stream을 추가하면 HLS 스트리밍 엔드포인트를 통해 클라이언트에서 스트리밍 가능
• 다중 채널 지원
• Admin UI
• ID/PW, Token 인증 방식 지원
• HTTPS 지원

Docker로 서버 띄워보기

$ docker run -d --name rtsp-to-web -p 8083:8083 ghcr.io/deepch/rtsptoweb:latest

 

컨테이너 실행 후 http://127.0.0.1:8083 으로 관리자 UI 접속하면 아래와 같은 화면 볼 수 있음

 

테스트용 RTSP URL으로 스트림을 4개 추가해 둔 상태

 

테스트 RTSP URL으로 스트리밍 확인

공공데이터 포탈 접속하여 RTSP URL 가져옴 (https://www.data.go.kr/data/15063717/fileData.do)

충청남도 천안시_교통정보 CCTV_20220922

 

 

CCTV 중 하나 선택하여 RTSP URL 복사 후 관리자 UI에서 우측 상단 Add Stream

 

 

위와 같이 정보 입력 후 Save stream 버튼 눌러 스트림 저장

 

 

위와 같이 스트림이 추가되면 MSE, HLS 버튼을 눌러 스트리밍이 되는지 확인 (처음에 몇 초 걸림)

 

 

React에서 스트리밍 해보기

React 프로젝트 생성 및 모듈 설치

$ npx create-react-app rtsp-streaming

$ npm i react-hls-player

 

방금 추가 한 StreamID 확인

$ curl http://demo:demo@127.0.0.1:8083/streams

 

위와 같이 서버에 요청을 보내면 Stream 정보를 받을 수 있음

{
    "status": 1,
    "payload": {
        "4b4d73f8-89e2-4995-b5f9-47d5d1edd13e": { // StreamID
            "channels": {
                "0": { // Channel ID
                    "on_demand": true,
                    "status": 1,
                    "url": "rtsp://210.99.70.120:1935/live/cctv003.stream"
                }
            },
            "name": "역말 오거리"
        }
    }
}

 

App.js 구현

import ReactHlsPlayer from "react-hls-player";

function App() {

  const streamId = '4b4d73f8-89e2-4995-b5f9-47d5d1edd13e';
  const chId = '0';

  return (
    <div
	  style={{
	    width: "100%",
	    height: "100%"
	  }}
    >
      <ReactHlsPlayer 
        src={`http://127.0.0.1:8083/stream/${streamId}/channel/${chId}/hls/live/index.m3u8`}
        controls={true}
        autoPlay={false}
        width={640}
        height={480}
      />
    </div>
  )
}

export default App;

 

React 앱을 실행한 후 localhost:3000으로 접속하면 다음과 같은 화면을 볼 수 있음

 

 

API Docs를 참고하여 React에서 직접 Stream을 추가/수정/삭제할 수 있고, 스트리밍 할 수 있음