grouper-media-client

Quick Start

``
npm install grouper-media-client -S
`

vue-conponent

`
// videoPage
: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 获取锁定的视频通道（可选）
>



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


// 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