Web SDK 接入

CWebFlutterReact NativeAndroidiOS / macOSHarmonyOSPython

下载更新记录API 说明示例源码

在网页中引用 TiRTC Web SDK，准备播放容器，并完成播放前初始化。

完成本页后，继续连接设备。连接成功后，再实现音视频、语音对讲或命令消息。

接入要求

• 现代浏览器。
• 网页需要通过 HTTP(S) 访问。
• tirtc.es.min.js 和 librender.wasm 需要部署到同一个目录。

引用 SDK

网页只需要引入 tirtc.es.min.js，SDK 会自动加载同目录下的 librender.wasm。

<script type="module">
  import {
    TiRtc,
    TiRtcInitOptions,
    TiRtcConn,
    TiRtcAudioOutput,
    TiRtcVideoOutput,
  } from './tirtc.es.min.js';
</script>

准备渲染节点

Web SDK 使用固定 id="canvas" 的 canvas 节点承载视频渲染。

<canvas id="canvas"></canvas>

初始化 SDK

调用 TiRtc.initialize(...) 初始化 SDK。创建视频播放链路前，先等待渲染依赖准备完成。

<script type="module">
  import { TiRtc, TiRtcInitOptions } from './tirtc.es.min.js';

  TiRtc.initialize(TiRtcInitOptions({ appId: 'your-app-id' }));

  await TiRtc.videoOutputReady();
</script>

下一步

完成 Web SDK 接入后，继续参考连接设备和播放音视频。