# @100mslive/hms-video-store 中文文档

规范地址：https://npmcn.com/package/%40100mslive/hms-video-store/

版本：0\.15\.3
npm 元数据更新时间：2026-09-30T17:35:36.686Z
中文译文更新时间：2026-11-05T17:37:11.534Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40100mslive/hms-video-store
原文对照：https://npmcn.com/package/%40100mslive/hms-video-store/?lang=original
项目主页：https://github.com/100mslive/web-sdks#readme
源码仓库：https://github.com/100mslive/web-sdks

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.2 MB，278 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=12
- 运行依赖：9 个
- 首次发布：2021-05-30T07:55:42.703Z
- 最新版本发布：2026-09-30T17:35:36.343Z
- 近 30 天下载量：212722（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：873（近 12 个月 81 个）

## 中文简介

@ 100mslive Core SDK ,它总结了WebRTC的复杂性,同时为数据管理提供了具有单向数据流的反应存储器

## 安装

```sh
npm install @100mslive/hms-video-store
```

也可以使用：`pnpm add @100mslive/hms-video-store`、`yarn add @100mslive/hms-video-store`、`bun add @100mslive/hms-video-store`

## README

# 100ms 网络 SDK

[![NPM](https://badgen.net/npm/v/@100mslive/hms-video-store?color=green)](https://www.npmjs.com/package/@100mslive/hms-video-store) [![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml) [![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/hms-video-store)](https://bundlephobia.com/result?p=@100mslive/hms-video-store) [![License](https://img.shields.io/npm/l/@100mslive/hms-video-store)](https://www.100ms.live/) ![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/hms-video-store)

![Architecture](https://npmcn.com/package/%40100mslive/hms-video-store/images/architecture.png)

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

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

检查 [SDK 心理模型](https://www.100ms.live/docs/javascript/v2/quickstart/mental-model) 建立一个精神模型 所有的东西如何运作 和所有的SDK摘要离开.

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

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

我们还为大多数常用案例提供优化和高效的选择器。 这些是 备查 [此文件夹](https://npmcn.com/package/%40100mslive/hms-video-store/src/selectors)。 。 。 .

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

### 安装

```
yarn add @100mslive/hms-video-store
```

### 如何使用

```js
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 组件 .

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

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

检查更多在 [反应- sdk](https://github.com/100mslive/web-sdks/tree/main/packages/react-sdk) 编辑 [文档](https://www.100ms.live/docs/javascript/v2/quickstart/react-quickstart)。 。 。 .

## 框外支持 [Redux 开发工具扩展](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)

### 存储状态

![Store State](https://npmcn.com/package/%40100mslive/hms-video-store/images/store-state.png)

### 存储图

![Store State](https://npmcn.com/package/%40100mslive/hms-video-store/images/store-graph.png)

参见 [文档](https://www.100ms.live/docs/javascript/v2/quickstart/javascript-quickstart) 更详细的指南

## 常见问题

### @100mslive/hms-video-store 是什么？

@ 100mslive Core SDK ,它总结了WebRTC的复杂性,同时为数据管理提供了具有单向数据流的反应存储器

### 如何安装 @100mslive/hms-video-store？

在项目目录运行 npm install @100mslive/hms-video-store，或使用 pnpm add / yarn add / bun add。

### @100mslive/hms-video-store 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @100mslive/hms-video-store 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @100mslive/hms-video-store 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @100mslive/hms-video-store 可以商用吗？

@100mslive/hms-video-store 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @100mslive/hms-video-store 的下载量有多少？

根据 npm 官方下载统计，@100mslive/hms-video-store 在 2026/10/04 – 2026/11/02 这 30 天内被下载 212,722 次，日均约 7,091 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @100mslive/hms-video-store 还在维护吗？

最新版本 0\.15\.3 发布于 2026/10/01（1 个月前）；至今共发布 873 个版本，其中过去 12 个月发布了 81 个；首次发布于 2021/05/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。