ฉันจะแสดงสตรีมวิดีโอ RTSP ในหน้าเว็บได้อย่างไร?

ฉันมีกล้อง ip ที่ให้สตรีมวิดีโอ RTSP แบบสด ฉันสามารถใช้ VLC media player เพื่อดูฟีดโดยระบุ 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 บริการนี้สามารถรับสตรีมวิดีโอ RTSP / H264 จากกล้อง IP และสามารถแพร่ภาพไปยังผู้ชมได้ IPCamLive มีส่วนประกอบของเครื่องเล่นวิดีโอ Flash / HTML5 ที่จะแสดงวิดีโอบน PC, MAC, แท็บเล็ตหรือมือถือ สิ่งที่ดีที่สุดคือไซต์นี้สร้างข้อมูลโค้ด HTML ที่จำเป็นสำหรับการฝังวิดีโอถ่ายทอดสดเช่นนี้:

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

ดังนั้นเราต้องคัดลอกวางลงในไฟล์ HTML ของเราโดยไม่ต้องแก้ไขใด ๆ

โดยประมาณคุณสามารถมี 3 ทางเลือกในการแสดงสตรีมวิดีโอ RTSP ในหน้าเว็บ:

1. ผู้เล่นตัวจริง
2. ผู้เล่น Quicktime
3. เครื่องเล่น VLC

คุณสามารถค้นหาโค้ดเพื่อฝัง activeX ผ่านการค้นหาโดย Google

เท่าที่ฉันรู้มีข้อ จำกัด บางอย่างสำหรับผู้เล่นแต่ละคน

1. Realplayer ไม่รองรับวิดีโอ H.264 โดยกำเนิดคุณต้องติดตั้งปลั๊กอิน Quicktime สำหรับ Realplayer เพื่อให้สามารถถอดรหัส H.264 ได้
2. เครื่องเล่น Quicktime ไม่รองรับการขนส่ง RTP / AVP / TCP และการขนส่ง RTP / AVP (UDP) ไม่รวมการเจาะรู NAT ดังนั้นการขนส่งที่เป็นไปได้เพียงอย่างเดียวคือ HTTP tunneling ในการปรับใช้ WAN
3. VLC ไม่รองรับการเจาะรู NAT สำหรับการขนส่ง RTP / AVP แต่มีการขนส่ง RTP / AVP / TCP

หากคุณต้องการสตรีม RTSP ไปยังหน้าเว็บโดยตรงฉันเกรงว่าทางเลือกเดียวของคุณคือใช้ตัวควบคุม ActiveX ที่มาพร้อมกับกล้อง นี่คือการเชื่อมต่อโดยตรง IP Cam -> Viewer และน่าจะเร็วที่สุด ไม่แน่ใจว่าทำไมคุณถึงมีปัญหา Axis ActiveX ทำงานได้ดีสำหรับฉัน

อย่างไรก็ตามตัวเลือกนี้ไม่ได้มีประสิทธิภาพแบนด์วิดท์จริง ๆ และคุณไม่สามารถให้บริการผู้ชมหลายคนพร้อมกันได้ (IP Cams ส่วนใหญ่มีผู้ชม จำกัด 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รูปแบบ url ที่กล้อง IP ของฉันรองรับ ดังนั้นคุณต้องได้รับสิ่งเดียวกันสำหรับกล้องของคุณ คุณสามารถรับข้อมูลนี้ได้โดยปรึกษาฝ่ายสนับสนุนผู้จำหน่ายกล้องของคุณ โปรดทราบว่าฉันทดสอบบน Chrome (โดยใช้ปลั๊กอิน activeX สำหรับ Chrome)และเบราว์เซอร์อื่น ๆ(รวมถึงเบราว์เซอร์โทรศัพท์มือถือ)อาจไม่ได้รับการสนับสนุน

นอกจากนี้คุณสามารถลอง opensource WebRTC Media Server Kurento

ซึ่งสามารถเล่นสตรีมวิดีโอ RTSP และส่งไปยัง WebRTC หรือแปลงรหัสเป็น RTMP หรือบันทึกบนเซิร์ฟเวอร์

เรากำลังใช้มันในการผลิตสำหรับกรณีต่อไปนี้:

 - WebRTC เป็น Webrtc (หลายต่อหลายคน)
 - WebRTC เป็น RTMP
 - RTSP เป็น WebRTC

ว้าวซ่า

1. การสตรีม RTSP ใหม่เป็น RTMP (Flash Player) จะไม่ทำงานกับ Android Chrome หรือ FF (ไม่รองรับ Flash)
2. สตรีม RTSP เป็น HLS อีกครั้ง

เว็บคอลเซิร์ฟเวอร์ (Flashphoner)

1. Re-Streaming RTSP เป็น WebRTC (คุณสมบัติเบราว์เซอร์ดั้งเดิมสำหรับ Chrome และ FF ทั้งบน Android หรือเดสก์ท็อป)

2. Re-Streaming RTSP ไปยัง Websockets (iOS Safari และ Chrome / FF Desktop)

ลองดูที่นี้บทความ

ฉันรู้ว่าโพสต์นี้เก่า แต่ฉันกำลังมองหาสิ่งที่คล้ายกันมากในวันอื่น ๆ (ดูฟีดวิดีโอ RTSP ของ IP cam ของฉันบนหน้า html แบบธรรมดาโดยไม่มีปลั๊กอิน ActiveX แฟนซี) โชคดีฉันพบวิธีแก้ปัญหา! มันขึ้นอยู่กับ ffmpeg, NodeJS, NGINX (ไม่จำเป็น แต่มีประโยชน์) และโหนด 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 ซึ่งถ่ายทอดบนส่วนขยาย Media Source

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

พวกเขาใช้ไปป์ไลน์ที่คล้ายกับ Gstreamer ใน JS โดยใช้ h264 depay หมายเหตุ: การสตรีมที่ใช้ใน js ไม่ใช่ rtsp โดยตรง แต่ถูกห่อหุ้มเป็น ws: // โดยไลบรารีบน node.js rtsp-websocket proxy

ฉันได้เผยแพร่โครงการบน Github ที่ช่วยให้คุณสตรีมกล้อง ip / เครือข่ายไปยังเว็บเบราว์เซอร์แบบเรียลไทม์โดยไม่ต้องใช้ปลั๊กอินซึ่งฉันมีส่วนร่วมในโครงการโอเพ่นซอร์สภายใต้ใบอนุญาต MIT ที่อาจตรงกับความต้องการของคุณได้ที่นี่:

สตรีมมิ่ง IP / กล้องเครือข่ายบนเว็บเบราว์เซอร์โดยใช้ NodeJS

ยังไม่มีกรอบการทำงานเต็มรูปแบบ แต่เป็นจุดเริ่มต้นที่อาจทำให้คุณมีวิธีดำเนินการต่อไป
ในฐานะนักเรียนฉันหวังว่านี่จะเป็นประโยชน์และโปรดมีส่วนร่วมในโครงการนี้

ทางเลือกหนึ่งคือใช้เซิร์ฟเวอร์ / เกตเวย์สตรีมมิ่งบางประเภท ฉันลองใช้วิธีแก้ปัญหาต่างๆ (vlc, ffmpeg และอื่น ๆ อีกสองสามอย่าง) และสิ่งที่ได้ผลดีที่สุดสำหรับฉันคือเซิร์ฟเวอร์ Janus WebRTC มันค่อนข้างยากในการตั้งค่าและคุณจะต้องรวบรวมจากซอร์ส (เมื่อฉันลองใช้เวอร์ชันใน Ubuntu repos ไม่รองรับ RTSP) แต่มีคำแนะนำในการรวบรวมโดยละเอียดและเอกสารเกี่ยวกับวิธีการตั้งค่าทุกอย่าง

ฉันจัดการเพื่อรับฟีดวิดีโอและเสียงจากกล้อง FullHD 3 ตัวบนเครือข่ายท้องถิ่นโดยมีความล่าช้าน้อยมาก ฉันยืนยันได้ว่าใช้งานได้กับกล้อง Dahua และ Hikvision (ไม่แน่ใจว่ามีทุกรุ่นหรือไม่)

สิ่งที่ฉันใช้คือ Ubuntu Server 18.04 ที่ใช้เว็บเซิร์ฟเวอร์ Apache และ Chrome เป็นเบราว์เซอร์ (มันไม่ทำงานบน Firefox โดยค่าเริ่มต้น แต่อาจมีวิธีแก้ปัญหาสำหรับมัน)

Microsoft Mediaplayer สามารถทำได้ทั้งหมดที่คุณต้องการ ฉันใช้ MS Mediaservices ของเซิร์ฟเวอร์ 2003/2008 เพื่อส่งวิดีโอเป็น Broadcast และ Unicast Stream บริการนี้สามารถรับสตรีมจากกล้องและออกอากาศได้ กว่าคุณจะมี "เฉพาะ" ปัญหาในการ "แสดง" ภาพนั้นใน Browers ทั้งหมดที่ระบบปฏิบัติการทั้งหมด

เคล็ดลับของฉัน: ตรวจสอบระบบปฏิบัติการก่อนกว่าโหลดปลั๊กอินของคุณ บน Windows มันเป็นเรื่องง่าย - ใช้ WMP อื่น ๆ ใช้ MS Silverligt ...

สำหรับวัตถุประสงค์เช่นนี้ฉันใช้ VLC เป็นเซิร์ฟเวอร์แจกจ่าย คุณบอกว่าคุณจะจับวิดีโอด้วย VLC? คลิกขวาที่สื่อใน VLC เลือก "สตรีม" และเลือกตัวเลือกของคุณ นอกจากนี้คุณยังสามารถทำได้ด้วยบรรทัดคำสั่งซึ่งจะให้ประโยชน์ที่เป็นไปได้ของตัวเลือกต่างๆ (การแปลงรหัสการปรับขนาดการบีบอัดการแยกส่วนออก) นี่คือชุดที่เริ่มการแจกจ่าย VLC จากต้นทางไปยังพอร์ต 555 ของตัวเอง (ดังนั้นคุณจะต้องพิมพ์ rstp: // myvlcserveripaddress: 555 ในตัวเลือก src ของคุณบนหน้าเว็บเพื่อรับสตรีม)

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/