반응형

JavaScript를 사용하여 웹브라우저에서 RTSP 영상을 재생하는 예제입니다. 



2021. 04. 04  최초작성




1. FFmpeg를 다운로드 받습니다. 

 

https://www.gyan.dev/ffmpeg/builds/ 

 




압축을 풀어 C:\ffmpeg에 둡니다. 

 



C:\ffmpeg\bin를 시스템 PATH에 추가합니다.




2. 윈도우용 Node.js 설치 파일을  다운로드 받아 설치합니다. 

아래 링크에서 Windows Installer (.msi) 항목에 있는 것 중 64-bit를 다운로드하면 됩니다.  

https://nodejs.org/ko/download/

 




옵션 변경없이 설치를 진행합니다. 

 




3. 다음 두 파일을 적당한 곳에 생성합니다.

 

index.js

const Stream = require('node-rtsp-stream');
const streamUrl = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov";

stream = new Stream({
  name: 'foscam_stream',
  streamUrl: streamUrl,
  wsPort: 9999,
  width: 240,
  height: 160
});

 

test_client.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Client</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmpeg/0.1/jsmpg.js"></script>
</head>
<body>

<canvas></canvas>


<script>
  var client = new WebSocket('ws://localhost:9999');
  var canvas = document.querySelector('canvas');
  var player = new jsmpeg(client, {
    canvas: canvas 
  });
</script>
</body>
</html>



 

4. 명령프롬프트에서  앞에서 파일 2개를 생성한 폴더로 이동합니다.

 

초기화시 엔터만 계속 누르면 됩니다.

npm init



다음 두 패키지를 설치합니다.

npm install node-rtsp-stream

npm install ws



현재 폴더의 \node_modules\node-rtsp-stream에 있는 mpeg1muxer.js 파일을 수정합니다. 



수정전

 

  this.spawnOptions = [

    "-i",

    this.url,

    '-f',

    'mpegts',

    '-codec:v',

    'mpeg1video',

    // additional ffmpeg options go here

    ...this.additionalFlags,

    '-'

  ]



수정 후

 this.spawnOptions = [
    "-rtsp_transport", "tcp", "-i",
    this.url,
    '-f',
    'mpeg1video',
    '-b:v', '1000k',
    '-maxrate', '1000k',
    '-bufsize', '1000k',
     '-an', '-r', '24',
    // additional ffmpeg options go here
    ...this.additionalFlags,
    '-'
  ]

 




5. 명령 프롬프트에서 자바스크립트를 실행합니다.

 

node index.js



문제없다면 마지막 줄이 다음처럼 보여야 합니다.

 

frame=  356 fps= 25 q=2.0 size=    1169kB time=00:00:14.75 bitrate= 649.4kbits/s dup=5 drop=4 speed=1.05x

 





6. 웹브라우저에서 test_client.html 파일을 엽니다.  영상이 플레이 됩니다.

 





참고 

 

https://github.com/chpmrc/foscam_streamer




반응형

포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.

여러분의 응원으로 좋은 컨텐츠가 만들어집니다.
지금 본 내용이 도움이 되었다면 유튜브 구독 부탁드립니다. 감사합니다 ~~

유튜브 구독하기


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">