1、說明:海康、大華、華為等大廠攝像頭遵循監控行業標准,一般只支持RTSP傳輸協議,而Chrome、Firefox、Edge等現代瀏覽器的主流版本並不支持RTSP流的直接原生播放!想要在網頁中實現播放RTSP流,目前簡單直接的是用搜狗或360極速瀏覽器
-
一個攝像頭一個IP,一個對應的html文件
-
html文件本地保存,瀏覽器打開獲得監控視頻網頁地址url
-
-
在帆軟大屏上的應用就是將此html文件保存到tomcat所在的本地服務器上,搜狗瀏覽打開預覽獲得網絡url,報表中添加網頁插件
步驟:
1、安裝vlc播放器,一直下一步即可;
-
2、獲取海康rstp視頻流,例如:rtsp://zhangchaoming:zhangchaoming/192.168.0.2/MPEG-4/ch1/main/av_stream;
-
3、新建html文件,插入如下腳本
-
<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410"> <--下面的rtsp值要改成你自己vlc播放的rtsp地址--> <param name='mrl' value='rtsp://admin:12345678@192.168.52.55:8080/h264/ch1/main/av_stream' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> <param name='controls' value='false' /> </object>
4、搜狗瀏覽器打開此html文件,即可本地查看監控視頻
5、將此html文件復制保存到tomcat服務器上對應的tomcat的ROOT文件下,如D:\apache-tomcat-8.5.61\webapps\ROOT
6、打開tomcat服務;搜狗瀏覽器輸入http://localhost:8080/testmy.html,即可打開監控視頻畫面
注:期間啟動tomcat服務異常,是之前拷貝過去的帆軟報表有問題,tomcat一直提示插件錯誤,就先把拷貝的帆軟刪除了,重新啟動tomcat
7、將此網絡地址添加到帆軟的網頁插件的網絡地址欄
下面這個是強哥自寫的vedio4.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <object type='application/x-vlc-plugin' id='vlc' events='True' width="230" height="144" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/3.0.16/npapi-vlc-3.0.16.tar.xz"> <!-- <param name='mrl' value='rtsp://admin:12345678@192.168.22.1:8080/h264/ch1/main/av_stream' /> --> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> </object> <script> var vlc=document.getElementById('vlc'); var options = new Array("rtsp-tcp") var id = vlc.playlist.add('rtsp://admin:12345678@192.168.55.7:8080/h264/ch1/main/av_stream',"fancy name",options); vlc.playlist.playItem(id); </script> <!--<![endif]--> </body> </html>