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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 17523 | |
| 17516 | |
| 17515 | |
| 17514 |
PHP
PHP 배열순설정
1
|
| 17498 |
PHP
PHP로 PDF파일 다루기
4
|
| 17493 | |
| 17490 | |
| 17487 | |
| 17485 |
JavaScript
jQuery없이 네티브자바스크립트로 서버에 요청보내기 7 - JSONP
5
|
| 17481 |
JavaScript
jQuery없이 네티브자바스크립트로 서버에 요청보내기 6- CORS
1
|
| 17478 |
JavaScript
jQuery없이 네티브자바스크립트로 서버에 요청보내기5- 파일업로드
1
|
| 17477 | |
| 17474 | |
| 17473 |
JavaScript
jQuery없이 네티브자바스크립트로 서버에 요청보내기4 - JSON
|
| 17472 | |
| 17470 |
JavaScript
jQuery없이 네티브자바스크립트로 서버에 요청보내기2 - POST
|
| 17469 |
JavaScript
jQuery없이 네티브자바스크립트로 서버에 요청보내기1 - GET
2
|
| 17463 |
JavaScript
express로 간단한 부트스트랩 내비게이션 메뉴 생성기(아주 쉬움)
|
| 17462 | |
| 17461 |
PHP
PHP로 채트서버 만들기
|
| 17460 |
JavaScript
ThreeJS로 3디 지구 만들기
|
| 17458 | |
| 17457 |
PHP
PHP 랜덤생성하기
|
| 17454 | |
| 17453 |
MySQL
DB백업코드
5
|
| 17448 |
JavaScript
숫자에 천단위로 콤마(,) 찍기
11
|
| 17447 | |
| 17446 | |
| 17445 | |
| 17444 |
node.js
nodejs 에서 CSV파일 파싱하여 배열로 변환하기
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기