NodeJS로 ffmpeg 사용하여 rtsp 데이터를 websocket 으로 방송하기
1. 먼저, Node.js 프로젝트를 설정하고 필요한 패키지를 설치합니다. 예를 들어, `express`와 `ws` 패키지를 사용할 수 있습니다.
2. Express를 사용하여 웹 서버를 설정하고 WebSocket 연결을 처리합니다.
[code]
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}`);
});
});
[/code]
3. `child_process` 모듈을 사용하여 ffmpeg 명령을 실행하고, RTSP 비디오 스트림을 WebSocket으로 전송합니다.
[code]
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}`);
});
[/code]
4. 프로젝트를 실행하고 웹 브라우저에서 `http://localhost:3000`에 접속합니다. WebSocket 연결이 성공적으로 설정되면 RTSP 스트림이 웹 페이지에 표시됩니다.
경험에 의하면 다채널인 경우 http 트래픽이 차서 재생이 떠지거나 유실되는 점이 있습니다.
5. 클라이언트에서는 웹 브라우저의 JavaScript를 사용하여 WebSocket을 통해 전달된 RTSP 스트림을 재생할 수 있습니다. 주로 `<video>` 요소와 MediaSource API를 사용하여 재생합니다.
다음은 클라이언트 측에서 RTSP 스트림을 재생하는 간단한 예제입니다:
[code]
<!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>
[/code]
위의 예제에서 `'ws://localhost:3000'` 부분을 실제 WebSocket 서버 주소로 대체해야합니다.
클라이언트 측에서는 WebSocket에서 받은 데이터를 Blob으로 처리하고, MediaSource를 사용하여 비디오 요소에 연결합니다. 또한, SourceBuffer를 사용하여 Blob 데이터를 변환하여 재생 가능한 형식으로 만듭니다.
댓글 2개
안녕하세요.!
좋은 팁 감사합니다.
Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
이런 에러가 나는데 이 부분은 어떻게 해결해야합니까?
게시글 목록
| 번호 | 제목 |
|---|---|
| 17819 |
JavaScript
당신이 알아야 할 자바스크립트의 강력한 7가지 팁
3
|
| 17818 |
JavaScript
자바스크립트 코드를 더 깔끔하고 보기 좋게 작성하는 팁
1
|
| 17817 |
PHP
chatgtp
|
| 17816 |
JavaScript
textarea 자동 높이 설정하기.
1
|
| 17814 | |
| 17811 |
JavaScript
자바스크립트 플래이그라운드 - RUNJS
|
| 17810 | |
| 17809 | |
| 17808 |
JavaScript
16진수 색상코드 확인함수
|
| 17803 | |
| 17799 | |
| 17798 | |
| 17797 |
JavaScript
동영상파일 썸네일 만들기
8
|
| 17795 |
JavaScript
div태그의 사이즈가 변경되는 이벤트를 처리하기
|
| 17794 |
JavaScript
초->hh:mm:ss로 변환하는 함수
1
|
| 17793 |
JavaScript
JSON Beautify
|
| 17790 |
PHP
JSONP실례
|
| 17789 | |
| 17786 |
JavaScript
ThreeJS로 3디지구에 포인트 찍고 정보 현시기능
|
| 17774 | |
| 17760 | |
| 17755 | |
| 17750 | |
| 17729 | |
| 17722 | |
| 17714 | |
| 17708 | |
| 17686 | |
| 17676 |
JavaScript
유튜브 풀화면 묵음배경 예제
9
|
| 17666 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기