<div id="readability-page-1" class="page"><div>

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





 2021. 04. 04 최초작성









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




<a href="https://www.gyan.dev/ffmpeg/builds/">https://www.gyan.dev/ffmpeg/builds/</a>



<figure><img data-lazy-fallback="1" data-attachment-id="5912" data-permalink="https://webnautes.blog/5911/word-image-5911-1/" data-orig-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?fit=789%2C335&amp;ssl=1" data-orig-size="789,335" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="word-image-5911-1" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?fit=300%2C127&amp;ssl=1" data-large-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?fit=789%2C335&amp;ssl=1" decoding="async" fetchpriority="high" width="789" height="335" src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?resize=789%2C335&amp;ssl=1" alt="" sizes="(max-width: 789px) 100vw, 789px" data-recalc-dims="1" data-old-src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?resize=789%2C335&amp;is-pending-load=1#038;ssl=1" data-lazy-srcset="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?w=789&amp;ssl=1 789w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?resize=300%2C127&amp;ssl=1 300w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-1.png?resize=768%2C326&amp;ssl=1 768w"></figure>








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




<figure><img data-lazy-fallback="1" data-attachment-id="5913" data-permalink="https://webnautes.blog/5911/word-image-5911-2/" data-orig-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?fit=643%2C227&amp;ssl=1" data-orig-size="643,227" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="word-image-5911-2" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?fit=300%2C106&amp;ssl=1" data-large-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?fit=643%2C227&amp;ssl=1" decoding="async" width="643" height="227" src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?resize=643%2C227&amp;ssl=1" alt="" sizes="(max-width: 643px) 100vw, 643px" data-recalc-dims="1" data-old-src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?resize=643%2C227&amp;is-pending-load=1#038;ssl=1" data-lazy-srcset="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?w=643&amp;ssl=1 643w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-2.png?resize=300%2C106&amp;ssl=1 300w"></figure>




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









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





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




<a href="https://nodejs.org/ko/download/">https://nodejs.org/ko/download/</a>



<figure><img data-lazy-fallback="1" data-attachment-id="5914" data-permalink="https://webnautes.blog/5911/word-image-5911-3/" data-orig-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?fit=1022%2C467&amp;ssl=1" data-orig-size="1022,467" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="word-image-5911-3" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?fit=300%2C137&amp;ssl=1" data-large-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?fit=1022%2C467&amp;ssl=1" decoding="async" width="1022" height="467" src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?resize=1022%2C467&amp;ssl=1" alt="" sizes="(max-width: 1022px) 100vw, 1022px" data-recalc-dims="1" data-old-src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?resize=1022%2C467&amp;is-pending-load=1#038;ssl=1" data-lazy-srcset="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?w=1022&amp;ssl=1 1022w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?resize=300%2C137&amp;ssl=1 300w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-3.png?resize=768%2C351&amp;ssl=1 768w"></figure>








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




<figure><img data-lazy-fallback="1" data-attachment-id="5915" data-permalink="https://webnautes.blog/5911/word-image-5911-4/" data-orig-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?fit=495%2C387&amp;ssl=1" data-orig-size="495,387" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="word-image-5911-4" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?fit=300%2C235&amp;ssl=1" data-large-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?fit=495%2C387&amp;ssl=1" decoding="async" loading="lazy" width="495" height="387" src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?resize=495%2C387&amp;ssl=1" alt="" sizes="(max-width: 495px) 100vw, 495px" data-recalc-dims="1" data-old-src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?resize=495%2C387&amp;is-pending-load=1#038;ssl=1" data-lazy-srcset="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?w=495&amp;ssl=1 495w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-4.png?resize=300%2C235&amp;ssl=1 300w"></figure>








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





 index.js




<pre><code>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
});
</code></pre>








 test_client.html




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

&lt;canvas&gt;&lt;/canvas&gt;


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








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





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




<pre><code>npm init </code></pre>








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




<pre><code>npm install node-rtsp-stream 
npm install ws</code></pre>








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





 수정전




<pre><code> this.spawnOptions = [
 "-i",
 this.url,
 '-f',
 'mpegts',
 '-codec:v',
 'mpeg1video',
 // additional ffmpeg options go here
 ...this.additionalFlags,
 '-'
 ]
</code></pre>








 수정 후




<pre><code> 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,
 '-'
 ]
</code></pre>








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




<pre><code>node index.js </code></pre>








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




<pre><code>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</code></pre>



<figure><img data-lazy-fallback="1" data-attachment-id="5916" data-permalink="https://webnautes.blog/5911/word-image-5911-5/" data-orig-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?fit=930%2C322&amp;ssl=1" data-orig-size="930,322" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="word-image-5911-5" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?fit=300%2C104&amp;ssl=1" data-large-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?fit=930%2C322&amp;ssl=1" decoding="async" loading="lazy" width="930" height="322" src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?resize=930%2C322&amp;ssl=1" alt="" sizes="(max-width: 930px) 100vw, 930px" data-recalc-dims="1" data-old-src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?resize=930%2C322&amp;is-pending-load=1#038;ssl=1" data-lazy-srcset="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?w=930&amp;ssl=1 930w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?resize=300%2C104&amp;ssl=1 300w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-5.png?resize=768%2C266&amp;ssl=1 768w"></figure>








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




<figure><img data-lazy-fallback="1" data-attachment-id="5917" data-permalink="https://webnautes.blog/5911/word-image-5911-6/" data-orig-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?fit=878%2C357&amp;ssl=1" data-orig-size="878,357" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="word-image-5911-6" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?fit=300%2C122&amp;ssl=1" data-large-file="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?fit=878%2C357&amp;ssl=1" decoding="async" loading="lazy" width="878" height="357" src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?resize=878%2C357&amp;ssl=1" alt="" sizes="(max-width: 878px) 100vw, 878px" data-recalc-dims="1" data-old-src="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?resize=878%2C357&amp;is-pending-load=1#038;ssl=1" data-lazy-srcset="https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?w=878&amp;ssl=1 878w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?resize=300%2C122&amp;ssl=1 300w, https://i0.wp.com/webnautes.blog/wp-content/uploads/2023/08/word-image-5911-6.png?resize=768%2C312&amp;ssl=1 768w"></figure>








 참고




<a href="https://github.com/chpmrc/foscam_streamer">https://github.com/chpmrc/foscam_streamer</a>





</div></div>

멈춤보단 천천히라도

webnautes

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. 다음 두 파일을 적당한 곳에… 더 보기 »JavaScript를 사용하여 웹브라우저에서 RTSP 영상 재생하기
The post JavaScript를 사용하여 웹브라우저에서 RTSP 영상 재생하기 first appeared on 멈춤보단 천천히라도.

JavaScript를 사용하여 웹브라우저에서 RTSP 영상 재생하기

댓글