javascript VXG Media Player RTSP protocol paly in Chrome, 크롬에서 rtsp play

javascript VXG Media Player RTSP protocol paly in Chrome, 크롬에서 rtsp play

이전 포스팅에서 RTSP, HLS 프로토콜을 Web Brower 상에서 플레이 하는 방법에 대해서 알아봤었습니다.

 

Link : HLS(Http Live Streaming) 웹에서 플레이 하는 방법

 

Link : RTSP(Real Time Streaming Protocol) 웹에서 플레이 하는 방법 vlc player 활용

 

Link : HLS(Http Live Streaming) 웹에서 플레이 하는 방법(FlowPlayer 사용)

 

Link : RTMP / RTSP 모바일 출력 이슈.

 

하지만 몇가지 이슈가 있었죠.

여러 보안상의 이유로 크롬에서는 VLC Player 가 정상작동 하지 않았고..

대안으로 사용한 FlowPlayer는 상용에 IE에서 정상작동 하지 않는 뭐 이런..

 

그래서 대안을 구글링 하다가 찾아낸 플레이어가 바로..

VXG Media Player

입니다.

 

아래의 링크로 이동하시면 js 파일 다운로드가 가능합니다.

 

 

 

 

Link : VXG Media Player

 

다운로드 후 압축을 풀면 위와 같은 파일이 존재합니다.

여기서 필요한 파일은

vxgplayer-1.8.23.min.js

vxgplayer-1.8.23.min.css

그리고 pnacl 폴더에 있는

media_player.nmf

media_player.pexe

파일입니다.

 

해당 파일을 프로젝트 내에 넣어주시고 출력하실 페이지에 추가해주세요.

<script type="text/javascript"  src="${ctx }/resource/js/vxgplayer-1.8.23.min.js"></script>
<link rel="stylesheet" href="${ctx }/resource/css/vxgplayer-1.8.23.min.css" />

 

pnacl 파일은 vxgplayer-1.8.23.min.js 와 같은 위치에 두세요.

<div class="cctvBox"> <!-- rtsp type -->
    <div class="vxgplayer"  id="player" autostart></div>
</div>

 

그리고 출력한 div 를 추가해줍니다.

이제 페이지가 실행될때 play함수를 실행해 자동 스트리밍 되게 해주시면 됩니다.

function play(){;
    var player = vxgplayer('player', {
        url : 'rts주소',
        autostart: true,
        width : 500,
        height : 300,
        nmf_path: 'media_player.nmf',
        nmf_src: '${ctx}/resource/js/media_player.nmf',
        latency: 300000,
        aspect_ratio_mode: 1,
        autohide: 3,
        controls: true,
        connection_timeout: 5000,
        connection_udp: 0,
        custom_digital_zoom: false,
    });
}

 

동적으로 palyer를 추가하거나 url 주소를 변경하는 방법은

다운로드한 파일 내에 index.html 을 확인해 보시면 됩니다.

 

이제 페이지를 리로드 하시면 VXG Player 화면을 보실 순 있지만 Play 가 되지 않습니다.

크롬 브라우져의 VGX Player Plugin을 다운 받아야 합니다.

 

 

 

위의 화살표를 클릭하시면 플러그인 다운로드 페이지로 이동됩니다.

 

 

크롬에 추가 버튼을 클릭 해서 설치한 후 페이지를 리로드 하면 스트리밍 되는 것을 확인하실 수 있습니다.

 

 

CF) 옵션에 autostart를 추가해도 되지 않더군요, js 코드를 수정해도 되지만 그냥 div에 autostart를 주셔도 됩니다.