# @fishjam-cloud/ts-client 中文文档

规范地址：https://npmcn.com/package/%40fishjam-cloud/ts-client/

版本：0\.31\.1
npm 元数据更新时间：2026-10-22T14:57:02.350Z
中文译文更新时间：2026-11-14T20:26:19.245Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40fishjam-cloud/ts-client
原文对照：https://npmcn.com/package/%40fishjam-cloud/ts-client/?lang=original
项目主页：https://github.com/fishjam-cloud/web-client-sdk#readme
源码仓库：https://github.com/fishjam-cloud/web-client-sdk

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

- 包体积（解压后）：438 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2024-08-02T08:45:26.323Z
- 最新版本发布：2026-10-22T14:57:01.975Z
- 近 30 天下载量：18686（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：58（近 12 个月 31 个）

## 中文简介

Fishjam 的打字客户端库

## 安装

```sh
npm install @fishjam-cloud/ts-client
```

也可以使用：`pnpm add @fishjam-cloud/ts-client`、`yarn add @fishjam-cloud/ts-client`、`bun add @fishjam-cloud/ts-client`

## README

[![NPM Version](https://img.shields.io/npm/v/@fishjam-cloud/ts-client)](https://www.npmjs.com/package/@fishjam-cloud/ts-client) [![TypeScript Strict](https://badgen.net/badge/TS/Strict)](https://www.typescriptlang.org/) [![TypeDoc](https://img.shields.io/badge/TypeDoc-8A2BE2)](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_ts_client.html)

# Fishjam TS 客户端

类型脚本客户端库 [鱼潭](https://fishjam.io/)。 。 。 .

> \[尖叫声\]  
> 这个SDK还不稳定 我们建议使用 [反应客户端](https://github.com/fishjam-cloud/web-client-sdk/tree/main/packages/react-client) 服务费.

## 文档

备有文件 [这里](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_ts_client.html) 或者说 您可以在本地生成 :

```bash
yarn run docs
```

## 安装

您可以使用 `npm`数字 :

```bash
npm install @fishjam-cloud/ts-client
```

或者说 `yarn`数字 :

```bash
yarn @fishjam-cloud/ts-client
```

## 使用量

先决条件:

-   账户 [鱼潭](https://https//fishjam.io) 已配置 App .
-   在那间屋子里创建了房间和同伴的标志 您可以使用 Room Management 来创建房间和对等标志 .

以下代码片断基于 [最小](https://github.com/fishjam-cloud/web-client-sdk/tree/main/examples/ts-client/minimal/) 实例.

```ts
import { FishjamClient, WebRTCEndpoint } from '@fishjam-cloud/ts-client';

const SCREEN_SHARING_MEDIA_CONSTRAINTS = {
  video: {
    frameRate: { ideal: 20, max: 25 },
    width: { max: 1920, ideal: 1920 },
    height: { max: 1080, ideal: 1080 },
  },
};

// Example metadata types for peer and track
// You can define your own metadata types, just make sure they are serializable
type PeerMetadata = {
  name: string;
};

type TrackMetadata = {
  type: 'camera' | 'screen';
};

// Create a new FishjamClient object to interact with Fishjam
const client = new FishjamClient<PeerMetadata, TrackMetadata>();

const peerToken = prompt('Enter peer token') ?? 'YOUR_PEER_TOKEN';

const FISHJAM_URL = 'ws://localhost:5002';

// Start the peer connection
client.connect({
  peerMetadata: { name: 'peer' },
  token: peerToken,
  url: FISHJAM_URL,
});

// You can listen to events emitted by the client
client.on('joined', (peerId, peersInRoom) => {
  // Check if webrtc is initialized
  if (!client.webrtc) return console.error('webrtc is not initialized');

  // To start broadcasting your media, you will need a source of MediaStream like a camera, microphone, or screen
  // In this example, we will use screen sharing
  startScreenSharing(client.webrtc);
});

// To receive media from other peers, you need to listen to the onTrackReady event
client.on('trackReady', (ctx) => {
  const peerId = ctx.peer.id;

  document.getElementById(peerId)?.remove(); // remove previous video element if it exists

  // Create a new video element to display the media
  const videoPlayer = document.createElement('video');
  videoPlayer.id = peerId;
  videoPlayer.oncanplaythrough = function () {
    // Chrome blocks autoplay of unmuted video
    videoPlayer.muted = true;
    videoPlayer.play();
  };
  document.body.appendChild(videoPlayer);

  videoPlayer.srcObject = ctx.stream; // assign MediaStream to video element
});

// Cleanup video element when track is removed
client.on('trackRemoved', (ctx) => {
  const peerId = ctx.peer.id;
  document.getElementById(peerId)?.remove(); // remove video element
});

async function startScreenSharing(webrtc: WebRTCEndpoint) {
  // Get screen sharing MediaStream
  const screenStream = await navigator.mediaDevices.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS);

  // Add local MediaStream to webrtc
  screenStream.getTracks().forEach((track) => webrtc.addTrack(track, { type: 'screen' }));
}
```

## 实例

更多例子,见 [实例](https://github.com/fishjam-cloud/web-client-sdk/tree/main/examples/ts-client/) 文件夹.

## 许可证

凭 [Apache 许可证,2.0版本](https://npmcn.com/package/%40fishjam-cloud/ts-client/LICENSE.txt)

## Fishjam由软件人大厦创建

2012年以来 [软件大楼](https://swmansion.com/) 是一个在网络和移动方面有经验的软件机构 应用程序。 我们是核心反动土著贡献者和处理各种反动土著问题的专家。 我们可以帮忙 你造下一个梦想产品 [雇我们](https://swmansion.com/contact/projects?utm_source=fishjam&utm_medium=web-readme)。 。 。 .

[![Software Mansion](https://logo.swmansion.com/logo?color=white&variant=desktop&width=200&tag=react-client)](https://swmansion.com/contact/projects?utm_source=fishjam&utm_medium=web-readme)

## 常见问题

### @fishjam-cloud/ts-client 是什么？

Fishjam 的打字客户端库

### 如何安装 @fishjam-cloud/ts-client？

在项目目录运行 npm install @fishjam-cloud/ts-client，或使用 pnpm add / yarn add / bun add。

### @fishjam-cloud/ts-client 支持 TypeScript 吗？

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

### @fishjam-cloud/ts-client 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fishjam-cloud/ts-client 可以商用吗？

@fishjam-cloud/ts-client 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @fishjam-cloud/ts-client 的下载量有多少？

根据 npm 官方下载统计，@fishjam-cloud/ts-client 在 2026/10/15 – 2026/11/13 这 30 天内被下载 18,686 次，日均约 623 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fishjam-cloud/ts-client 还在维护吗？

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