瀏覽器播放海康網絡監控視頻,即html文件訪問rtsp視頻源


1、瀏覽器播放海康網絡監控視頻,即html文件訪問rtsp視頻源

1、說明:海康、大華、華為等大廠攝像頭遵循監控行業標准,一般只支持RTSP傳輸協議,而Chrome、Firefox、Edge等現代瀏覽器的主流版本並不支持RTSP流的直接原生播放!想要在網頁中實現播放RTSP流,目前簡單直接的是用搜狗或360極速瀏覽器

  • 一個攝像頭一個IP,一個對應的html文件

  • html文件本地保存,瀏覽器打開獲得監控視頻網頁地址url

  • 此監控視頻的html文件只能用搜狗或360極速模式的瀏覽器打開

  • 在帆軟大屏上的應用就是將此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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM