Taro 小程序直播组件 LivePlayer 注意事项

1、直播组件优先开通实时音频和视频(管理后台),申请对应的证书

2、直播组件需要做【系统】权限验证,(麦克风和相机),引导用户打开权限,不然部分手机加载失败( insertLivePlayer:fail:access denied) 因为权限有三个状态(undefined、denied、authorized),authorized代表系统权限已开

export const getSystemInfo = (keys: Tkey[], content = '') => {
  return new Promise((resolve) => {
    const systemInfo = wx.getAppAuthorizeSetting();
    console.log('system', systemInfo);
    if (!systemInfo) {
      return resolve({ code: -1, msg: '获取系统权限失败~' });
    }
    keys.forEach((item) => {
      if (systemInfo[item] !== 'authorized') {
        Taro.showModal({
          content,
          success: (res) => {
            if (res.confirm) {
              wx.openAppAuthorizeSetting({
                success: () => {
                  return resolve({ code: 100, msg: '打开系统授权页成功~' });
                },
                fail: () => {
                  return resolve({ code: 101, msg: '打开系统授权页失败~' });
                }
              });
            } else {
              return resolve({ code: 403, msg: '用户点击取消~' });
            }
          }
        });
        return resolve({ code: 401, msg: '权限没打开~' });
      }
    });
    return resolve({ code: 0, msg: '用户已开通对应权限~' });
  });
};
 
// 获取系统权限
      const res: any = await getSystemInfo(
        ['cameraAuthorized', 'microphoneAuthorized'],
        '检测到您没有打开麦克风和相机权限,部分功能将没法使用~'
      );

3、直播组件同层渲染在全屏下失效,需要单独处理,全屏做CoverView\CoverImage做原生覆盖能力处理,不是全屏就同层渲染,全屏处理时候顶层容器和直接子节点需要设置 visiblity:visible;position:relative;z-index:99999; 必须得处理,不然android 的CoverView覆盖不了原生直播组件。

.cover-main{
    position: absolute;
    visibility: visible;
    z-index: 999999;
}
 
<CoverView className={style['cover-main']}>
                <CoverView className={style['cover-main']}>
                  <CoverView className={style['live-control']} onClick={showTips}></CoverView>
 
        {fullScreenFlag && (
        <>
            {/*广告*/}
            <Curtain />

            {/* 封面*/}
            {startStatus === false ? (
            <CoverView className={style.cannot_see}>
                <CoverImage className={style.cannot_see_img} src={readyImg}></CoverImage>
            </CoverView>
            ) : teachStatus === false ? (
            <CoverView className={style.cannot_see}>
                <CoverImage className={style.cannot_see_img} src={outImg}></CoverImage>
            </CoverView>
            ) : null}

            {/* 倒计时*/}
            {time >= 1800 ? <CountDown time={time} /> : null}
        </>
        )}

        {/*控制*/}
        <CoverView
        className={`${style.control} ${tips ? style['up-ani'] : style['down-ani']}`}
        >
        <CoverView className={style.info}>
            <CoverView>直播</CoverView>
        </CoverView>
        <CoverView className={style['full-screen']} onClick={handleFullScreen}>
            <CoverImage
            className={style.icon}
            src={fullScreenFlag ? tuichuquanping : quanping}
            ></CoverImage>
            <CoverView>{fullScreenFlag ? '小屏播放' : '全屏播放'}</CoverView>
        </CoverView>
        </CoverView>
    </CoverView>
    </CoverView>