Yh-video-pc NPM

项目简介

该项目为音视频的基础组件，将提供音视频部分的基础功能,此项目有三种调用的方式
1、直接打开页面
2、组件
3、核心SDK功能使用（功能尚未完全提供，待更新）

项目启动

启动组件的基础文档示例页面

npm run dev

项目打包

npm run build

项目发布

npm run lib
npm login
npm publish

项目结构

|-- build                   #webpack打包部分
|-- config                  #webpack配置部分
|-- node_modules            #依赖包
|-- src                     #核心组件文件
| |-- mian.js                 #组件入口文件
| |-- yhVideo.vue             #组件
| |-- components              #组件的依赖、模块组件
| |-- assets                  #静态资源
| |-- scss                    #样式文件
| |-- utils                   #组件的工具包
| |-- axios                   #基础请求部分的封装
|-- example                  #测试及demo页面
| |-- index.html
| |-- main.js                    #案例入口
| |-- demo.vue                   #案例vue文件
|-- dist                    #打包后的文件

项目使用

页面的方式调用

直接提供默认的场景及页面，直接调用地址如https://test.yanhuamedical.com/videoser;
浏览器地址中需要带核心的参数具体参数见下方组件中yhVideoDatas中可通过url传递的字段;
注意：
1、userId,userName其中一个不传就会默认打开加入房间的页面
2、userId,userName,roomId都传了直接加入房间
3、userId,userName都传了,未传roomId会默认创建一个房间（**所以要特别注意刷新页面会重新创建房间**）

组件的方式调用

基础使用

npm install yh-video-pc

入口main.js中引入组件

import yhVideoPc from 'yh-video-pc'
Vue.use(yhVideoPc)

<template>
 <!--自定义宽高-->
 <div style="width: 980px;height: 560px;margin:0 auto;">
    <yh-video-pc :yhVideoDatas="yhVideoDatas">
      <div slot="extendNav">
        <!--业务系统自定义插槽内容-->
      </div>
    </yh-video-pc>
  </div>
</template>

<script>

export default {
  data () {
    return {
      yhVideoDatas: {}
    }
  }
}
</script>

yhVideoDatas参数及说明

参数	说明	必传	类型	可通过url传递
systemToken	网关token	是	string	是
systemId	系统ID，授权使用	是	string	是
systemName	系统名	是	string	是
roomId	房间号	-	string	是
userId	用户ID	-	string	是
userName	用户名	-	string	是
roleType	角色的类型 'doctor' 'patient'	-	string	是
roleText	角色名	-	string	是
isAdmin	是否为管理员 0否 1 是	-	int	否
topic	会议主题	-	string	-
menus	菜单(详见下方）	-	Object	-
baseUrl	接口的请求地址(有默认值)	-	string	-
roomUrl	加入房间的地址(有默认值)	-	string	-
layoutType	分屏模式，默认standard(详见下方）	-	string	-
visibleMemberSection	是否显示成员列表，默认true	-	Boolean	-
openAudio	默认开启音频，默认true	-	Boolean	-
openCamera	默认开启视频，默认false	-	Boolean	-
useIm	默认使用Im，默认false	-	Boolean	-
otherCanControlBoard	非共享白板的时候其他人是否可以操作白板，默认true	-	Boolean	-
memberMenus	成员默认菜单（详见下方）	-	Array	-

menus

 {
   audio: {
     name: 'audio', // 功能名，不能随意修改
     imgUrl: require('@/assets/audio.png'), // 按钮图标，不传使用默认
     text: '关闭声音', // 按钮下方文字
     closeText: '开启声音' // 按钮关闭状态的文字
     floatLeft: true, // 左浮动，固定在工具栏左侧
     floatRight: true // 右浮动，固定在工具栏的右侧
   },
   camera: {
     name: 'camera',
     imgUrl: require('@/assets/camera.png'),
     text: '关摄像头',
     closeText: '开摄像头'
   },
   raiseHands: {
     name: 'raiseHands',
     imgUrl: require('@/assets/raiseHands.png'),
     text: '举手',
     closeText: '放手'
   },
   broadcast: {
     name: 'broadcast',
     imgUrl: require('@/assets/broadcast.png'),
     text: '直播'
   },
   recording: {
     name: 'recording',
     imgUrl: require('@/assets/recording.png'),
     text: '开始录制'
   },
   invitation: {
     name: 'invitation',
     imgUrl: require('@/assets/invitation.png'),
     text: '邀请成员'
   },
   memberManage: {
     name: 'memberManage',
     imgUrl: require('@/assets/memberManage.png'),
     text: '管理成员'
   },
   fileShare: {
     name: 'fileShare',
     imgUrl: require('@/assets/fileShare.png'),
     text: '文件共享'
   },
   layout: {
     name: 'layout',
     imgUrl: require('@/assets/layout.png'),
     text: '布局切换'
   },
   more: {
     name: 'more',
     imgUrl: require('@/assets/more.png'),
     text: '更多功能'
   },
   exit: {
     name: 'exit',
     imgUrl: require('@/assets/exit.png'),
     text: '离开会诊室',
     floatRight: true
   }

layoutType

默认的分屏方式有：

 'standard' // 标准布局
 'one' // 一分屏
 'two' // 两分屏
 'rowTwo' // 一行排两个人
 'rowThree' // 一行排三个人
 'rowThree' // 一行排四个人

memberMenus

默认除了录制，其他功能都有：

 ['audio', 'camera', 'raiseHands', 'broadcast', 'invitation', 'memberManage', 'fileShare', 'layout', 'more', 'exit']

  'audio' // 声音
  'camera' // 摄像头
  'raiseHands' // 举手
  'broadcast' // 直播
  'invitation' // 邀请
  'memberManage' // 成员管理
  'fileShare' // 文件共享（**必须配置了使用IM才可以用**）
  'layout' // 切换布局
  'more' // 跟多功能
  'exit' // 退出