웹 페이지에 RTSP 비디오 스트림을 표시하려면 어떻게합니까?

라이브 RTSP 비디오 스트림을 제공하는 IP 카메라가 있습니다. VLC 미디어 플레이어를 사용하여 URL을 제공하여 피드를 볼 수 있습니다.

rtsp://cameraipaddress

하지만 웹 페이지에 피드를 표시해야합니다. 카메라 공급자가 내가 작동하는 ActiveX 컨트롤을 제공했지만 실제로 버그가있어서 브라우저가 자주 중단됩니다.

RTSP를 지원하는 내가 사용할 수있는 대체 비디오 플러그인을 아는 사람이 있습니까?

카메라는 H264 또는 MPEG4로 스트리밍하도록 구성 할 수 있습니다.

VLC에는 웹 페이지에 피드를 표시 할 수있는 ActiveX 플러그인도 함께 제공됩니다.

http://wiki.videolan.org/ActiveX/HTML

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>

넓은 인터넷 대역폭과 주요 브라우저와 호환되는 훌륭한 비디오 플레이어가 필요하기 때문에 웹 페이지에 IP 카메라의 라이브 비디오 스트림을 표시하는 것은 쉽지 않습니다.

그러나 다행히도 우리를 위해이 작업을 수행 할 수있는 클라우드 기반 서비스가 있습니다. 최고 중 하나는 IPCamLive 입니다. 이 서비스는 IP 카메라로부터 RTSP / H264 비디오 스트림을 수신하여 시청자에게 방송 할 수 있습니다. IPCamLive에는 PC, MAC, 태블릿 또는 모바일에서 비디오를 표시하는 Flash / HTML5 비디오 플레이어 구성 요소가 있습니다. 가장 큰 장점은이 사이트가 다음과 같이 라이브 비디오를 삽입하는 데 필요한 HTML 스 니펫을 생성한다는 것입니다.

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

따라서 수정하지 않고 복사하여 HTML 파일에 붙여 넣기 만하면됩니다.

웹 페이지에 RTSP 비디오 스트림을 표시하기 위해 대략 3 가지 선택 사항이 있습니다.

1. Realplayer
2. Quicktime 플레이어
3. VLC 플레이어

Google 검색을 통해 activeX를 포함하는 코드를 찾을 수 있습니다.

내가 아는 한, 각 플레이어에게는 몇 가지 제한이 있습니다.

1. Realplayer는 기본적으로 H.264 비디오를 지원하지 않으므로 H.264 디코딩을 수행하려면 Realplayer 용 Quicktime 플러그인을 설치해야합니다.
2. Quicktime 플레이어는 RTP / AVP / TCP 전송을 지원하지 않으며 RTP / AVP (UDP) 전송에는 NAT 홀 펀칭이 포함되지 않습니다. 따라서 가능한 유일한 전송은 WAN 배포에서 HTTP 터널링입니다.
3. VLC는 RTP / AVP 전송을위한 NAT 홀 펀칭을 지원하지 않지만 RTP / AVP / TCP 전송을 사용할 수 있습니다.

RTSP를 웹 페이지로 직접 스트리밍하려는 경우 유일한 옵션은 카메라와 함께 제공되는 ActiveX 컨트롤 뷰어를 사용하는 것입니다. 이것은 직접 연결 IP 캠-> 뷰어이며 실제로 가장 빠릅니다. 왜 문제가 있는지 확실하지 않습니다. Axis ActiveX는 저에게 꽤 잘 작동합니다.

그러나이 옵션은 실제로 대역폭 효율적이지 않으며 여러 명의 동시 뷰어를 제공 할 수 없습니다 (대부분의 IP 캠에는 10 명의 뷰어 제한이 있음). 더 나은 옵션은 단일 RTSP 스트림을 중앙에서 호스팅되는 스트리밍 서버에 업로드하는 것입니다. 그러면 스트림이 RTMP / MPEG-TS로 변환되어 Flash 플레이어 / 셋톱 박스에 게시됩니다.

Wowza, Erlyvideo, Unreal Media Server, Red5를 선택할 수 있습니다.

웹 플러그인에 대한 VLC 공식 문서에서 간단하고 작동하는 솔루션을 찾았습니다.

https://wiki.videolan.org/Documentation:WebPlugin/

코드를 약간 수정하여 작동하게했습니다. 다음은 내 코드입니다.

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

참고 : 위 스 니펫은 rtsp내 IP 카메라에서 지원 하는 URL 형식을 사용합니다 . 따라서 카메라에도 동일하게 적용해야합니다. 카메라 공급 업체 지원에 문의하여이 정보를 얻을 수 있습니다. 또한 Chrome (Chrome 용 activeX 플러그인 사용) 에서 테스트 했으며 다른 브라우저 (휴대폰 브라우저 포함) 는 지원되지 않을 수 있습니다.

또한 오픈 소스 WebRTC Media Server Kurento를 사용해 볼 수 있습니다.

RTSP 비디오 스트림을 재생하여 WebRTC로 보내거나 RTMP로 트랜스 코딩하거나 서버에 저장할 수 있습니다.

프로덕션에서 다음과 같은 경우에 사용합니다.

 -WebRTC에서 Webrtc로 (다 대다)
 -WebRTC에서 RTMP로
 -RTSP에서 WebRTC로

Wowza

1. RTSP를 RTMP (Flash Player)로 다시 스트리밍하면 Android Chrome 또는 FF에서 작동하지 않습니다 (Flash는 지원되지 않음).
2. RTSP를 HLS로 다시 스트리밍

웹 콜 서버 (Flashphoner)

1. RTSP를 WebRTC로 재 스트리밍 (Android 또는 데스크톱에서 Chrome 및 FF 용 기본 브라우저 기능)

2. RTSP를 Websocket으로 재 스트리밍 (iOS Safari 및 Chrome / FF 데스크톱)

이 기사를보십시오 .

이 게시물이 오래되었다는 것을 알고 있지만 요 전에 매우 유사한 것을 찾고있었습니다 (멋진 ActiveX 플러그인이없는 간단한 html 페이지에서 내 IP 캠의 RTSP 비디오 피드보기). 운 좋게도 해결책을 찾았습니다! ffmpeg, NodeJS, NGINX (필수는 아니지만 유용함) 및 Node Media Server를 기반으로 합니다.

링크의 설명은 자세하고 따라하기 쉽지만 작업을 시작하기 전에 처리해야 할 약간의 조정이있었습니다 (NodeJS 서버의 엔드 포인트 관련). 나는 그것에 대해 자신의 질문 을 만들었고 훌륭하고 효과적인 대답을 얻었다 .

QuickTime Player를 사용해보십시오! 웹 페이지에 포함 된 개체를 생성하고 스트림을 재생하는 JavaScript는 다음과 같습니다.

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+address+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;

미디어 소스 확장을 중계하는 Axis 별 미디어 스트림 라이브러리 확인

• https://github.com/AxisCommunications/media-stream-library-js
• https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API

그들은 h264 depay를 가진 JS의 Gstreamer와 유사한 파이프 라인을 구현합니다. 참고 : js에서 사용되는 스트리밍은 직접 rtsp가 아니라 node.js rtsp-websocket 프록시의 라이브러리 자체에 의해 ws : //로 캡슐화됩니다.

플러그인 필요없이 ip / 네트워크 카메라를 웹 브라우저에 실시간으로 스트리밍하는 데 도움이되는 프로젝트를 Github에 게시했습니다.이 프로젝트는 귀하의 필요에 맞는 MIT 라이센스에 따라 오픈 소스 프로젝트에 기여했습니다.

NodeJS를 사용하여 웹 브라우저에서 IP / 네트워크 카메라 스트리밍

아직 전체 프레임 워크 패키지는 없지만 더 진행할 수있는 방법을 제공 할 수있는 킥 스타트입니다.
학생으로서이 정보가 도움이되기를 바라며이 프로젝트에 기여해주십시오.

한 가지 옵션은 일종의 스트리밍 서버 / 게이트웨이를 사용하는 것입니다. 다양한 솔루션 (vlc, ffmpeg 등)을 시도했고 저에게 가장 적합한 솔루션은 Janus WebRTC 서버였습니다. 설정하는 것은 다소 어렵고 소스에서 컴파일해야하지만 (내가 시도했을 때 Ubuntu 저장소의 버전에는 RTSP가 지원되지 않았습니다) 모든 설정 방법에 대한 자세한 컴파일 지침 과 문서 가 있습니다.

거의 지연없이 로컬 네트워크에있는 3 대의 FullHD 카메라에서 비디오 및 오디오 피드를 얻을 수있었습니다. Dahua 및 Hikvision 카메라에서 작동하는지 확인할 수 있습니다 (모든 모델이 확실하지 않음).

내가 사용한 것은 Apache 웹 서버를 실행하는 Ubuntu Server 18.04와 브라우저로 Chrome입니다 (기본적으로 Firefox에서는 작동하지 않지만 해결 방법이있을 수 있음).

Microsoft Mediaplayer는 필요한 모든 작업을 수행 할 수 있습니다. 저는 2003/2008 Server의 MS Mediaservices를 사용하여 비디오를 브로드 캐스트 및 유니 캐스트 스트림으로 제공합니다. 이 서비스는 캠에서 스트림을 가져와 브로드 캐스트 할 수 있습니다. 모든 OS 시스템의 모든 브라우저에서 해당 그림을 "표시"하는 "단지"문제가있는 것보다

내 팁 : 플러그인을로드하는 것보다 먼저 OS를 확인하십시오. Windows에서는 쉽게 WMP를 사용하고 다른 경우에는 MS Silverligt를 사용합니다.

이와 같은 목적을 위해 VLC를 재배포 서버로 사용합니다. VLC로 영상을 볼 수 있다고 했나요? VLC에서 미디어를 마우스 오른쪽 버튼으로 클릭하고 "스트림"을 선택한 다음 옵션을 선택합니다. 또한 다양한 옵션 (트랜스 코딩, 크기 조정, 압축, 디인터레이싱)의 잠재적 이점을 제공하는 명령 줄을 사용하여 수행 할 수도 있습니다. 다음은 소스에서 자체 555 포트로 VLC 배포를 시작하는 배치입니다 (따라서 스트림을 얻으려면 웹 페이지의 src 옵션에 rstp : // myvlcserveripaddress : 555를 입력해야합니다).

cd \
cd C:\Program Files (x86)\VideoLAN\VLC\

vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep

여기 에는 플레이어가 포함 된 웹 페이지 샘플이 있습니다 (VLC 플러그인 기반).

위의 모든 솔루션은 더 이상 작동하지 않거나 파악하는 데 너무 많은 시간이 걸립니다.

이것이 궁극적 인 답입니다. 웹 사이트에 rtsp 링크를 포함 할 수 있습니다.

HTML 편집기에서 아래 코드를 복사하십시오.

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

이 모든 것이 너무 복잡하고 여전히 해결되지 않으면 제가 도와 드리겠습니다.

나는 내 고객을 위해 이것을했다.

여기를 클릭하십시오 http://www.mhcreative.com.my/ipcameratowebsite/