Làm cách nào để hiển thị luồng video RTSP trong một trang web?

Tôi có một camera ip cung cấp luồng video RTSP trực tiếp. Tôi có thể sử dụng trình phát phương tiện VLC để xem nguồn cấp dữ liệu bằng cách cung cấp cho nó URL:

rtsp://cameraipaddress

Nhưng tôi cần hiển thị nguồn cấp dữ liệu trên một trang web. Nhà cung cấp máy ảnh đã cung cấp một điều khiển ActiveX mà tôi đã làm việc, nhưng nó thực sự có lỗi và khiến trình duyệt thường xuyên bị treo.

Có ai biết về bất kỳ plugin video thay thế nào mà tôi có thể sử dụng hỗ trợ RTSP không?

Máy ảnh có thể được cấu hình để phát trực tiếp ở H264 hoặc MPEG4.

VLC cũng đi kèm với một plugin ActiveX có thể hiển thị nguồn cấp dữ liệu trong một trang web:

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>

Thật không dễ dàng để hiển thị luồng video trực tiếp từ camera IP trên một trang web vì bạn cần băng thông internet rộng và trình phát video tuyệt vời tương thích với các trình duyệt chính.

Nhưng may mắn thay, có một số dịch vụ dựa trên đám mây có thể thực hiện công việc này cho chúng ta. Một trong những ứng dụng tốt nhất là IPCamLive . Dịch vụ này có thể nhận luồng video RTSP / H264 từ Camera IP và có thể phát cho người xem. IPCamLive có thành phần trình phát video Flash / HTML5 sẽ hiển thị video trên PC, MAC, máy tính bảng hoặc thiết bị di động. Điều tuyệt vời nhất là trang web này tạo đoạn mã HTML cần thiết để nhúng video trực tiếp như sau:

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

Vì vậy, chúng tôi chỉ cần sao chép, dán nó vào tệp HTML của chúng tôi mà không cần bất kỳ sửa đổi nào.

Thông thường, bạn có thể có 3 lựa chọn để hiển thị luồng video RTSP trong một trang web:

1. Realplayer
2. Trình phát thời gian nhanh
3. Trình phát VLC

Bạn có thể tìm thấy mã để nhúng activeX thông qua tìm kiếm của google.

Theo như tôi biết, có một số hạn chế cho mỗi người chơi.

1. Realplayer không hỗ trợ video H.264 nguyên bản, bạn phải cài đặt một plugin thời gian nhanh cho Realplayer để đạt được giải mã H.264.
2. Quicktime player không hỗ trợ truyền tải RTP / AVP / TCP và vận chuyển RTP / AVP (UDP) của nó không bao gồm việc đục lỗ NAT. Do đó, cách vận chuyển khả thi duy nhất là đường hầm HTTP trong triển khai mạng WAN.
3. VLC không hỗ trợ đục lỗ NAT cho truyền tải RTP / AVP, nhưng truyền tải RTP / AVP / TCP có sẵn.

Nếu bạn muốn truyền trực tiếp RTSP lên trang web, thì tôi e rằng lựa chọn duy nhất của bạn là sử dụng trình xem điều khiển ActiveX đi kèm với máy ảnh. Đây là kết nối trực tiếp IP Cam -> Viewer, và thực sự phải nhanh nhất. Không chắc chắn tại sao bạn gặp vấn đề; Axis ActiveX hoạt động khá tốt đối với tôi.

Tuy nhiên, tùy chọn này không thực sự tiết kiệm băng thông và bạn không thể phục vụ nhiều người xem đồng thời (hầu hết các IP Cam có giới hạn 10 người xem). Tùy chọn tốt hơn là tải một luồng RTSP duy nhất lên máy chủ phát trực tuyến được lưu trữ tập trung, máy chủ này sẽ chuyển đổi luồng của bạn thành RTMP / MPEG-TS và xuất bản nó lên trình phát Flash / Hộp giải mã tín hiệu.

Wowza, Erlyvideo, Unreal Media Server, Red5 là những lựa chọn của bạn.

Đã tìm thấy một giải pháp đơn giản và hiệu quả từ tài liệu chính thức của VLC cho plugin web

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

Đã sửa đổi mã một chút và nó hoạt động. Đây là mã của tôi-

<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>

Lưu ý: Đoạn mã trên sử dụng rtspđịnh dạng url được camera IP của tôi hỗ trợ. Vì vậy, bạn cần phải làm như vậy cho máy ảnh của mình. Bạn có thể nhận được thông tin này bằng cách tham khảo ý kiến ​​bộ phận hỗ trợ của nhà cung cấp máy ảnh. Cũng xin lưu ý rằng tôi đã thử nghiệm nó trên Chrome (sử dụng plugin activeX cho Chrome) và các trình duyệt khác (bao gồm cả trình duyệt trên điện thoại di động) có thể không được hỗ trợ.

Ngoài ra, bạn có thể thử mã nguồn mở WebRTC Media Server Kurento

Có thể phát luồng video RTSP và gửi đến WebRTC hoặc chuyển mã sang RTMP hoặc lưu trên máy chủ.

Chúng tôi đang sử dụng nó trên Sản xuất cho các trường hợp sau:

 - WebRTC sang Webrtc (nhiều đến nhiều)
 - WebRTC sang RTMP
 - RTSP sang WebRTC

Wowza

1. Phát lại RTSP sang RTMP (Flash Player) Sẽ không hoạt động với Android Chrome hoặc FF (Flash không được hỗ trợ)
2. Phát lại RTSP sang HLS

Máy chủ cuộc gọi web (Flashphoner)

1. Truyền lại RTSP sang WebRTC (Tính năng trình duyệt gốc dành cho Chrome và FF trên Android hoặc máy tính để bàn)

2. Truyền lại RTSP sang Websockets (iOS Safari và Chrome / FF Desktop)

Hãy xem bài viết này .

Tôi biết rằng bài đăng này đã cũ nhưng tôi đã tìm kiếm thứ gì đó rất giống vào ngày hôm trước (xem nguồn cấp dữ liệu video RTSP của IP cam của tôi trên một trang html đơn giản mà không có bất kỳ plugin ActiveX ưa thích nào). May mắn thay, tôi đã tìm thấy một giải pháp! Nó dựa trên ffmpeg, NodeJS, NGINX (không bắt buộc nhưng hữu ích) và Node Media Server .

Mô tả trong liên kết rất chi tiết và dễ làm theo, nhưng tôi vẫn phải xử lý một số chỉnh sửa trước khi bắt đầu hoạt động (liên quan đến các điểm cuối trên máy chủ NodeJS). Tôi đã đặt một câu hỏi riêng cho nó và nhận được một câu trả lời tốt và hiệu quả .

Hãy dùng thử QuickTime Player! Đây là JavaScript của tôi tạo đối tượng được nhúng trên trang web và phát luồng:

//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;

Kiểm tra thư viện luồng phương tiện theo Trục chuyển tiếp trên phần mở rộng Nguồn phương tiện

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

Họ triển khai một đường ống tương tự như Gstreamer trong JS với phần bổ sung h264 trong đó. Lưu ý: luồng được sử dụng trong js không trực tiếp là rtsp mà được đóng gói thành ws: // bởi chính thư viện trên proxy node.js rtsp-websocket.

Tôi đã xuất bản dự án trên Github giúp bạn truyền trực tuyến camera ip / mạng vào trình duyệt web trong thời gian thực mà không cần plugin, tôi đã đóng góp cho dự án mã nguồn mở theo Giấy phép MIT có thể phù hợp với nhu cầu của bạn, đây là:

Truyền trực tuyến IP / Camera mạng trên trình duyệt web bằng NodeJS

Chưa có gói framework đầy đủ nào, nhưng nó là phần khởi động có thể cung cấp cho bạn một cách để tiến xa hơn.
Là một sinh viên, tôi hy vọng điều này hữu ích và hãy đóng góp cho dự án này.

Một tùy chọn sẽ là sử dụng một số loại máy chủ / cổng phát trực tuyến. Tôi đã thử nhiều giải pháp khác nhau (vlc, ffmpeg và một số giải pháp khác) và giải pháp phù hợp nhất với tôi là máy chủ Janus WebRTC. Nó hơi khó thiết lập và bạn sẽ phải biên dịch nó từ nguồn (khi tôi dùng thử phiên bản trong kho lưu trữ Ubuntu không có hỗ trợ RTSP), nhưng họ có hướng dẫn biên dịch chi tiết và tài liệu về cách thiết lập mọi thứ.

Tôi đã quản lý để lấy nguồn cấp dữ liệu video và âm thanh từ 3 camera FullHD trên mạng cục bộ với rất ít độ trễ. Tôi có thể xác nhận rằng nó hoạt động với camera Dahua và Hikvision (không chắc chắn nếu tất cả các kiểu máy).

Những gì tôi đã sử dụng là Ubuntu Server 18.04 chạy máy chủ web Apache và Chrome làm trình duyệt (nó không hoạt động trên Firefox theo mặc định nhưng có lẽ có những giải pháp thay thế cho nó).

Microsoft Mediaplayer có thể làm tất cả, bạn cần. Tôi sử dụng MS Mediaservices của Máy chủ 2003/2008 để cung cấp Video dưới dạng Broadcast và Unicast Stream. Dịch vụ này có thể NHẬN Luồng từ cam và Phát nó. Hơn bạn chỉ có "vấn đề" là "Hiển thị" Hình ảnh đó trong TẤT CẢ các Trình duyệt ở tất cả Hệ điều hành

Mẹo của tôi: trước tiên hãy kiểm tra hệ điều hành, sau khi tải plugin của bạn. trên Windows thì dễ dàng lấy WMP, ngược lại lấy MS Silverligt ...

Đối với các mục đích như thế này, tôi sử dụng VLC làm máy chủ phân phối lại. Bạn nói rằng bạn có thể xem video với VLC? Nhấp chuột phải vào phương tiện trong VLC, chọn "stream" và chọn các tùy chọn của bạn. Bạn cũng có thể làm điều đó với dòng lệnh, điều này mang lại cho bạn những lợi ích tiềm năng của nhiều tùy chọn khác nhau (chuyển mã, chia tỷ lệ, nén, giải xen kẽ). Đây là một lô bắt đầu phân phối VLC từ nguồn đến cổng 555 của riêng nó (vì vậy bạn sẽ phải nhập rstp: // myvlcserveripaddress: 555 trong tùy chọn src của bạn trên trang web để nhận luồng)

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

Tại đây , bạn có một mẫu trang web nhúng trình phát (dựa trên plugin VLC).

Tất cả các giải pháp trên không hoạt động lâu hơn hoặc quá tốn thời gian để tìm ra.

Đây là câu trả lời cuối cùng. Bạn có thể nhúng liên kết rtsp vào trang web của mình.

Sao chép mã dưới đây trong trình chỉnh sửa html của bạn:

<!--- 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 --->

Nếu tất cả những điều này quá phức tạp và vẫn không giải quyết được nó, hãy để tôi giúp bạn.

Tôi đã làm điều này cho khách hàng của tôi.

Nhấp vào đây http://www.mhcreative.com.my/ipcameratowebsite/