小程序媒体组件

我们简化了许多用户的操作,例如我们把原来需要用户在业务中要写的live-pusher、live-player标签封装成了组件形式,用户只需要控制何时进行渲染及需要渲染的对象即可

组件位于CRSDK/components 目录下,文件说明:

  1. CRVideoPusher 音视频推流组件,自己的音视频通过此组件输入
  2. CRVideoPlayer 视频拉流组件,会议内成员视频通过此组件输出
  3. CRAudioPlayer 音频拉流组件,会议内所有成员的声音通过此组件输出
  4. video-custom 视频自定义组件,用户可以在此定义一些位于视频层级之上的组件,需要使用原生组件支持。该组件由用户定制更新,不需要随SDK版本更新
请勿修改与之相关的SDK相对路径,如需修改请在组件JS文件中修改SDK的引入路劲

音视频推流组件

代码示例

json:

{
  "usingComponents": {
    "CRVideoPusher": "../../utils/CRSDK/components/CRVideoPusher/CRVideoPusher"
  }
}

wxml:


<view>
    <CRVideoPusher wx:if='{{myUserInfo}}' userInfo='{{myUserInfo}}' config='{{CRVideoPusher}}' debug='{{pusherDebug}}' extend='{{CRVideoPusherExtend}}' ></CRVideoPusher>
</view>

js:

const app = getApp();
const CR = app.CR;  //CR是SDK文件,已经注入在app中。也可以使用require导入

Page({
    data: {
        userId: 'wx_4762', //进入会议的userId
        myUserInfo: null,   //用户成员信息
        CRVideoPusher: {
            orientation: 'vertical', // 视频方向 可选值: vertical,horizontal
            aspect: '3:4', // 宽高比,可选值: 3:4,9:16
            beauty: 0, // 美颜等级,取值范围 0-9 ,0 表示关闭
            whiteness: 0, // 美白等级,取值范围 0-9 ,0 表示关闭
            devicePosition: 'front', // 前置或后置,值为front, back,此属性不支持动态修改,如需切换摄像头请调用api
            minBitrate: 100, //    最小码率
            maxBitrate: 800, // 最大码率
            waitingImage: 'http://www.cloudroom.com/pages/imgs/cr_meeting/be_closed.jpg', // 进入后台时推流的等待画面
        }
        pusherDebug: false, //视频调试开关
        CRVideoPusherExtend: null,  //用户扩展对象,将传入 video-custom 组件中
    },
    onReady: function () {
        const myUserInfo = CR.GetMemberInfo(this.data.userId);   //获取自己的成员对象信息
        this.setData({myUserInfo}); //渲染到页面,开关摄像头、麦克风需要手动设置myUserInfo中的videoStatus、auidoStatus属性
    },
    //打开美颜及美白效果
    openBeauty: function(){
          this.setData({
              'CRVideoPusher.beauty': 5,
              'CRVideoPusher.whiteness': 5
          })
    },
    // 切换前后摄像头
    toggleCam(e) {
        CR.SetDefaultVideo(this.data.userId, '');
    },
})
  • 组件属性说明
参数 类型 必填 含义
userInfo Object 成员信息对象,可以通过 GetMemberInfo或者GetAllMembers获取
config Object 组件配置对象,案例中CRVideoPusher的属性是可配置项,大部分属性支持动态修改
debug Boolean 调试开关
extend Object 用户扩展信息,该值将传入 video-custom 组件

视频拉流组件

代码示例-渲染会议内所有成员的视频

json:

{
  "usingComponents": {
    "CRVideoPlayer": "../../utils/CRSDK/components/CRVideoPlayer/CRVideoPlayer"
  }
}

wxml:


<!-- 渲染会议内所有成员的视频组件(自己的除外) -->
<view wx:for='{{allMembers}}' wx:if='{{item.userID!==userId}}' wx:key='{{item.userId}}'>
    <CRVideoPlayer wx:if='{{item}}' userInfo='{{item}}' config='{{CRVideoPlayer}}' debug='{{plauerDebug}}' extend='{{CRVideoPlayerExtend}}' ></CRVideoPlayer>
</view>

js:

const app = getApp();
const CR = app.CR;  //CR是SDK文件,已经注入在app中。也可以使用require导入

Page({
    data: {
        userId: 'wx_4762', //进入会议的userId
        CRVideoPlayer = {
            orientation: 'vertical', // 画面方向,可选值: vertical,horizontal    
            objectFit: 'fillCrop', // 填充模式,可选值: contain,fillCrop    
            autoPauseIfNavigate: true, // 当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放
            autoPauseIfOpenNative: true, // 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
        }
        plauerDebug: false, //视频调试开关
        CRVideoPlayerExtend: null,  //用户扩展对象,将传入 video-custom 组件中
    },
    onReady: function () {
        const allMembers = CR.GetAllMembers();   //获取所有成员对象信息,渲染时需要删除自己的
        this.setData({allMembers}); //渲染到页面,开关摄像头、麦克风需要手动设置对象信息中的videoStatus、auidoStatus属性
    }
})
  • 组件属性说明
参数 类型 必填 含义
userInfo Object 成员信息对象,可以通过 GetMemberInfo或者GetAllMembers获取
config Object 组件配置对象,案例中CRVideoPlayer的属性是可配置项,属性支持动态修改
debug Boolean 调试开关
extend Object 用户扩展信息,该值将传入 video-custom 组件

音频拉流组件

代码示例

json:

{
  "usingComponents": {
    "CRAudioPlayer": "../../utils/CRSDK/components/CRAudioPlayer/CRAudioPlayer"
  }
}

wxml:


<view>
    <CRAudioPlayer config='{{CRAudioPlayer}}' debug='{{CRAudioDebug}}' wx:if='{{CRAudioPlayer}}'></CRAudioPlayer>
</view>

js:


Page({
    data: {
        CRAudioPlayer = {
            soundMode: 'speaker', // 声音输出方式,有效值为 speaker(扬声器)、ear(听筒)
            autoPauseIfNavigate: false, // 当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放
            autoPauseIfOpenNative: false, // 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
        }
        CRAudioDebug: false, //视频调试开关
    }
})
  • 组件属性说明
参数 类型 必填 含义
config Object 组件配置对象,案例中CRAudioPlayer的属性是可配置项,属性支持动态修改
debug Boolean 调试开关

视频自定义组件

  • 试想一下,如果组件中只显示用户的视频却不显示昵称、当你会议成员关闭了摄像头视频就黑了,但是你想看到一张图片或者放几个提示文字
  • 那么您可以将想要的效果写在这里
  • 该组件会将业务层的userInfo、extend扩展对象传入
  • 抒写时请务必使用小程序原生组件(cover-view、cover-image)
  • 由于该组件是完全由您定制的,那么一定不要随着SDK版本更新该组件
  • 代码示例请参考SDK包中的video-custom组件
© Carter all right reserved,powered by Gitbook文件修订时间: 2019-08-08 11:57:40

results matching ""

    No results matching ""