반응형

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




반응형

해보고 확인한 것을 문서화하여 기록합니다.
최소 일주일에 한번 이상 포스트를 하려고 노력중입니다.

부족함이 있지만 도움이 되었으면 합니다.
잘못된 부분이나 개선점을 알려주시면 감사하겠습니다.



포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
시간날때 마다 이전 포스트가 문제 있는지 확인을 해보려고 노력하고 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.


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

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

댓글을 달아 주세요

">
  1. thumbnail
    익명
    2021.05.25 17:14

    비밀댓글입니다

  2. thumbnail
    익명
    2021.05.25 18:52

    비밀댓글입니다

  3. thumbnail
    익명
    2021.05.25 19:05

    비밀댓글입니다

    • thumbnail
      Favicon of https://webnautes.tistory.com BlogIcon webnautes
      2021.05.25 19:08 신고

      같은 폴더에 두파일을 넣었습니다. 어차피 node로 실행되기 때문에 위치를 무의미합니다

  4. thumbnail
    Favicon of https://noy-e.tistory.com BlogIcon noyeah

    안녕하십니까 위와같이 설정을 했는데 ip camera의 화면이 깨져서 나옵니다. vlc에서는 화면 깨짐없이 나오는데 어떻게 고쳐야 하는지 궁금합니다. 감사합니다.

    • thumbnail
      Favicon of https://webnautes.tistory.com BlogIcon webnautes
      2021.06.22 16:37 신고

      mpeg1muxer.js 파일에서 추가한 ffmpeg 옵션을 수정하면 될듯한데 이 부분은 옵션을 수정하며 딜레이 생기지 않는지 봐야 합니다.

      딜레이 줄이는 ffmpeg 옵션은 찾아봐야 합니다.

    • thumbnail
      Favicon of https://noy-e.tistory.com BlogIcon noyeah
      2021.06.22 17:38 신고

      빠른 답변 감사합니다!!!

  5. thumbnail
    Favicon of https://notehaja.tistory.com BlogIcon 기록러

    정보 감사합니다.
    그런데 저 같은 경우는 url이 동적으로 변경을 해야 하는데 그런 경우에는 어떻게 수정을 해줘야 할까요?
    ex) html에 cctv 영상 호출 버튼이 5개 정도 있고, 클릭한 버튼에 따라서 rtsp url이 변경이 되서 각기 다른 영상이 보여줘야 하는 경우인데요. 예시에서는 url이 index.js에 하드코딩되어 있는 상태에서 node index.js가 실행되길래요.
    node.js 사용이 익숙치 않다보니 질문드립니다.

    • thumbnail
      Favicon of https://webnautes.tistory.com BlogIcon webnautes
      2021.12.22 13:53 신고

      클릭한 버튼에 따라 전역변수의 url을 바꿔주면 될듯 보이는데 저도 전문분야가 아니라서 정확한 답변이 어렵습니다.