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>