100ms 网络 SDK

这是核心sdk 帮助你通过100ms的活性互动。 它将它取出 数据管理的复杂性和提供 基于通量的反应性数据存储,数据只流向一个方向.

管理房间状况的复杂性不是一件微不足道的任务 并且能够迅速失控 例如,多个UI组件可能对一个 简单的数据点, 如用户是否已变音 。 哑巴行动 本身可以从UI的多处取出,甚至可以被远程取出 与会者。 地方州和不当处理行动或失踪角落案件, 状态重复等极有可能使数据相互不一致 与真相的源头脱节.

检查 SDK 心理模型 建立一个精神模型 所有的东西如何运作 和所有的SDK摘要离开.

有两件重要的东西, 存储你想要显示的东西 和动作什么 你想这样做 -

1. 存储 - 读取数据的核心存储界面通常使用选择器. 店铺 充当与房间有关的任何数据的单一真相来源。 有两个人被曝光 函数 -
   • 获取状态( 选择器) - > 获取当前 UI 状态, 函数调用时为真
   • 订阅( 召回, 选择器) - > 订阅由您选择的状态的一部分 在选择器中通过,当部分改变时,会通知通过回调.
2. 动作 - 调度行动的行动界面,然后可以到达 退出服务器并更新商店。 以详细文件检查接口 这里。 。 。 .

我们还为大多数常用案例提供优化和高效的选择器。 这些是 备查 此文件夹。 。 。 .

重要说明:从加入国或加入国收到的数据不可更改 接收对象被冻结,不允许其变异。 你会出错的 如果你想以任何方式改变这些数据。 商店的不可用性就是我们如何确保 以始终如一的方式反映事实.

安装

yarn add @100mslive/hms-video-store

如何使用

const hms = new HMSReactiveStore();
const hmsActions = hms.getHMSActions();
const hmsStore = hms.getStore();

const toggleAudio = () => {
    const isEnabled = hmsStore.getState(selectIsLocalAudioEnabled);
    hmsActions.setLocalAudioEnabled(!isEnabled);
}

const onSpeakerUpdate = (speaker, prevSpeaker) => {
    console.log("speaker changed from - ", prevSpeaker, ", to - ", speaker);
}

hmsStore.subscribe(onSpeakerUpdate, selectDominantSpeaker);

框架特定包装

大多数受欢迎的Javascript框架具有反应性质,并有一些 一种可以进一步简化发展的相关概念.

反应

我们提供两个钩子,一个用来为商店阅读,另一个用来采取行动. 我们提供HMS Room Provider组件,负责初始化和 将这些钩子提供给您的 UI 组件 .

function join() {
    const isConnected = useHMSStore(selectIsConnectedToRoom);
    const hmsActions = useHMSActions();

    return <>
        {
            !isConnected &&
            <Button onClick={() => hmsActions.join()}>Join</Button>
        }
    </>
}

检查更多在 反应- sdk 编辑 文档。 。 。 .

框外支持 Redux 开发工具扩展

存储状态

存储图

参见 文档 更详细的指南