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 데이터를 변환하여 재생 가능한 형식으로 만듭니다.!-->!-->
추천
1
1
댓글 2개
제 닉 인증합니다. 감사합니다
안녕하세요.!
좋은 팁 감사합니다.
Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
이런 에러가 나는데 이 부분은 어떻게 해결해야합니까?