# webrtc-streaming

> webrtc-streaming launcher for tianyi

Latest version **6.0.35** (published 2025-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install webrtc-streaming
pnpm add webrtc-streaming
yarn add webrtc-streaming
bun add webrtc-streaming
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.35 |
| Published | 2025-03-17 |
| First published | 2022-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jim |
| Maintainers | jim1874 |
| Keywords | WebRTC, 3DCAT |

## Links

- npm: https://www.npmjs.com/package/webrtc-streaming
- npm.io page: https://npm.io/package/webrtc-streaming

## Dependencies (1)

- [live-cat-library](https://npm.io/package/live-cat-library.md) ^0.5.3

## Recent versions

- 6.0.35 (latest) — 2025-03-17
- 6.0.34 — 2024-01-05
- 6.0.33 — 2023-11-30
- 6.0.32 — 2023-10-16
- 6.0.31 — 2023-09-18
- 6.0.3-0.5 — 2023-09-14
- 6.0.3-0.4 — 2023-08-31
- 6.0.3-0.3 — 2023-08-23
- 6.0.3-0.2 — 2023-08-16
- 6.0.3-0.1 — 2023-08-08
- 6.0.30 — 2023-08-03
- 6.0.29 — 2023-07-13
- 5.9.0 — 2023-06-12
- 5.8.2 — 2023-06-10
- 5.8.1 — 2023-06-10
- … 33 more at https://npm.io/package/webrtc-streaming/versions

## README

# webrtc-streaming Launcher

[webrtc-streaming](https://www.npmjs.com/package/webrtc-streaming) launcher

### Quick start

```javascript
import { Launcher } from "webrtc-streaming";

const address = "xxxxxx";
const replaceWs = "xxxxxx";
const appKey = "xxxxxxx";
let appSecret;
let launcher;

async function bootstrap() {
  const data = await handleShareInfo();
  const { temporaryCredentials } = data;
  const baseOptionsType = {
    address,
    replaceWs,
    appKey,
    appSecret,
    startType: 1,
    temporaryCredentials
  };

  const container = document.querySelector("body");
  document.querySelector("body").style.width = "100%";
  document.querySelector("body").style.height = "100%";

  const uiOptions = {
    onPlay: () => {
      console.log('出现了有效画面')
      //web端->应用
      launcher.launcherBase.connection.emitUIInteraction('发给应用的数据').then(res => {
        console.log(res ? '发送成功' : '发送失败')
      })
    },
    onChange: (cb) => {
      const { phase,fakePercent } = cb;
      console.log('百分比：',fakePercent)
      if (phase === "signaling-connected") {
        //应用->web端
        launcher.launcherBase.connection.interaction.on((res)=>{
          console.log('收到应用的数据：',res)
        })
      }
    };
  };
  launcher = new Launcher(baseOptionsType, container, uiOptions);
}
async function handleShareInfo() {
  const params = {
    appKey,
    appSecret,
  };
  var url = new URL(`${address}/api/front/share/info`);
  Object.keys(params).forEach(
    (key) => params[key] && url.searchParams.append(key, params[key])
  );
  return fetch(url)
    .then((response) => response.json())
    .then((res) => {
    if (res.result) {
      return res.data;
    }
  });
}
window.addEventListener('DOMContentLoaded', () => {
  if (
    navigator.userAgent.includes('miniProgram') ||
    navigator.userAgent.includes('MicroMessenger')
  ) {
    new Promise((resolve, reject) => {
      document.addEventListener('WeixinJSBridgeReady', resolve)
    }).then(bootstrap)
  } else {
    bootstrap()
  }
})
```

### Play callback

```javascript
// call when video element start to play
extendOptions: {
  onPlay: () => {
    //do something
  },
}
```

### Adjust bandwidth

```javascript
launcher.changeBandwidthByRenegotiation(
  10000, // medians bitrate kbps
)
```

### Statistics

```javascript
launcher.toggleStatistics()
window.setInterval(() => {
  const { fps, bitrate, packetLossRate, latency, averageJitterBufferDelay } = launcher.report()
  console.log(`
    FPS: ${fps}
    biterate: ${bitrate}kbps
    latency: ${latency}ms
    averageJitterBufferDelay: ${averageJitterBufferDelay}ms
    packetLossRate: ${(packetLossRate * 100).toFixed(3)}%
  `)
}, 1000)
```

### ToggleFullscreen

```javascript
/* NOTE: fullscreen need user activation gesture
 * @see https://html.spec.whatwg.org/multipage/interaction.html#user-activation-processing-model
 */
someTriggerElement.addEventListener('click', () => launcher.toggleFullscreen())
```

### Destory

```javascript
launcher.destory([errMsg])
```

---
_Source: https://npm.io/package/webrtc-streaming · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._