그누보드 - NodeJS로 ffmpeg 사용하여 rtsp 데이터를 websocket 으로 방송하기

NodeJS로 ffmpeg 사용하여 rtsp 데이터를 websocket 으로 방송하기 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

NodeJS로 ffmpeg 사용하여 rtsp 데이터를 websocket 으로 방송하기 정보

node.js NodeJS로 ffmpeg 사용하여 rtsp 데이터를 websocket 으로 방송하기

본문

1. 먼저, Node.js 프로젝트를 설정하고 필요한 패키지를 설치합니다. 예를 들어, `express`와 `ws` 패키지를 사용할 수 있습니다.

2. Express를 사용하여 웹 서버를 설정하고 WebSocket 연결을 처리합니다.


const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = app.listen(3000, () => {
console.log('Server started on port 3000');
});
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
console.log('WebSocket connected');
// WebSocket에서 메시지 받을 때 처리하는 부분
ws.on('message', (message) => {
console.log(`Received message: ${message}`);
});
});

3. `child_process` 모듈을 사용하여 ffmpeg 명령을 실행하고, RTSP 비디오 스트림을 WebSocket으로 전송합니다.


const { spawn } = require('child_process');
const ffmpeg = spawn('ffmpeg', [
'-i', 'rtsp://your-rtsp-url',
'-f', 'mpegts',
'-codec:v', 'mpeg1video',
'-s', '640x480',
'-b:v', '800k',
'-bf', '0',
'-muxdelay', '0.001',
'-']);
ffmpeg.stdout.on('data', (data) => {
// ffmpeg 출력 데이터를 WebSocket으로 전송
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});
ffmpeg.stderr.on('data', (data) => {
console.error(`ffmpeg stderr: ${data}`);
});
ffmpeg.on('close', (code) => {
console.log(`ffmpeg process exited with code ${code}`);
});

4. 프로젝트를 실행하고 웹 브라우저에서 `http://localhost:3000`에 접속합니다. WebSocket 연결이 성공적으로 설정되면 RTSP 스트림이 웹 페이지에 표시됩니다.
경험에 의하면 다채널인 경우 http 트래픽이 차서 재생이 떠지거나 유실되는 점이 있습니다.

5. 클라이언트에서는 웹 브라우저의 JavaScript를 사용하여 WebSocket을 통해 전달된 RTSP 스트림을 재생할 수 있습니다. 주로 `<video>` 요소와 MediaSource API를 사용하여 재생합니다.

다음은 클라이언트 측에서 RTSP 스트림을 재생하는 간단한 예제입니다:


<!DOCTYPE html>
<html>
<head>
<title>RTSP Stream Player</title>
</head>
<body>
<video id="videoPlayer" autoplay controls></video>
<script>
const videoPlayer = document.getElementById('videoPlayer');
const socket = new WebSocket('ws://localhost:3000'); // WebSocket 서버 주소
// WebSocket으로부터 데이터를 받았을 때 처리하는 부분
socket.onmessage = function(event) {
if (event.data instanceof Blob) {
const blob = event.data;
const mediaSource = new MediaSource();
// MediaSource 초기화 완료 시 호출되는 이벤트 핸들러
mediaSource.addEventListener('sourceopen', function() {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="mp4a.40.2,avc1.64001E"');
// Blob 데이터를 ArrayBuffer로 변환하여 SourceBuffer에 추가
const fileReader = new FileReader();
fileReader.onload = function() {
sourceBuffer.appendBuffer(this.result);
};
fileReader.readAsArrayBuffer(blob);
});
// 비디오 요소에 MediaSource 연결
videoPlayer.src = URL.createObjectURL(mediaSource);
}
};
</script>
</body>
</html>

위의 예제에서 `'ws://localhost:3000'` 부분을 실제 WebSocket 서버 주소로 대체해야합니다.

클라이언트 측에서는 WebSocket에서 받은 데이터를 Blob으로 처리하고, MediaSource를 사용하여 비디오 요소에 연결합니다. 또한, SourceBuffer를 사용하여 Blob 데이터를 변환하여 재생 가능한 형식으로 만듭니다.