本页目录
问题背景修复方案轻量播放器组件融合播放器组件

IOS 系统弹窗权限重拉流

问题背景

在对讲、录制等场景中，首次申请相关权限时，iOS 系统会弹出权限授权弹窗。
此时页面会触发 onHide 事件，播放器组件会误以为页面进入后台，从而 中断拉流。
当用户选择允许或拒绝后，系统关闭弹窗并触发 onShow，播放器才会恢复拉流。

由于中间经历断流，容易导致对讲或录制功能异常，因此需要额外处理。

修复方案

轻量播放器组件

在触发 iOS 权限弹窗前，将该属性设置为 true，可避免因 onHide 事件导致播放器停止拉流。
同时新增事件 onChangeIgnoreHideStopPreview，用于监听内部状态变化并及时恢复原始取值。

💡 注意 轻量播放器组件 @ray-js/ray-ipc-player 版本需升级到最新版本

示例代码如下

import IpcPlayer from '@ray-js/ray-ipc-player';
import { useState } from 'react';

const [ignoreHideStopPreview, setIgnoreHideStopPreview] = useState(false);

const deviceId = '1234567890xxxxxx';
// 设备在线状态
const onlineStatus = true;

// 监听属性变化，将 ignoreHideStopPreview 值进行更新还原
const onChangeIgnoreHideStopPreview = (value) => {
    setIgnoreHideStopPreview(value);
};

const onCtx = (ctx) => {
console.log(ctx, 'ctx');
};

const authorizeTest = () => {
    // 最开始设置 ignoreHideStopPreview 为 true
    setIgnoreHideStopPreview(true)
    // 调用获取权限或申请权限接口，业务自行实现，可参考前一篇对讲录制权限文档
    ty.authorize({
        scope: 'xxx',
        success: () => {
        },
        fail: () => {
        }
    })
}


 <IpcPlayer
    objectFit={'contain'}
    onCtx={onCtx}
    devId={deviceId}
    onChangeStreamStatus={onChangeStreamStatus}
    ignoreHideStopPreview
    onChangeIgnoreHideStopPreview={onChangeIgnoreHideStopPreview}
/>

融合播放器组件

处理方案与轻量播放器组件基本一致。

💡 注意 融合播放器组件 @ray-js/ipc-player-integration 版本需升级到最新版本

示例代码如下

import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';


const deviceId = '1234567890xxxxxx';

const instance = useCtx({
    devId: deviceId,
});

const [ignoreHideStopPreview, setIgnoreHideStopPreview] = useState(false);

// 监听属性变化，将 ignoreHideStopPreview 值进行更新还原
const onChangeIgnoreHideStopPreview = (value) => {
    setIgnoreHideStopPreview(value);
};

const authorizeTest = () => {
    // 最开始设置 ignoreHideStopPreview 为 true
    setIgnoreHideStopPreview(true)
    // 调用获取权限或申请权限接口，业务自行实现，可参考前一篇对讲录制权限处理方案文档
    ty.authorize({
        scope: 'xxx',
        success: () => {
        },
        fail: () => {
        }
    })
}


 <IPCPlayerIntegration
    instance={instance}
    devId={deviceId}
    style={{
    width: '100%',
    height: '300px'
    }}
    ignoreHideStopPreview
    onChangeIgnoreHideStopPreview={onChangeIgnoreHideStopPreview}
/>