海康威視使用FFmpeg+Nginx-rmtp進行按需推流

1.簡介

很多朋友不太理解海康威視的官方sdk的使用方法博主也是，因為官方提供的是C/S版的，提供的web開發包，對瀏覽器的兼容性也是極差，還有一種辦法是使用ffmpeg進行視頻推流，

但是缺陷也是比較明顯的，同時推三到四個流出來的視頻也是相當卡頓對服務器資源消耗極大

所以博主另辟稀路，可不可以進行按需推流（傻瓜式監控視頻對接）
（點擊視頻先關流再推流做到按需播放）呢？

主要思路：

1. 利用FFmpeg推流軟體進行視頻RTSP轉RTMP流
2. 再利用video-player播放rtmp流，
3. 點擊播放時，判斷ffmpeg行程是否存在，存在則獲取行程的pid號
4. 利用行程號關閉行程以達到關流的的效果

RTSP格式詳見
https://blog.csdn.net/zhouyongku/article/details/45073443?ops_request_misc=%25257B

FFmpeg推流命令

 ffmpeg -i "rtsp://USERNAME:PASSWORD@IP:PROT/Streaming/Channels/<通道ID>"
   -b 4096k -f flv -r 25 -s 1920x1080 -an "rtmp://127.0.0.1:1935/live/自定義名稱

JAVA 實作FFmpeg推流

public static void convertProtocol(String rtsp, String rtmp,String s){
//rtsp:海康rtsp地址
//rtmp:轉換后的rtmp地址
//s: 解析度

        ProcessBuilder builder = new ProcessBuilder(); //創建系統行程
        List<String> commend = new ArrayList<>();
        commend.add("F:/nginx-ffmpeg/ffmpeg/bin/ffmpeg.exe");
        commend.add("-i");
        commend.add("\""+rtsp+"\"");
        commend.add("-f");
        commend.add("flv");
        commend.add("-r");
        commend.add("25");
        commend.add("-s");
        if (s==null)
        {
            s="1920x1080";
        }
        commend.add(s);
        commend.add("-an");
        commend.add(rtmp);
        builder.command(commend);
        builder.redirectErrorStream(true);
        try {


            Process start = builder.start();//啟動行程
            InputStream inputStream = start.getInputStream();
            InputStreamReader gbk = new InputStreamReader(inputStream);
            int len = -1;
            char[] c = new char[1024];
            StringBuffer outputString = new StringBuffer();

            //讀取行程輸入流中的內容
            while ((len = gbk.read(c)) != -1) {
                String ss = new String(c, 0, len);
                outputString.append(ss);
                System.out.print(ss);
            }


            gbk.close();
            inputStream.close();
        } catch (Exception e) {
            e.printStackTrace();

        }

    }

JAVA實作關流

//pid ffmpeg的行程pid號
 public void closeLiu(String pid) {
        try{
            Runtime.getRuntime().exec("taskkill /F /PID "+pid+"");

        }catch (Exception e)
        {
            e.printStackTrace();
        }

    }

獲取FFmpeg的行程PID號

 public String getPid() {
        String pid = null;
        try{
            Process process=Runtime.getRuntime().exec("tasklist /fi \"imagename eq ffmpeg.exe\" /fo list");
            InputStream inputStream = process.getInputStream();
            BufferedReader bf=new BufferedReader(new InputStreamReader(inputStream,"GBK"));
            String line;
            while((line=bf.readLine())!=null)
            {
                    if (line.startsWith("PID")){
                        String[] array = line.split(":");
                        pid = array[1].trim();
                    }

                }
            System.out.println("PID:"+pid);


        }catch (Exception e)
        {
            e.printStackTrace();
        }

        return pid;
    }

到這里已經可以使用Java推流關流了
下面是使用vue的video-player在網頁上播放

**安裝支持插件**
npm install --save vue-video-player 
npm install --save videojs-flash

vue使用

<videoPlayer
      ref="videoPlayer"
      :options="videoOptions"
      class="vjs-custom-skin videoPlayer"
      :playsinline="false"
      @play="onPlayerPlay()"
    />
    videoOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,瀏覽器準備好時開始回放，
        muted: false, // 默認情況下將會消除任何音頻，
        loop: false, // 導致視頻一結束就重新開始，
        preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻資料，auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值，值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        techOrder: ['flash', 'html5'], // 兼容順序
        sources: [
          {
            // 流配置，陣列形式，會根據兼容順序自動切換
            type: 'rtmp/hls',
            src: '你的rtmp地址',
          },
        ],
        poster: image, //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 允許覆寫Video.js無法播放媒體源時顯示的默認資訊，
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按鈕
        },
      }

videoPlayer標簽事件說明
http://docs.wex5.com/videoplayer/

點擊播放事件之后

data() {
    return {
      videoSrc: '',
      liuSta: false,
      pid: '',
      // 視頻播放
      videos: {
        rtsp: '你的rtsp地址',
        rtmp: '你的rtmp地址',
        fenbianlv: '1920x1080',
      }
  }
onPlayerPlay() {
      //暫停其他視頻
      this.$refs.videoPlayer.player.pause()
      //判斷流行程是否存在
      videoPlay.isLiu().then((response) => {
        this.liuSta = response.result
 		//如果行程存在則獲取行程的pid號
        if (this.liuSta) {
          videoPlay.getFFpid().then((response) => {
            this.pid = response.message
            //再使用pid號關閉流
            videoPlay.closeLiu(this.pid).then(() => {
            //最后再呼叫推流介面
              videoPlay.openLiu(this.videos).then(() => {
                console.log('step1', '播放成功！')
              })
            })
          })
        } else {
        //如果行程不存在則直接推流
          videoPlay.openLiu(this.videos).then(() => {
            console.log('step1', '播放成功！')
          })
        }
      })
    }

到此已經成功實作監控視頻按需播放，有問題歡迎下方留言