整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          在網(wǎng)頁上顯示監(jiān)控視頻

          最近需要在web項(xiàng)目中顯示監(jiān)控視頻,采用了webrtc+webrtc-streamer+coturn的方案實(shí)現(xiàn),能夠在公網(wǎng)上做很低的延時(shí),對(duì)于實(shí)時(shí)監(jiān)控視頻有很好的效果,是目前來講比較好的一個(gè)選擇方案。

          1、webrtc 用于視頻流的顯示。

          2、webrtc-streamer負(fù)責(zé)去監(jiān)控視頻主機(jī)(這里多數(shù)是NVR或DVR)去拉取RSTP視頻流,并轉(zhuǎn)發(fā)到Webrtc中進(jìn)行顯示。

          3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務(wù),主要作用是穿透做NAT穿透,讓雙方找到能互相找到。

          網(wǎng)絡(luò)邏輯結(jié)構(gòu)圖

          一、webrtc-streamer安裝

          這里采用的是CentOS 7系統(tǒng),直接采用的Docker安裝,關(guān)于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。

          docker pull mpromonet/webrtc-streamer
          docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:noka@120.92.19.150:3478

          這里后面的-t和-s參數(shù)分別指向cotum的strun和tun服務(wù),這里同內(nèi)一定要用自己搭建的穿透服務(wù),webrtc-streamer內(nèi)置的服務(wù)是指向goole提供的一個(gè)服務(wù),國內(nèi)訪問及其不穩(wěn)定,關(guān)于cotum的安裝請(qǐng)參照官網(wǎng)。這里啟動(dòng)好以后,就可以通過瀏覽器訪問8000端口的服務(wù)了,這里可以通過以下地址來驗(yàn)證視頻流服是否成功。

          http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101

          如果上面的地址能播放視頻,說明配置成功了,地址后面的參數(shù)是視頻流的地址。

          二、web端視頻顯示代碼

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <!-- webrtc公用庫-->
              <script src="/js/adapter.js"></script>
              <!-- webrtc-streamer調(diào)用庫,來自webrtc-streamer-->
              <script src="/js/webrtcstreamer.js"></script>
          </head>
          <body>
          <!-- 視頻顯示部分 -->
          <div id="play_div"></div>
          <script>
              var webRtcServerList = [];//視頻流服務(wù)對(duì)象部分
              var urls=[
                  'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//視頻流地址
                  'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//視頻流地址
              ];
              var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服務(wù)地址
              //---------創(chuàng)建視頻播放界面--------------------------------------------------------
              function plays(idx){
                  var videoelt = document.createElement("video");//創(chuàng)建一個(gè)播放器
                  var vi_tag='videoTag_'+idx;//播放器的id
                  videoelt.id = vi_tag;//播放器id
                  videoelt.muted = true;
                  videoelt.width=500;
                  videoelt.height=600;
                  videoelt.controls=true;//開啟進(jìn)度條
                  document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
                  var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創(chuàng)建webrtc流對(duì)象
                  //連接視頻,參數(shù)1 視頻地址,參數(shù)2 音頻地址(這里沒有),參數(shù)3 連接參數(shù)(這里采用的是tcp,120秒超時(shí)等)
                  webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
                  webRtcServerList[idx]=webRtcServer;//緩存視頻流對(duì)象
              }
              //----------頁面退出時(shí)關(guān)閉播放流---------------------
              window.onbeforeunload = function() {
                  for(var i=0;i<webRtcServerList.length;i++){
                      webRtcServerList[i].disconnect();
                  }
              }
              //---------初始化加載視頻----------------------------
              window.onload= function() {
                  for(var i=0;i<urls.length;i++){
                      plays(i);
                  }
              }
          </script>
          </body>
          </html>

          這樣就完成了整個(gè)項(xiàng)目實(shí)現(xiàn),這里如果視頻沒有播放成功,最有可能是穿透服務(wù)的問題,需要檢查穿透服務(wù)。

          時(shí)的工作中常會(huì)遇到一些系統(tǒng)集成的需求,需要在軟件平臺(tái)集成視頻監(jiān)控系統(tǒng)。而軟件開發(fā)者往往不懂安防弱電系統(tǒng),不知道如何在自己的軟件界面中集成一些監(jiān)控的實(shí)時(shí)畫面。而監(jiān)控廠家提供的SDK比較復(fù)雜,很難在短時(shí)間完成集成的任務(wù)。最終導(dǎo)致軟件平臺(tái)的一些功能無法實(shí)現(xiàn),影響項(xiàng)目的質(zhì)量。

          本文提供的方法主要基于VLC播放器的ActiveX插件,通過這個(gè)插件,在網(wǎng)頁中調(diào)用攝像機(jī)的RTSP流,實(shí)現(xiàn)圖像的實(shí)時(shí)預(yù)覽,音頻的監(jiān)聽等等功能。文章以海康的IP網(wǎng)絡(luò)攝像機(jī)為例給出具體的調(diào)用方法,供大家學(xué)習(xí)參照。

          VLC軟件下載

          登錄VLC官網(wǎng) https://www.videolan.org/,選擇windows(32位)版本下載。

          下載VLC軟件

          VLC軟件安裝(務(wù)必勾選插件)

          運(yùn)行安裝文件

          選擇軟件安裝位置

          一定記得要勾選網(wǎng)頁瀏覽器插件

          完成安裝

          網(wǎng)頁編輯

          可選用記事本(notepad)或?qū)I(yè)的編輯器,輸入如下代碼,保存為html網(wǎng)頁文件。

          <html>
          <body>
          
          <title>TESTVDEIO-1-TEST</title>
          <head>
          <table>
                      <tbody>
                      <caption>視頻監(jiān)控演示</caption>
                  <tr>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/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' />
                      </td>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/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' />
                      </td>
                  </tr>
                   <tr>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/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' />
                      </td>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/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' />
                      </td>
                  </tr>
              </tbody>
          </table>
                      </object>
          </body>
          </html>

          代碼編輯截圖

          海康威視RTSP調(diào)用格式


          具體請(qǐng)參看海康專業(yè)文檔

          瀏覽器測試

          先用Google Chrome瀏覽器測試,提示插件不支持。

          Chrome瀏覽器提示插件不受支持

          用微軟IE測試,需要安裝插件。

          IE瀏覽器提示要安裝ActiveX插件

          確認(rèn)安裝插件

          瀏覽器只顯示了第一個(gè)畫面。

          IE瀏覽器顯示不完整

          用編輯器測試,2種內(nèi)核都能正常顯示。

          編輯器里測試效果

          改用360瀏覽器,呈現(xiàn)2X2的畫面,實(shí)現(xiàn)最終的顯示效果。

          360瀏覽器顯示的最終效果圖

          結(jié)語

          本文參考了一些專業(yè)文章,就不一 一列出了,在這一并謝過!

          由于本人水平有限,有不對(duì)的地方敬請(qǐng)指正。文章旨在拋磚引玉,通過討論,相互學(xué)習(xí),共同進(jìn)步。


          我是WoNew弱電蝸牛,一名從業(yè)多年的弱電工程師,在頭條傳播弱電專業(yè)知識(shí)和行業(yè)信息,分享工作中的經(jīng)驗(yàn)和心得。
          喜歡我的文章或視頻,歡迎點(diǎn)贊和轉(zhuǎn)發(fā)。有疑問或建議,也歡迎留言,我會(huì)盡力解答。

          篇介紹了前端入門——html 中如何使用圖片,今天講下如何使用視頻和音頻等多媒體元素,它們能讓你的網(wǎng)頁更加豐富,讀者相對(duì)于文字圖片更愿意觀看視頻和音頻或其它多媒體。在本教程中,您將了解到不同的多媒體格式,以及如何在您的網(wǎng)頁中使用它們。

          什么是多媒體?

          是多種媒體的綜合,一般包括文本,聲音和圖像等多種媒體形式。在計(jì)算機(jī)系統(tǒng)中,多媒體指組合兩種或兩種以上媒體的一種人機(jī)交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動(dòng)畫和影片,以及程式所提供的互動(dòng)功能。

          在因特網(wǎng)上,您會(huì)經(jīng)常發(fā)現(xiàn)嵌入網(wǎng)頁中的多媒體元素,現(xiàn)代瀏覽器已支持多種多媒體格式。

          多媒體文件格式

          多媒體元素(比如視頻和音頻)存儲(chǔ)于媒體文件中。多媒體元素也擁有帶有不同擴(kuò)展名字的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。具體有哪些格式可以參考 w3cshool 網(wǎng)站的介紹,https://www.w3cschool.cn/html5/html5-video.html ,https://www.w3cschool.cn/html5/html5-audio.html。

          HTML5 Video(視頻)

          直到現(xiàn)在,網(wǎng)頁上仍然不存在一項(xiàng)顯示視頻的標(biāo)準(zhǔn)。今天,大多數(shù)視頻是通過插件(比如 Flash)來顯示的。然而,并非所有瀏覽器都擁有同樣的插件。HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法。

          語法如下:

          <video width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            您的瀏覽器不支持Video標(biāo)簽。
          </video>

          <video> 元素提供了播放、暫停和音量控件來控制視頻。

          同時(shí) <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設(shè)置的高度和寬度,所需的視頻空間會(huì)在頁面加載時(shí)保留。如果沒有設(shè)置這些屬性,瀏覽器不知道視頻的大小,瀏覽器就不能在加載時(shí)保留特定的空間,頁面就會(huì)根據(jù)原始視頻的大小而改變。

          <video> 與 </video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。一個(gè)頁面可以使用多個(gè)<video> 標(biāo)簽,<video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。

          顯示效果:

          HTML5Audio(音頻)

          和視頻一樣沒有統(tǒng)一的標(biāo)準(zhǔn),各個(gè)瀏覽器都不一樣。HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn),即使用 <audio> 元素。通過使用HTML5中的audio功能,你可以實(shí)現(xiàn)與flash相同的功能,即回放、跳轉(zhuǎn)、緩沖等。

          語法如下:

          <audio controls>
            <source src="horse.ogg" type="audio/ogg">
            <source src="horse.mp3" type="audio/mpeg">
            您的瀏覽器不支持 audio 元素。
          </audio>

          control 屬性供添加播放、暫停和音量控件。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。允許使用多個(gè) <source> 元素。<source> 元素可以鏈接不同的音頻文件,瀏覽器將使用第一個(gè)支持的音頻文件。目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。

          顯示效果:

          HTML 插件——輔助應(yīng)用程序

          插件(Plug-in)是擴(kuò)展瀏覽器標(biāo)準(zhǔn)功能的計(jì)算機(jī)程序,插件被設(shè)計(jì)用于許多不同的目的:

          • 運(yùn)行 Java 小程序
          • 運(yùn)行 ActiveX 控件
          • 顯示 Flash 電影
          • 顯示視頻或音頻
          • 顯示地圖
          • 掃描病毒
          • 驗(yàn)證銀行賬號(hào)

          1、<object> 元素

          <object> 元素定義 HTML 文檔中的嵌入式對(duì)象。

          它旨在將插件(例如 Java applet、PDF 閱讀器和 Flash 播放器)嵌入網(wǎng)頁中,但也可以用于將 HTML 包含在 HTML 中。

          如下:

          插入一個(gè)網(wǎng)頁片段

          <object width="100%" height="500px" data="snippet.html"></object>

          或者插入一個(gè)圖片

          <object data="audi.jpeg"></object>

          播放一個(gè)視頻

          <object width="420" height="360"
          classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
          codebase="http://www.apple.com/qtactivex/qtplugin.cab">
          <param name="src" value="movie.mp4">
          <param name="controller" value="true">
          </object>

          播放一個(gè)音頻

          <object height="100" width="100" data="song.mp3"></object>

          2、<embed> 元素

          <embed> 元素也可定義了 HTML 文檔中的嵌入式對(duì)象。這是一個(gè) HTML5 標(biāo)簽,在 HTML4 中是非法的,但是所有瀏覽器中都有效。

          插入一個(gè)flash文件

          <embed width="400" height="50" src="bookmark.swf">

          插入html片段

          <embed width="100%" height="500px" src="snippet.html">

          播放一個(gè)音頻

          <embed height="100" width="100" src="song.mp3" />

          插入一個(gè)圖片

          <embed src="audi.jpeg">

          注意:

          大多數(shù)瀏覽器不再支持 Java 小程序和插件。

          大多數(shù)現(xiàn)代瀏覽器關(guān)閉了對(duì) Flash 的支持。

          我們可以使用 <video> 和 <audio> 標(biāo)簽來顯示視頻和音頻

          視頻和音頻如何兼容大多瀏覽器

          如下視頻代碼HTML 5 <video> 元素會(huì)嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗,則回退到 <embed> 元素。

          HTML 5 + <object> + <embed> 是最好的解決辦法。

          <video width="320" height="240" controls="controls">
            <source src="movie.mp4" type="video/mp4" />
            <source src="movie.ogg" type="video/ogg" />
            <source src="movie.webm" type="video/webm" />
            <object data="movie.mp4" width="320" height="240">
              <embed src="movie.swf" width="320" height="240" />
            </object>
          </video>

          如下音頻代碼HTML5 <audio> 元素會(huì)嘗試以 mp3 或 ogg 來播放音頻。如果失敗,代碼將回退嘗試 <embed> 元素。

          HTML 5 + <embed> 是最好的解決辦法。

          <audio controls="controls" height="100" width="100">
            <source src="song.mp3" type="audio/mp3" />
            <source src="song.ogg" type="audio/ogg" />
            <embed height="100" width="100" src="song.mp3" />
          </audio>

          到此你以及了解了如何在網(wǎng)頁中使用視頻音頻及其它多媒體控件,趕快自己試試,祝你學(xué)習(xí)愉快。

          參考文獻(xiàn):https://www.w3school.com.cn/html/html_video.asp

          上篇:前端入門——html 中如何使用圖片

          下篇:前端入門——html 表格的使用


          主站蜘蛛池模板: 成人精品一区二区电影| 日本视频一区二区三区| 中文字幕亚洲一区二区三区| 少妇激情一区二区三区视频| 无码国产精成人午夜视频一区二区| 国产乱人伦精品一区二区在线观看| 中文字幕一区二区三区在线不卡 | 狠狠爱无码一区二区三区| 亚洲一区二区成人| 免费萌白酱国产一区二区三区| 国产精品视频免费一区二区三区| 无码AV一区二区三区无码| 国产午夜精品免费一区二区三区| 亚洲一区二区久久| 国产精品视频一区二区三区无码| 亚欧成人中文字幕一区| 免费萌白酱国产一区二区三区| 国产亚洲情侣一区二区无| 亚洲av区一区二区三| 精品一区二区三区在线观看视频| 怡红院AV一区二区三区| 精品无码人妻一区二区三区18| 亚洲国产成人久久一区久久| 日本视频一区二区三区| 成人国内精品久久久久一区| 精品一区二区三区在线观看| 呦系列视频一区二区三区| 红杏亚洲影院一区二区三区| 东京热无码一区二区三区av| 国产在线精品一区二区不卡| 精品国产福利第一区二区三区| 亚洲狠狠久久综合一区77777| 国产一区二区三区91| 亚洲国产激情在线一区| 无码丰满熟妇浪潮一区二区AV| 国产一区二区三区露脸| 欧美激情一区二区三区成人| 国产视频福利一区| 久久毛片免费看一区二区三区| 国产一区视频在线| 成人精品一区二区激情|