playerandlayout

一个支持WebRtc协议的多宫格布局播放器组件

封装了两个组件：支持WebRtc协议的播放器组件、多宫格布局切换组件。用户可以根据需要使用。其中多宫格布局切换组件配置了插槽，使用时可以嵌套其他组件或代码片段。

使用说明

一、安装依赖

npm i playerandlayout

二、vue项目入口文件调用

在vue项目的入口文件'main.js',写入以下代码：

 import playerandlayout from 'playerandlayout'
 import 'playerandlayout/dist/public/js/iconfont.js'

 Vue.use(playerandlayout)

在vue项目的运行入口文件'index.html',写入以下代码：

 <script src="./ZLMRTCClient.js"></script> //按实际路径引用

以上代码便完成了playerandlayout组件的引入，需要注意的是，第三方插件ZLMRTCClient.js需要单独引用

三、组件中使用

1. 多宫格布局切换组件：

<morelayout
   @getLayoutNo="getLayoutNo(arguments)"
   :activeVideoNo="activeVideoNo"
   :layoutWidth="myWidth"
   :layoutHeight="myHeight"
  >
</morelayout>

参数	说明	类型	默认值
getLayoutNo	返回的是一个长度为2的数组，分别代表x宫格布局下：窗口数量、活动窗口位置	function
activeVideoNo	x宫格布局下的活动窗口位置	number	0
layoutWidth	组件的宽度百分比	number	100
layoutHeight	组件的高度百分比	number	100

2. 播放器组件：

<webrtcplayer
  :currentDeviceName="DeviceName"
  :videoUrl="videoUrl"
  @isStar="isStar"
  :isStarProp="isStarProp"
></webrtcplayer>

参数	说明	类型	默认值	示例
currentDeviceName	设备名称	string
videoUrl	播放地址	string		https://172.16.20.69/index/api/webrtc?app=live&stream=test&type=play
isStar	返回的是一个布尔值,true代表已收藏，false代表未收藏	function
isStarProp	收藏	boolean

3. 嵌套使用：

<morelayout
   @getLayoutNo="getLayoutNo(arguments)"
   :activeVideoNo="activeVideoNo"
   :layoutWidth="myWidth"
   :layoutHeight="myHeight"
 >
   <!-- eslint-disable -->
   <template #default="slotProps">
     <webrtcplayer
       :currentDeviceName="deviceNameArr[slotProps.index]"
       :videoUrl="streamUrlArr[slotProps.index]"
       @isStar="isStar"
       :isStarProp="isStarPropArr[slotProps.index]"
     ></webrtcplayer>
   </template>
   <!-- eslint-ensable -->
</morelayout>

注：这两个组件嵌套使用时，需要把播放器组件放到template节点中，并使用#default="slotProps"进行绑定。播放器组件建议屏蔽eslint语法检查。

四、打包发布

修改组件后需要打包发布。先检查项目webpack的输出配置以及package.json版本号，然后执行下面命令：

npm run build
 .... 
 
npm publish

五、组件功能

1. 播放器组件

• 播放/暂停
• 音量
• 放大/缩小
• 截图
• 画中画
• 全屏
• WebRTC协议

2. 多宫格布局组件

• 1,4,6,8,9,16,25,36布局切换
• 活动窗口自动跳转
• 点击定位活动窗口

六、效果图