grouper-media-client

Quick Start

npm install grouper-media-client -S

vue-conponent

// videoPage
<media-components
      :sidename="sidename" // "single"||"left"|| "right" 可以为三个中一个 
      
      :col="col" // number 列数
      :row="row" // number 行数
      :first="first"  // number 从第几个序号开始
      :initVideo="initVideo" // async Function  初始化视频列表（可选）
      :lockVideo="lockVideo"// async Function  锁定视频通道（可选）
      :getLockVideo="getLockVideo"// async Function  获取锁定的视频通道（可选）
    ></media-components>



// singleVideo
// 不支持动态绑定，必须销毁组件重新生成
<media-components
      :path="url" // string  rtsp地址
    ></media-components>


// method using

    // create
    let infovideo = Vue.extend(videoVue);
      this.clusterVideoWindow = new infovideo({
        propsData: {
          path: prop.url
        }
      });
      let ele = document.createElement("div");
      this.$refs.videoChange.appendChild(ele);
      this.clusterVideoWindow.$mount(
        this.$refs.videoChange.querySelector("div")
      );
    // destory
      this.clusterVideoWindow.$destroy();
      this.clusterVideoWindow = null;
      let ele = this.$refs.videoChange.querySelector("div");
      this.$refs.videoChange.removeChild(ele);

需要srs作为流媒体服务器

// docker镜像启动命令 sudo docker run -d --name httpflv -it -p 8080:8080 -p 443:443 -p 1935:1935 -v ~/nginx/rtmp.conf:/etc/nginx/conf.d/rtmp/rtmp.conf -v ~/nginx/http-flv.conf:/etc/nginx/conf.d/http/http-flv.conf -v ~/nginx/nginx.crt:/etc/nginx/nginx.crt -v ~/nginx/nginx.key:/etc/nginx/nginx.key mugennsou/nginx-http-flv:dev

// ffmpeg推流命令 ffmpeg -hwaccel cuvid -c:v h264_cuvid -vsync 0 -i rtsp://admin:12345@10.2.0.62:554/Streaming/Channels/0501 -q 8 -vf scale_npp=1280:720 -aspect 1.7777 -vcodec h264_nvenc -acodec ACC -aframes 0 -f flv -an rtmp://10.2.0.14:1935/rtsp/10.2.0.64:554/Streaming/Channels/1301