在vue中使用海康插件實現視頻監控視頻直播方法二(RTMP流加Flash加swf)

在vue中使用海康威視實現視頻監控,視頻直播方法二(RTMP流加Flash加swf)

第一步

用npm裝這個幾個包

 "video.js": "^6.6.0",

 "videojs-flash": "^2.2.0",

 "videojs-swf": "^5.4.2",

第二步

在頁面引入上述包

//視頻插件包
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash";
import SWF_URL from "videojs-swf/dist/video-js.swf";
videojs.options.flash.swf = SWF_URL; // 設置flash路徑，Video.js會在不支持html5的瀏覽中使用flash播放視頻文件

第三步

1，在下面這個js文件中配置

2，配置swf

3,在靜態資源static中放入swfs下面得兩個swf文件和一個swfobject.js,結構如下

4.在index.html中引入

第四步

終於可以寫代碼了

html：一個容器就好

<div id="flashContent">
       <a class="flashBtn"target="_blank"href="http://www.adobe.com/go/getflashplayer">
          <span>點擊運行flash</span>
            </a>
    </div>

methods: 只需要拿到rtmp流傳進去執行一下這個方法就可以播放了。

//預覽視頻流方法
    initialise(rtmpliu) {
      var queryParameters = [];
      var flashVars = "";
      queryParameters["source"] = rtmpliu;
      console.log(rtmpliu);
      if (queryParameters["source"] == "") queryParameters["source"] = "";
      if (queryParameters["type"] == "") queryParameters["type"] = "live";
      if (queryParameters["idx"] == "") queryParameters["idx"] = "2";
      flashVars += "&src=";
      flashVars += queryParameters["source"];
      flashVars += "&autoHideControlBar=";
      flashVars += unescape("true");
      flashVars += "&streamType=";
      flashVars += queryParameters["type"];
      flashVars += "&autoPlay=";
      flashVars += unescape("true");
      flashVars += "&verbose=";
      flashVars += "true";
      var soFlashVars = {
        src: queryParameters["source"],
        streamType: queryParameters["type"],
        autoPlay: "true",
        controlBarAutoHide: "true",
        controlBarPosition: "bottom"
      };
      /* <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> */
      var swfVersionStr = "10.3.0";
      /* <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. --> */
      var xiSwfUrlStr = "/static/swfs/playerProductInstall.swf";
      var params = {};
      params.quality = "high";
      params.bgcolor = "#000000";
      params.allowscriptaccess = "sameDomain";
      params.allowfullscreen = "true";
      var attributes = {};
      attributes.id = "SampleMediaPlayback";
      attributes.name = "SampleMediaPlayback";
      attributes.align = "middle";
      swfobject.embedSWF(
        "/static/swfs/SampleMediaPlayback.swf",
        "flashContent",//對應容器
        900,//width寬
        600,//高
        swfVersionStr,
        xiSwfUrlStr,
        soFlashVars,
        params,
        attributes
      );
    },

小結：方法1和方法2都是要用到flash播放的，不過flash說要淘汰了，所有隻能另找出路了。