RTSP(Real Time Streaming Protocol) 웹에서 플레이 하는 방법 vlc player 활용
RTSP(Real Time Streaming Protocol) 웹에서 플레이 하는 방법 vlc player 활용
※Chrome 에서는 RTSP Protocol 이 막혔습니다!
이번엔 HLS가 아닌 RTSP 주소를 웹에서 플레이 하는 방법에 대해서 알아보자.
HLS와 달리 RTSP는 HTML5 Video 태그에서 아직 지원을 하지 않는 것으로 알고 있다.
그래서 별도의 ActiceX 나 PlugIn을 사용해야 한다.
아래 설명할 방법은 vlc player 를 사용해서 웹에 출력하는 방법이다.
jsp 파일 내에 아라와 같이 object를 생성한다.
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://download.videolan.org/pub/videolan/vlc/2.2.4/win32/vlc-2.2.4-win32.exe"
width="100%" height="100%" id="vlc" events="True">
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" name="vlc" />
<param name="Src" value="RTSP주소(예:rtsp://255.255.255.255:554/rstp_a1)" />
<param name="autostart" value="true" />
<param name="ShowDisplay" value="false" />
<param name="AutoLoop" value="false" />
<param name="AutoPlay" value="true" />
</OBJECT>
여기서 중요한 것은 codebase와 src 파라미터 이다.(bold처리된부분)
현재 코드 베이스에는 vlc play 설치파일 주소가 적혀있다.
cab 파일을 만들어 필요한 부분만을 제공하려 했으나, 잘 되지 않아서 통으로 연결했다.
만약 PC에 VLC Player가 설치되어 있지 않다면
페이지가 열림과 동시에 codebase에 있는 파일을 실행할 것이다.
설치를 진행할 때 vlc player를 전체 설치하지말고 ActiveX PlugIn 만 설치 해도 무방하다.
vlc player의 설치가 완료됨과 동시에 페이지의 RTSP영상이 출력된다.
/***********************************************2016.11.14 update***********************************************/
그럼 source 가 바뀌었을 때 다른 동영상을 표출하는 방법을 알아보자.
어떠한 이벤트가 발생하였을 때 아래 함수를 호출하자.
function reloadCctv(){;
var vlc = document.getElementById("vlc");
vlc.playlist.clear(); //vlc 프레이어의 playlist를 초기화 한다.
vlc.playlist.add("rtsp 주소"); //playlist에 새로운 rtsp 주소를 추가 한다.
vlc.playlist.playItem(0); // 추가된 rtsp를 재생한다.
}
* RTSP 플레이 시 버퍼 조정 옵션(반응이 느릴 시 주는 옵션)
vlc.playlist.add("rtsp 주소"); 에서 추가로 옵션을 주어 버퍼 조정
기본 버퍼가 1000 이기 때문에 반응이 느릴 수 있습니다. 그럴때 주는 옵션입니다.
vlc.playlist.add("rtsp 주소", "live", ":network-caching=300");
:network-caching뒤에 버퍼 값을 수정하므로써 반응 속도 조절.
버퍼가 클 수록 반응은 느리지만 안정적(화면이 끊키지 않음), 작을 수록 반응이 빨라지지만 화면이 끊킴
적당한 버퍼를 주는것이 중요합니다.
Link : HLS(Http Live Streaming) 웹에서 플레이 하는 방법