@realsee/live 0.7.4 → 0.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +245 -91
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +44 -44
- package/docs/assets/highlight.css +6 -6
- package/docs/classes/BrowserRTC.html +2 -2
- package/docs/classes/BrowserRTC4Chime.html +2 -2
- package/docs/classes/CoreRTC.html +1 -1
- package/docs/classes/Live.html +14 -14
- package/docs/classes/Subscribe.html +1 -1
- package/docs/classes/VRWebViewRTC.html +1 -1
- package/docs/functions/GetVoiceSignFn.html +1 -1
- package/docs/functions/createLive.html +1 -1
- package/docs/functions/createLiveReact.html +10 -10
- package/docs/index.html +116 -110
- package/docs/interfaces/LiveOptions.html +1 -1
- package/docs/interfaces/VRWebViewRTCOptions.html +1 -1
- package/package.json +1 -1
package/docs/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>如视 Live SDK</title><meta name="description" content="Documentation for 如视 Live SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><link rel="stylesheet" href="assets/custom.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">如视 Live SDK</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>如视 Live SDK</h1></div><div class="tsd-panel tsd-typography"><a id="md:livejs" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Live.js<a href="#md:livejs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p><a href="https://www.npmjs.com/package/@realsee/live" target="_blank" class="external"><img src="https://img.shields.io/npm/v/@realsee/live.svg?style=flat-square&logo=npm&label=npm%20install%20@realsee/live" alt="npm version"></a></p>
|
|
2
|
-
<a id="md:功能说明" class="tsd-anchor"></a><h2 class="tsd-anchor-link">功能说明<a href="#md:功能说明" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Live</strong> 是 <a href="https://
|
|
2
|
+
<a id="md:功能说明" class="tsd-anchor"></a><h2 class="tsd-anchor-link">功能说明<a href="#md:功能说明" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Live</strong> 是 <a href="https://open-platform.realsee.com/developer/docs/live/intro/" target="_blank" class="external">如视开放平台线上带看</a> 的核心客户端 Web SDK,搭配 Live Container
|
|
3
3
|
SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏、实时语音、IM 等功能。</p>
|
|
4
4
|
<a id="md:名词释义" class="tsd-anchor"></a><h3 class="tsd-anchor-link">名词释义<a href="#md:名词释义" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
5
5
|
<li><strong>帧数据(Keyframe)</strong>: 指用户界面需同屏交互信息的状态数据的集合。</li>
|
|
@@ -25,16 +25,19 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
25
25
|
</code><button type="button">Copy</button></pre>
|
|
26
26
|
|
|
27
27
|
<a id="md:如何使用" class="tsd-anchor"></a><h3 class="tsd-anchor-link">如何使用<a href="#md:如何使用" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>简单使用样例(先不考虑实时语音能力):</p>
|
|
28
|
-
<pre><code class="
|
|
28
|
+
<pre><code class="typescript"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">createLive</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/live'</span><br/><br/><span class="hl-0">// 定义帧数据类型(可选,但推荐使用 TypeScript)</span><br/><span class="hl-6">interface</span><span class="hl-2"> </span><span class="hl-7">MyKeyframes</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-5">camera</span><span class="hl-2">: { </span><span class="hl-5">position</span><span class="hl-2">: [</span><span class="hl-7">number</span><span class="hl-2">, </span><span class="hl-7">number</span><span class="hl-2">, </span><span class="hl-7">number</span><span class="hl-2">] }</span><br/><span class="hl-2"> </span><span class="hl-5">annotation</span><span class="hl-2">: { </span><span class="hl-5">text</span><span class="hl-2">: </span><span class="hl-7">string</span><span class="hl-2">; </span><span class="hl-5">position</span><span class="hl-2">: [</span><span class="hl-7">number</span><span class="hl-2">, </span><span class="hl-7">number</span><span class="hl-2">] }</span><br/><span class="hl-2">}</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">live</span><span class="hl-2"> = </span><span class="hl-1">createLive</span><span class="hl-2"><</span><span class="hl-7">MyKeyframes</span><span class="hl-2">>({</span><br/><span class="hl-2"> </span><span class="hl-5">url:</span><span class="hl-2"> </span><span class="hl-3">'wss://ws-access.realsee.com/***/?=xxx'</span><span class="hl-2"> </span><span class="hl-0">/* 连接 WebSocket 服务的 URL */</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">/* 获取带看"门票"的回调函数 */</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">().</span><span class="hl-5">ticket</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span><br/><br/><span class="hl-0">// 连接带看</span><br/><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">connect</span><span class="hl-2">()</span>
|
|
29
29
|
</code><button type="button">Copy</button></pre>
|
|
30
30
|
|
|
31
31
|
<p>在创建 <code>live</code> 实例时配置了两个参数:</p>
|
|
32
32
|
<ul>
|
|
33
|
-
<li><code>url</code>:连接 WebSocket 服务的 URL
|
|
34
|
-
<li><code>getTicket()</code
|
|
33
|
+
<li><code>url</code>:连接 WebSocket 服务的 URL(可选),如果在创建 <code>live</code> 实例阶段并不知道 URL,您可以在合适的时机通过 <code>live.connect({ url })</code> 方法进行 WebSocket 连接。</li>
|
|
34
|
+
<li><code>getTicket()</code>:是一个异步回调函数(可选),其返回值是连接 WebSocket 服务的 <strong>"门票"</strong>,关于如何获取 <code>ticket</code> 请查阅 <a href="https://open-platform.realsee.com/developer/docs/live/intro/" target="_blank" class="external">如视开放平台带看文档</a>。也可以在 <code>connect</code> 时提供。</li>
|
|
35
35
|
</ul>
|
|
36
36
|
<blockquote>
|
|
37
|
-
<p
|
|
37
|
+
<p><strong>提示</strong>:如果在创建实例时同时提供了 <code>url</code> 和 <code>getTicket</code>,Live 会自动尝试连接,无需手动调用 <code>connect()</code> 方法。</p>
|
|
38
|
+
</blockquote>
|
|
39
|
+
<blockquote>
|
|
40
|
+
<p>关于 <code>createLive()</code> 函数的更多参数配置请参考 <a href="https://unpkg.com/@realsee/live/docs/interfaces/live.LiveOptions.html" target="_blank" class="external">LiveOptions</a> 文档。</p>
|
|
38
41
|
</blockquote>
|
|
39
42
|
<p>获取实例 <code>live</code> 之后,可以做很多有趣的事情。但在讲述详细用途之前,先简单介绍下 <strong>Live</strong> 中的 <strong>消息系统</strong>。</p>
|
|
40
43
|
<a id="md:消息系统" class="tsd-anchor"></a><h2 class="tsd-anchor-link">消息系统<a href="#md:消息系统" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Live</strong> 核心职责是借助 WebSocket 长链双工通信能力实现多端用户的同屏连线。用户间的通信都是基于 WebSocket 消息。</p>
|
|
@@ -45,41 +48,31 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
45
48
|
<p><strong>房间信息</strong> 为内置消息体,由 WebSocket 服务主动推送,包括房间状态、当前用户及参与用户列表等。部分信息也可通过 <strong>Live</strong> 提供的更新方式进行修改。</p>
|
|
46
49
|
<a id="md:帧数据同步" class="tsd-anchor"></a><h3 class="tsd-anchor-link">帧数据同步<a href="#md:帧数据同步" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>当前 UI 交互状态的同步:</p>
|
|
47
50
|
<p>以 <a href="https://developers.realsee.com/docs/#/docs/five/web/quickstart" target="_blank" class="external">Five</a> 同屏为例</p>
|
|
48
|
-
<pre><code class="
|
|
51
|
+
<pre><code class="typescript"><span class="hl-0">// 发送本地 帧数据 (Five State)</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">sendKeyframe</span><span class="hl-2">(</span><span class="hl-3">'five'</span><span class="hl-2">, { </span><span class="hl-5">panoIndex:</span><span class="hl-2"> </span><span class="hl-9">13</span><span class="hl-2"> })</span><br/><br/><span class="hl-0">// 接收远程 帧数据 (Five State)</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">keyframes</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'five'</span><span class="hl-2">, (</span><span class="hl-5">newState</span><span class="hl-2">, </span><span class="hl-5">prevState</span><span class="hl-2">, </span><span class="hl-5">frontRequestId</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">// 可以拿最新的 `newState` 更新本地 UI 状态</span><br/><span class="hl-2">})</span>
|
|
49
52
|
</code><button type="button">Copy</button></pre>
|
|
50
53
|
|
|
51
54
|
<p>您也可以通过 <code>live.snapshot</code> 属性来获取当前所有序列帧数据的"快照"。</p>
|
|
52
55
|
<a id="md:房间信息" class="tsd-anchor"></a><h3 class="tsd-anchor-link">房间信息<a href="#md:房间信息" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Live</strong> 有会话房间的概念,当您成功连接 WebSocket 服务之后等同于您作为一个用户加入了一个房间。此房间用户除了您之外还会有其他用户,您可以通过如下方式获取或更新用户信息:</p>
|
|
53
|
-
<pre><code class="
|
|
56
|
+
<pre><code class="typescript"><span class="hl-0">// 属性:获取本地用户信息</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">selfInfo</span><br/><br/><span class="hl-0">// 属性:获取当前房间内所有用户列表</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">userList</span><br/><br/><span class="hl-0">// 属性:获取房间信息</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">roomInfo</span><br/><br/><span class="hl-0">// 方法:更新本地用户信息</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">setSelfInfo</span><span class="hl-2">({})</span><br/><br/><span class="hl-0">// 事件:本地用户信息发生变更</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'selfInfoUpdate'</span><span class="hl-2">, (</span><span class="hl-5">userInfo</span><span class="hl-2">, </span><span class="hl-5">frontRequestId</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {})</span><br/><br/><span class="hl-0">// 事件:房间用户列表信息发生变更</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'userListUpdate'</span><span class="hl-2">, (</span><span class="hl-5">userList</span><span class="hl-2">, </span><span class="hl-5">frontRequestId</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {})</span>
|
|
54
57
|
</code><button type="button">Copy</button></pre>
|
|
55
58
|
|
|
56
59
|
<a id="md:广播消息" class="tsd-anchor"></a><h3 class="tsd-anchor-link">广播消息<a href="#md:广播消息" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>除了帧数据和房间信息之外,还可以用事件的形式向房间内的其他用户广播消息:</p>
|
|
57
|
-
<pre><code class="
|
|
60
|
+
<pre><code class="typescript"><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">broadcast</span><span class="hl-2">(</span><br/><span class="hl-2"> </span><span class="hl-5">data</span><span class="hl-2"> </span><span class="hl-0">/* 广播的数据 */</span><span class="hl-2">, </span><br/><span class="hl-2"> [</span><span class="hl-3">'user_id_1'</span><span class="hl-2">, </span><span class="hl-3">'user_id_2'</span><span class="hl-2">] </span><span class="hl-0">/* 收到此消息的用户ID列表 */</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-9">0</span><span class="hl-2"> </span><span class="hl-0">/* 超时时间(毫秒),0 表示不超时 */</span><br/><span class="hl-2">)</span>
|
|
58
61
|
</code><button type="button">Copy</button></pre>
|
|
59
62
|
|
|
60
63
|
<p>此时,房间内用户 Id 为 <code>user_id_1</code>、<code>user_id_2</code> 的用户会收到此广播消息(其他用户无感知):</p>
|
|
61
|
-
<pre><code class="
|
|
64
|
+
<pre><code class="typescript"><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'broadcast'</span><span class="hl-2">, (</span><span class="hl-5">data</span><span class="hl-2"> </span><span class="hl-0">/* 广播的数据 */</span><span class="hl-2">, </span><span class="hl-5">frontRequestId</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {})</span>
|
|
62
65
|
</code><button type="button">Copy</button></pre>
|
|
63
66
|
|
|
64
67
|
<p>更多的例子请查看 <a href="https://unpkg.com/@realsee/live/docs/index.html" target="_blank" class="external">Live API</a> 文档 。</p>
|
|
65
|
-
<a id="md:事件监听" class="tsd-anchor"></a><h2 class="tsd-anchor-link">事件监听<a href="#md:事件监听" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Live</strong> 提供 <code
|
|
66
|
-
<p
|
|
67
|
-
<p
|
|
68
|
-
<pre><code class="
|
|
68
|
+
<a id="md:事件监听" class="tsd-anchor"></a><h2 class="tsd-anchor-link">事件监听<a href="#md:事件监听" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Live</strong> 提供 <code>带看事件</code> 和 <code>RTC 事件</code> 两类异步事件的监听。</p>
|
|
69
|
+
<p>所有事件都可以通过 <code>live.on('/*事件名*/', /*事件回调*/)</code> 的方式监听。</p>
|
|
70
|
+
<p>比如监听连接状态变化:</p>
|
|
71
|
+
<pre><code class="typescript"><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'stateChange'</span><span class="hl-2">, (</span><span class="hl-5">state</span><span class="hl-2">, </span><span class="hl-5">prevState</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-5">console</span><span class="hl-2">.</span><span class="hl-1">log</span><span class="hl-2">(</span><span class="hl-3">`状态从 </span><span class="hl-6">${</span><span class="hl-5">prevState</span><span class="hl-6">}</span><span class="hl-3"> 变为 </span><span class="hl-6">${</span><span class="hl-5">state</span><span class="hl-6">}</span><span class="hl-3">`</span><span class="hl-2">)</span><br/><span class="hl-2">})</span>
|
|
69
72
|
</code><button type="button">Copy</button></pre>
|
|
70
73
|
|
|
71
|
-
<a id="md
|
|
72
|
-
<
|
|
73
|
-
<p><code>ws.beforeConnect(reConnect?: number): void</code> WebSocket 完成连接之后。</p>
|
|
74
|
-
</li>
|
|
75
|
-
<li>
|
|
76
|
-
<p><code>ws.afterConnect(reConnect?: number): void</code> WebSocket 完成连接之前。</p>
|
|
77
|
-
</li>
|
|
78
|
-
<li>
|
|
79
|
-
<p><code>ws.readyStateUpdate(readyState: WebSocketState): void</code> WebSocket 完成状态发生变更。</p>
|
|
80
|
-
</li>
|
|
81
|
-
</ul>
|
|
82
|
-
<p><strong>WebSocket 连接状态枚举表:</strong></p>
|
|
74
|
+
<a id="md:带看连接状态" class="tsd-anchor"></a><h3 class="tsd-anchor-link">带看连接状态<a href="#md:带看连接状态" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Live</strong> 前后端服务交互是基于 WebSocket 长链接的。一次带看成功进入、退出的标识由连接状态 <code>OPEN</code>、<code>CLOSED</code> 体现。因此,所有 <strong>VRTC</strong> 相关的事件处理逻辑应保证在 <code>OPEN</code> 状态之后进行。</p>
|
|
75
|
+
<p><strong>连接状态枚举表:</strong></p>
|
|
83
76
|
<table>
|
|
84
77
|
<thead>
|
|
85
78
|
<tr>
|
|
@@ -110,105 +103,101 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
110
103
|
</tr>
|
|
111
104
|
</tbody>
|
|
112
105
|
</table>
|
|
113
|
-
<
|
|
114
|
-
事件之后进行。</p>
|
|
115
|
-
<a id="md:live-事件" class="tsd-anchor"></a><h3 class="tsd-anchor-link">live 事件<a href="#md:live-事件" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
106
|
+
<a id="md:带看事件" class="tsd-anchor"></a><h3 class="tsd-anchor-link">带看事件<a href="#md:带看事件" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
116
107
|
<li>
|
|
117
|
-
<p><code>
|
|
108
|
+
<p><code>stateChange(state: LiveState, prevState?: LiveState): void</code> - 带看连接状态变化事件</p>
|
|
118
109
|
</li>
|
|
119
110
|
<li>
|
|
120
|
-
<p><code>builtinEvent(builtinMsg: BuiltinMsg): void</code>
|
|
111
|
+
<p><code>builtinEvent(builtinMsg: BuiltinMsg): void</code> - 接收服务端推送的内置事件消息(包括用户变化和房间变化)</p>
|
|
121
112
|
</li>
|
|
122
113
|
<li>
|
|
123
|
-
<p><code>
|
|
114
|
+
<p><code>userChange(builtinMsg: BuiltinMsg): void</code> - 用户信息改变事件(是 builtinEvent 的子集,event_type 为 UserChange)</p>
|
|
124
115
|
</li>
|
|
125
116
|
<li>
|
|
126
|
-
<p><code>
|
|
117
|
+
<p><code>roomChange(builtinMsg: BuiltinMsg): void</code> - 房间信息改变事件(是 builtinEvent 的子集,event_type 为 RoomChange)</p>
|
|
127
118
|
</li>
|
|
128
119
|
<li>
|
|
129
|
-
<p><code>
|
|
120
|
+
<p><code>broadcast(evtMsg: Record<string, any>, frontRequestId: string): void</code> - 接收其他用户的广播消息</p>
|
|
130
121
|
</li>
|
|
131
122
|
<li>
|
|
132
|
-
<p><code>
|
|
123
|
+
<p><code>keyframes(keyframes: Partial<Snapshot>, frontRequestId: string): void</code> - 接收其他用户的帧数据</p>
|
|
124
|
+
</li>
|
|
125
|
+
<li>
|
|
126
|
+
<p><code>readyKeyframeSync(lastKeyframe: Partial<Snapshot>): void</code> - 表明帧同步行为已就绪(<strong>已废弃</strong>,请使用 <code>keyframes</code> 事件)</p>
|
|
127
|
+
</li>
|
|
128
|
+
<li>
|
|
129
|
+
<p><code>selfInfoUpdate(userInfo: UserInfo, frontRequestId: string): void</code> - 自身的信息发生变更</p>
|
|
130
|
+
</li>
|
|
131
|
+
<li>
|
|
132
|
+
<p><code>userListUpdate(userList: UserInfo[], frontRequestId: string): void</code> - 用户列表信息发生变更</p>
|
|
133
|
+
</li>
|
|
134
|
+
<li>
|
|
135
|
+
<p><code>kickOut(): void</code> - 被踢出房间</p>
|
|
136
|
+
</li>
|
|
137
|
+
<li>
|
|
138
|
+
<p><code>error(liveMsg: LiveMsg): void</code> - 服务端推送出现异常</p>
|
|
133
139
|
</li>
|
|
134
140
|
</ul>
|
|
135
|
-
<p><code>live</code> 实例提供了很多诸如<code>live.connect()</code>、<code>live.broadcast()</code>、<code>live.sendKeyframe()</code>等方法,这些方法都是异步反馈且可能会影响房间内的其他用户。
|
|
141
|
+
<p><code>live</code> 实例提供了很多诸如<code>live.connect()</code>、<code>live.broadcast()</code>、<code>live.sendKeyframe()</code>、<code>live.exit()</code>、<code>live.close()</code>、<code>live.dispose()</code>等方法,这些方法都是异步反馈且可能会影响房间内的其他用户。
|
|
136
142
|
您可以通过监听以上事件来获知这些影响。</p>
|
|
137
|
-
<
|
|
138
|
-
<
|
|
143
|
+
<a id="md:主要方法说明" class="tsd-anchor"></a><h3 class="tsd-anchor-link">主要方法说明<a href="#md:主要方法说明" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
144
|
+
<li><code>connect(options?)</code> - 连接带看房间,建立 WebSocket 连接</li>
|
|
145
|
+
<li><code>exit()</code> - 退出带看房间(不发送房间关闭消息)</li>
|
|
146
|
+
<li><code>close()</code> - 关闭带看房间(会发送房间关闭消息,通知服务器)</li>
|
|
147
|
+
<li><code>dispose()</code> - 销毁带看实例,清理所有资源(事件监听、Yjs 文档等)</li>
|
|
148
|
+
<li><code>sendKeyframe(key, frame)</code> - 发送帧数据</li>
|
|
149
|
+
<li><code>getFramesByKey(key)</code> - 根据键获取对应的帧数据</li>
|
|
150
|
+
<li><code>broadcast(data, toUserIds, timeout?)</code> - 向指定用户广播消息</li>
|
|
151
|
+
<li><code>setSelfInfo(userInfo)</code> - 更新本地用户信息</li>
|
|
152
|
+
<li><code>toggleMicro(status)</code> - 切换麦克风状态</li>
|
|
153
|
+
<li><code>kick(toUserIds)</code> - 踢出指定用户</li>
|
|
154
|
+
<li><code>forbidMicro(status, toUserIds?)</code> - 禁止/允许指定用户的麦克风</li>
|
|
155
|
+
<li><code>forbidSync(sync, toUserIds?)</code> - 禁止/允许指定用户的帧数据同步</li>
|
|
156
|
+
<li><code>updateStatus(evtType, atnType, status, toUserIds?)</code> - 更新带看状态(用户或房间状态)</li>
|
|
157
|
+
</ul>
|
|
158
|
+
<a id="md:主要属性说明" class="tsd-anchor"></a><h3 class="tsd-anchor-link">主要属性说明<a href="#md:主要属性说明" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
159
|
+
<li><code>state</code> - 当前带看连接状态(LiveState)</li>
|
|
160
|
+
<li><code>readyState</code> - WebSocket 就绪状态</li>
|
|
161
|
+
<li><code>url</code> - WebSocket 连接 URL</li>
|
|
162
|
+
<li><code>options</code> - 配置选项(只读)</li>
|
|
163
|
+
<li><code>snapshot</code> - 当前所有帧数据的快照</li>
|
|
164
|
+
<li><code>selfInfo</code> - 本地用户信息</li>
|
|
165
|
+
<li><code>userList</code> - 房间内所有用户列表</li>
|
|
166
|
+
<li><code>roomInfo</code> - 房间信息</li>
|
|
167
|
+
<li><code>$RTC</code> - RTC 实例(用于语音通信)</li>
|
|
168
|
+
<li><code>jsBridge</code> - JSBridge 实例(用于 App/WebView 环境)</li>
|
|
169
|
+
<li><code>keyframes</code> - 帧数据监听器(Subscribe 实例)</li>
|
|
170
|
+
</ul>
|
|
171
|
+
<a id="md:rtc-事件" class="tsd-anchor"></a><h3 class="tsd-anchor-link">RTC 事件<a href="#md:rtc-事件" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>RTC 相关事件通过 <code>live.$RTC.on('/*事件名*/', /*事件回调*/)</code> 方式来监听。</p>
|
|
172
|
+
<ul>
|
|
139
173
|
<li>
|
|
140
|
-
<p><code>error(error: Error): void</code>
|
|
174
|
+
<p><code>error(error: Error): void</code> - 异常事件</p>
|
|
141
175
|
</li>
|
|
142
176
|
<li>
|
|
143
|
-
<p><code>initWillStart(): void</code>
|
|
177
|
+
<p><code>initWillStart(): void</code> - 即将初始化事件</p>
|
|
144
178
|
</li>
|
|
145
179
|
<li>
|
|
146
|
-
<p><code>inited(): void</code>
|
|
180
|
+
<p><code>inited(): void</code> - 初始化完成事件</p>
|
|
147
181
|
</li>
|
|
148
182
|
<li>
|
|
149
|
-
<p><code>joinWillStart(): void</code>
|
|
183
|
+
<p><code>joinWillStart(): void</code> - 即将加入语音房间事件</p>
|
|
150
184
|
</li>
|
|
151
185
|
<li>
|
|
152
|
-
<p><code>joined(): void</code>
|
|
186
|
+
<p><code>joined(info: RTCJoinedInfo): void</code> - 成功加入语音房间事件</p>
|
|
153
187
|
</li>
|
|
154
188
|
<li>
|
|
155
|
-
<p><code>userVolumes(userVolumes: UserVolume[]): void</code>
|
|
189
|
+
<p><code>userVolumes(userVolumes: UserVolume[]): void</code> - 房间内每个说话用户的音量</p>
|
|
156
190
|
</li>
|
|
157
191
|
<li>
|
|
158
|
-
<p><code>weakNetwork(): void</code>
|
|
192
|
+
<p><code>weakNetwork(): void</code> - 弱网提醒事件</p>
|
|
159
193
|
</li>
|
|
160
194
|
</ul>
|
|
161
|
-
<p
|
|
162
|
-
<pre><code class="
|
|
195
|
+
<p>比如监听语音房间内正在说话的用户及其音量:</p>
|
|
196
|
+
<pre><code class="typescript"><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">$RTC</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'userVolumes'</span><span class="hl-2">, (</span><span class="hl-5">userVolumes</span><span class="hl-2">: </span><span class="hl-7">UserVolume</span><span class="hl-2">[]) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-5">console</span><span class="hl-2">.</span><span class="hl-1">log</span><span class="hl-2">(</span><span class="hl-5">userVolumes</span><span class="hl-2">) </span><span class="hl-0">// userVolumes 正在说话的用户及其音量数据。</span><br/><span class="hl-2">})</span>
|
|
163
197
|
</code><button type="button">Copy</button></pre>
|
|
164
198
|
|
|
165
199
|
<a id="md:异常处理" class="tsd-anchor"></a><h3 class="tsd-anchor-link">异常处理<a href="#md:异常处理" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
|
|
166
|
-
<li><code>
|
|
167
|
-
</ul>
|
|
168
|
-
<p><strong>WebSocket 错误状态枚举表:</strong></p>
|
|
169
|
-
<table>
|
|
170
|
-
<thead>
|
|
171
|
-
<tr>
|
|
172
|
-
<th>错误字段</th>
|
|
173
|
-
<th>错误描述</th>
|
|
174
|
-
<th>触发场景</th>
|
|
175
|
-
</tr>
|
|
176
|
-
</thead>
|
|
177
|
-
<tbody>
|
|
178
|
-
<tr>
|
|
179
|
-
<td>Close</td>
|
|
180
|
-
<td>错误类型枚举参照<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent" target="_blank" class="external">CloseEvent</a></td>
|
|
181
|
-
<td>错误原因参照<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent" target="_blank" class="external">CloseEvent</a></td>
|
|
182
|
-
</tr>
|
|
183
|
-
<tr>
|
|
184
|
-
<td>Error</td>
|
|
185
|
-
<td></td>
|
|
186
|
-
<td></td>
|
|
187
|
-
</tr>
|
|
188
|
-
<tr>
|
|
189
|
-
<td>MicroAuth</td>
|
|
190
|
-
<td>麦克风授权错误</td>
|
|
191
|
-
<td>语音功能获取麦克风授权失败</td>
|
|
192
|
-
</tr>
|
|
193
|
-
<tr>
|
|
194
|
-
<td>DuplicateConnect</td>
|
|
195
|
-
<td>重复连接</td>
|
|
196
|
-
<td>使用相同的 WS 链接申请连接</td>
|
|
197
|
-
</tr>
|
|
198
|
-
<tr>
|
|
199
|
-
<td>IllegalURL</td>
|
|
200
|
-
<td>非法的 WS 链接</td>
|
|
201
|
-
<td>传入的 WS 链接不合法</td>
|
|
202
|
-
</tr>
|
|
203
|
-
<tr>
|
|
204
|
-
<td>Unknown</td>
|
|
205
|
-
<td>未知错误</td>
|
|
206
|
-
<td>其他未被枚举的错误原样返回</td>
|
|
207
|
-
</tr>
|
|
208
|
-
</tbody>
|
|
209
|
-
</table>
|
|
210
|
-
<ul>
|
|
211
|
-
<li><code>error(liveMsg: LiveMsg): void</code> 服务端推送出现异常。</li>
|
|
200
|
+
<li><code>error(liveMsg: LiveMsg): void</code> - 服务端推送出现异常。</li>
|
|
212
201
|
</ul>
|
|
213
202
|
<p>与 WebSocket 通信的结构体<code>LiveMsg</code>格式如下:</p>
|
|
214
203
|
<table>
|
|
@@ -223,12 +212,12 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
223
212
|
<tr>
|
|
224
213
|
<td>appId</td>
|
|
225
214
|
<td>string</td>
|
|
226
|
-
<td
|
|
215
|
+
<td>应用ID</td>
|
|
227
216
|
</tr>
|
|
228
217
|
<tr>
|
|
229
218
|
<td>code</td>
|
|
230
219
|
<td>string</td>
|
|
231
|
-
<td>返回码,详情参照<a href="https://
|
|
220
|
+
<td>返回码,详情参照<a href="https://open-platform.realsee.com/developer/docs/live/intro/" target="_blank" class="external">如视开放平台带看文档</a></td>
|
|
232
221
|
</tr>
|
|
233
222
|
<tr>
|
|
234
223
|
<td>command</td>
|
|
@@ -241,7 +230,7 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
241
230
|
<td>本条指令对应的业务数据</td>
|
|
242
231
|
</tr>
|
|
243
232
|
<tr>
|
|
244
|
-
<td>frontRequestId
|
|
233
|
+
<td>frontRequestId</td>
|
|
245
234
|
<td>string</td>
|
|
246
235
|
<td>前端的请求 ID,由 WS 服务原样透传回前端</td>
|
|
247
236
|
</tr>
|
|
@@ -269,22 +258,22 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
269
258
|
</table>
|
|
270
259
|
<p>当 WebSocket 推送的数据结构体不满足 <code>LiveMsg</code> 或者 <code>code</code> 值不为 <code>SUCCESS</code> 时会以 <code>error</code> 事件的形式抛出来。</p>
|
|
271
260
|
<ul>
|
|
272
|
-
<li><code>error(error: Error): void</code> RTC 语音出现异常。</li>
|
|
261
|
+
<li><code>error(error: Error): void</code> - RTC 语音出现异常。</li>
|
|
273
262
|
</ul>
|
|
274
263
|
<blockquote>
|
|
275
264
|
<p>RTC 语音不同容器或 RTC 解决方案不同,其错误信息内容可能不完全一致。</p>
|
|
276
265
|
</blockquote>
|
|
277
266
|
<a id="md:rtc-协议" class="tsd-anchor"></a><h2 class="tsd-anchor-link">RTC 协议<a href="#md:rtc-协议" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>语音能力需依赖 WebView/Browser 容器,即需要容器端实现 RTC 能力。</p>
|
|
278
|
-
<p>为了方便开发者接入,<strong
|
|
267
|
+
<p>为了方便开发者接入,<strong>如视开放平台</strong> 为主流平台提供 <a href="https://open-platform.realsee.com/developer/docs/live/intro/" target="_blank" class="external">容器 SDK</a>
|
|
279
268
|
和 <a href="https://www.npmjs.com/package/@realsee/jsbridge-x" target="_blank" class="external">jsbridge-x</a> 。</p>
|
|
280
269
|
<p><strong>Live</strong> 通过 <strong>jsbridge-x</strong> 与 集成了<strong>容器 SDK</strong> 的客户端应用或微信小程序应用程序桥接,实现原生能力的调用。这个 <code>jsbridge-x</code>
|
|
281
270
|
实例需作为配置参数提供给<code>createLive()</code>。</p>
|
|
282
271
|
<p>如果是 iOS/Android App(已接入如视 VRTC 容器 SDK)</p>
|
|
283
|
-
<pre><code class="
|
|
272
|
+
<pre><code class="typescript"><span class="hl-4">import</span><span class="hl-2"> </span><span class="hl-5">JSBridge</span><span class="hl-2"> </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/jsbridge-x'</span><br/><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">createLive</span><span class="hl-2">, </span><span class="hl-5">VRWebViewRTC</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/live'</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">jsBridgeInstance</span><span class="hl-2"> = </span><span class="hl-6">new</span><span class="hl-2"> </span><span class="hl-1">JSBridge</span><span class="hl-2">()</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">rtcInstance</span><span class="hl-2"> = </span><span class="hl-6">new</span><span class="hl-2"> </span><span class="hl-1">VRWebViewRTC</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-5">jsBridge:</span><span class="hl-2"> </span><span class="hl-5">jsBridgeInstance</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-1">getVoiceSign</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> (</span><span class="hl-5">params</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">// 获取语音签名</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-voice-sign'</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-5">method:</span><span class="hl-2"> </span><span class="hl-3">'POST'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">body:</span><span class="hl-2"> </span><span class="hl-8">JSON</span><span class="hl-2">.</span><span class="hl-1">stringify</span><span class="hl-2">(</span><span class="hl-5">params</span><span class="hl-2">)</span><br/><span class="hl-2"> })</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">()</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">live</span><span class="hl-2"> = </span><span class="hl-1">createLive</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-5">rtc:</span><span class="hl-2"> </span><span class="hl-5">rtcInstance</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">().</span><span class="hl-5">ticket</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span>
|
|
284
273
|
</code><button type="button">Copy</button></pre>
|
|
285
274
|
|
|
286
275
|
<p>提供 RTC 实例配置参数之后,语音的连接、断开、重连等逻辑就托管给了 <strong>Live</strong> 。您可以通过 live 实例上的 <code>$RTC</code> 命名空间访问语音相关的状态和事件。</p>
|
|
287
|
-
<pre><code class="
|
|
276
|
+
<pre><code class="typescript"><span class="hl-0">// 状态:用户是否成功加入语音房间</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">$RTC</span><span class="hl-2">.</span><span class="hl-5">joined</span><br/><span class="hl-0">// 状态:用户麦克风状态</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">$RTC</span><span class="hl-2">.</span><span class="hl-5">micro</span><br/><span class="hl-0">// 状态:当前语音房间ID</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">$RTC</span><span class="hl-2">.</span><span class="hl-5">voiceId</span><br/><span class="hl-0">// 状态:RTC 类型</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">$RTC</span><span class="hl-2">.</span><span class="hl-5">type</span><br/><span class="hl-0">// 监听用户音量变化</span><br/><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">$RTC</span><span class="hl-2">.</span><span class="hl-1">on</span><span class="hl-2">(</span><span class="hl-3">'userVolumes'</span><span class="hl-2">, (</span><span class="hl-5">userVolumes</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {})</span>
|
|
288
277
|
</code><button type="button">Copy</button></pre>
|
|
289
278
|
|
|
290
279
|
<a id="md:浏览器端支持" class="tsd-anchor"></a><h2 class="tsd-anchor-link">浏览器端支持<a href="#md:浏览器端支持" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>不同于客户端(Android\iOS) 已经内置 <strong>RTC</strong> 能力,浏览器端需要我们自己安装 第三方 <strong>RTC SDK</strong> 依赖。 <strong>Live</strong> 内置 腾讯<a href="https://github.com/tencentyun/TRTCSDK/blob/HEAD/Web/README-zh_CN.md" target="_blank" class="external">TRTC</a> 和 亚马逊<a href="https://github.com/aws/amazon-chime-sdk-js" target="_blank" class="external">Chime</a> 两个语音能力集成实现。</p>
|
|
@@ -292,45 +281,62 @@ SDKs(iOS/Android/微信小程序)和 Live API 可以快速实现实时同屏
|
|
|
292
281
|
<p>纯浏览器端不需要 <strong>Native</strong> 中转能力,没有 <strong>jsBridge</strong> 依赖。</p>
|
|
293
282
|
</blockquote>
|
|
294
283
|
<a id="md:trtc" class="tsd-anchor"></a><h3 class="tsd-anchor-link">TRTC<a href="#md:trtc" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>安装依赖:</p>
|
|
295
|
-
<pre><code class="shell"><span class="hl-0"># 需要您自行安装</span><br/><span class="hl-1">yarn</span><span class="hl-2"> </span><span class="hl-3">add</span><span class="hl-2"> </span><span class="hl-3">trtc-js-sdk</span>
|
|
284
|
+
<pre><code class="shell"><span class="hl-0"># 需要您自行安装</span><br/><span class="hl-1">yarn</span><span class="hl-2"> </span><span class="hl-3">add</span><span class="hl-2"> </span><span class="hl-3">trtc-js-sdk</span><br/><span class="hl-0"># 或</span><br/><span class="hl-1">npm</span><span class="hl-2"> </span><span class="hl-3">install</span><span class="hl-2"> </span><span class="hl-3">trtc-js-sdk</span>
|
|
296
285
|
</code><button type="button">Copy</button></pre>
|
|
297
286
|
|
|
298
287
|
<p>使用方式:</p>
|
|
299
|
-
<pre><code class="
|
|
288
|
+
<pre><code class="typescript"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">createLive</span><span class="hl-2">, </span><span class="hl-5">BrowserRTC</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/live'</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">rtcInstance</span><span class="hl-2"> = </span><span class="hl-6">new</span><span class="hl-2"> </span><span class="hl-1">BrowserRTC</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-1">getVoiceSign</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> (</span><span class="hl-5">params</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-voice-sign'</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-5">method:</span><span class="hl-2"> </span><span class="hl-3">'POST'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">body:</span><span class="hl-2"> </span><span class="hl-8">JSON</span><span class="hl-2">.</span><span class="hl-1">stringify</span><span class="hl-2">(</span><span class="hl-5">params</span><span class="hl-2">)</span><br/><span class="hl-2"> })</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">()</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-0">// 可选:处理自动播放策略</span><br/><span class="hl-2"> </span><span class="hl-0">// autoPlayConfirm: ({ onConfirm }) => showDialogThen(onConfirm)</span><br/><span class="hl-2">})</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">live</span><span class="hl-2"> = </span><span class="hl-1">createLive</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-5">rtc:</span><span class="hl-2"> </span><span class="hl-5">rtcInstance</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">().</span><span class="hl-5">ticket</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span>
|
|
300
289
|
</code><button type="button">Copy</button></pre>
|
|
301
290
|
|
|
302
291
|
<a id="md:chime" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Chime<a href="#md:chime" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>安装依赖:</p>
|
|
303
|
-
<pre><code class="shell"><span class="hl-0"># 需要您自行安装</span><br/><span class="hl-1">yarn</span><span class="hl-2"> </span><span class="hl-3">add</span><span class="hl-2"> </span><span class="hl-3">amazon-chime-sdk-js</span>
|
|
292
|
+
<pre><code class="shell"><span class="hl-0"># 需要您自行安装</span><br/><span class="hl-1">yarn</span><span class="hl-2"> </span><span class="hl-3">add</span><span class="hl-2"> </span><span class="hl-3">amazon-chime-sdk-js</span><br/><span class="hl-0"># 或</span><br/><span class="hl-1">npm</span><span class="hl-2"> </span><span class="hl-3">install</span><span class="hl-2"> </span><span class="hl-3">amazon-chime-sdk-js</span>
|
|
304
293
|
</code><button type="button">Copy</button></pre>
|
|
305
294
|
|
|
306
295
|
<p>使用方式:</p>
|
|
307
|
-
<pre><code class="
|
|
296
|
+
<pre><code class="typescript"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">createLive</span><span class="hl-2">, </span><span class="hl-5">BrowserRTC4Chime</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/live'</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">rtcInstance</span><span class="hl-2"> = </span><span class="hl-6">new</span><span class="hl-2"> </span><span class="hl-1">BrowserRTC4Chime</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-1">getVoiceSign</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> (</span><span class="hl-5">params</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-voice-sign'</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-5">method:</span><span class="hl-2"> </span><span class="hl-3">'POST'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">body:</span><span class="hl-2"> </span><span class="hl-8">JSON</span><span class="hl-2">.</span><span class="hl-1">stringify</span><span class="hl-2">(</span><span class="hl-5">params</span><span class="hl-2">)</span><br/><span class="hl-2"> })</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">()</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">live</span><span class="hl-2"> = </span><span class="hl-1">createLive</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-5">rtc:</span><span class="hl-2"> </span><span class="hl-5">rtcInstance</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">().</span><span class="hl-5">ticket</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span>
|
|
308
297
|
</code><button type="button">Copy</button></pre>
|
|
309
298
|
|
|
310
299
|
<a id="md:使用内置的-jsbridge-和-rtc-实现" class="tsd-anchor"></a><h3 class="tsd-anchor-link">使用内置的 JsBridge 和 RTC 实现<a href="#md:使用内置的-jsbridge-和-rtc-实现" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>使用方式:</p>
|
|
311
|
-
<pre><code class="
|
|
300
|
+
<pre><code class="typescript"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">createLive</span><span class="hl-2">, </span><span class="hl-5">BuiltInRTCType</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/live'</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">live</span><span class="hl-2"> = </span><span class="hl-1">createLive</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-5">useBuiltInRTC:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2">, </span><span class="hl-0">// 使用内置rtc</span><br/><span class="hl-2"> </span><span class="hl-5">builtInRTCType:</span><span class="hl-2"> </span><span class="hl-5">BuiltInRTCType</span><span class="hl-2">.</span><span class="hl-5">RealseeXChimeRTC</span><span class="hl-2">, </span><span class="hl-0">// 内置 rtc 类型,不填则默认trtc,chime请指明</span><br/><span class="hl-2"> </span><span class="hl-5">useBuiltInJsBridge:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2">, </span><span class="hl-0">// 使用内置的jsBridge</span><br/><span class="hl-2"> </span><span class="hl-1">getVoiceSign</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> (</span><span class="hl-5">params</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">// 内置的rtc还是要把 getVoiceSign 方法传递进去</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-voice-sign'</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-5">method:</span><span class="hl-2"> </span><span class="hl-3">'POST'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">body:</span><span class="hl-2"> </span><span class="hl-8">JSON</span><span class="hl-2">.</span><span class="hl-1">stringify</span><span class="hl-2">(</span><span class="hl-5">params</span><span class="hl-2">)</span><br/><span class="hl-2"> })</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">()</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">().</span><span class="hl-5">ticket</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">})</span><br/><br/><span class="hl-0">// 可以直接使用里面的 jsBridge, 该实例由 @realsee/jsbridge-x 提供支持</span><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">jsBridge</span><span class="hl-2"> = </span><span class="hl-5">live</span><span class="hl-2">.</span><span class="hl-5">jsBridge</span><br/><span class="hl-5">jsBridge</span><span class="hl-2">.</span><span class="hl-1">ready</span><span class="hl-2">().</span><span class="hl-1">then</span><span class="hl-2">(() </span><span class="hl-6">=></span><span class="hl-2"> </span><span class="hl-5">console</span><span class="hl-2">.</span><span class="hl-1">info</span><span class="hl-2">(</span><span class="hl-3">`</span><span class="hl-6">${</span><span class="hl-5">jsBridge</span><span class="hl-10">.</span><span class="hl-5">webViewType</span><span class="hl-6">}</span><span class="hl-3"> jsBridge is ready`</span><span class="hl-2">))</span>
|
|
312
301
|
</code><button type="button">Copy</button></pre>
|
|
313
302
|
|
|
314
303
|
<a id="md:typescript--react-支持" class="tsd-anchor"></a><h2 class="tsd-anchor-link">TypeScript & React 支持<a href="#md:typescript--react-支持" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Live</strong> 有完整的 <a href="https://www.typescriptlang.org/docs/handbook/2/generics.html" target="_blank" class="external">TypeScript Generics</a>
|
|
315
304
|
和 <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank" class="external">React Hooks</a> 支持,如果您的技术栈基于 <code>TypeScript</code> 和 <code>React</code> 可以参考如下方式更优雅地使用 <strong>Live</strong>。</p>
|
|
316
305
|
<p><img src="https://vrlab-static.ljcdn.com/release/web/tssupportminify.f2eaeed2.png" alt="TypeScript效果演示"></p>
|
|
317
306
|
<p>步骤一:新建文件 <code>LiveReact.ts</code> 并创建您自己的 <code>LiveReact</code> 实例。</p>
|
|
318
|
-
<pre><code class="
|
|
307
|
+
<pre><code class="typescript"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">createLiveReact</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'@realsee/live'</span><br/><br/><span class="hl-0">/** 定义帧数据快照结构 */</span><br/><span class="hl-6">interface</span><span class="hl-2"> </span><span class="hl-7">Snapshot</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-0">/** 以 Five 状态快照为例 */</span><br/><span class="hl-2"> </span><span class="hl-5">five</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-5">panoIndex</span><span class="hl-2">: </span><span class="hl-7">number</span><br/><span class="hl-2"> </span><span class="hl-5">fov</span><span class="hl-2">: </span><span class="hl-7">number</span><br/><span class="hl-2"> </span><span class="hl-5">mode</span><span class="hl-2">: </span><span class="hl-3">'Panorama'</span><span class="hl-2"> | </span><span class="hl-3">'Model'</span><br/><span class="hl-2"> </span><span class="hl-5">latitude</span><span class="hl-2">: </span><span class="hl-7">number</span><br/><span class="hl-2"> </span><span class="hl-5">longitude</span><span class="hl-2">: </span><span class="hl-7">number</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span><br/><br/><span class="hl-0">/** 通过 `createLiveReact()` 函数创建实例*/</span><br/><br/><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">LiveReact</span><span class="hl-2"> = </span><span class="hl-1">createLiveReact</span><span class="hl-2"><</span><span class="hl-7">Snapshot</span><span class="hl-2">>({</span><br/><span class="hl-2"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">().</span><span class="hl-5">ticket</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-1">getVoiceSign</span><span class="hl-5">:</span><span class="hl-2"> </span><span class="hl-6">async</span><span class="hl-2"> (</span><span class="hl-5">params</span><span class="hl-2">) </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">response</span><span class="hl-2"> = </span><span class="hl-4">await</span><span class="hl-2"> </span><span class="hl-1">fetch</span><span class="hl-2">(</span><span class="hl-3">'/api/get-voice-sign'</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-5">method:</span><span class="hl-2"> </span><span class="hl-3">'POST'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">body:</span><span class="hl-2"> </span><span class="hl-8">JSON</span><span class="hl-2">.</span><span class="hl-1">stringify</span><span class="hl-2">(</span><span class="hl-5">params</span><span class="hl-2">)</span><br/><span class="hl-2"> })</span><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> </span><span class="hl-5">response</span><span class="hl-2">.</span><span class="hl-1">json</span><span class="hl-2">()</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-5">useBuiltInRTC:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2">,</span><br/><span class="hl-2">})</span><br/><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-4">default</span><span class="hl-2"> </span><span class="hl-5">LiveReact</span><br/><br/><span class="hl-0">/** 如果您不喜欢 `LiveReact.LiveProvider` 这类编程习惯,可以将需要的函数"抛"出来 */</span><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">LiveProvider</span><span class="hl-2"> = </span><span class="hl-5">LiveReact</span><span class="hl-2">.</span><span class="hl-5">LiveProvider</span><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">useConnect</span><span class="hl-2"> = </span><span class="hl-5">LiveReact</span><span class="hl-2">.</span><span class="hl-5">useConnect</span><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">useKeyframe</span><span class="hl-2"> = </span><span class="hl-5">LiveReact</span><span class="hl-2">.</span><span class="hl-5">useKeyframe</span><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">useLiveAction</span><span class="hl-2"> = </span><span class="hl-5">LiveReact</span><span class="hl-2">.</span><span class="hl-5">useLiveAction</span><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">useLiveState</span><span class="hl-2"> = </span><span class="hl-5">LiveReact</span><span class="hl-2">.</span><span class="hl-5">useLiveState</span><br/><span class="hl-4">export</span><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">useUserList</span><span class="hl-2"> = </span><span class="hl-5">LiveReact</span><span class="hl-2">.</span><span class="hl-5">useUserList</span><br/><span class="hl-0">// export ...</span>
|
|
319
308
|
</code><button type="button">Copy</button></pre>
|
|
320
309
|
|
|
321
310
|
<p>步骤二:通过 <code>LiveProvider</code> 将 <code>live</code> 实例集成到 <code>React</code> 的 <a href="https://reactjs.org/docs/context.html" target="_blank" class="external">Context</a> 上下文环境中。</p>
|
|
322
|
-
<pre><code class="
|
|
311
|
+
<pre><code class="tsx"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">LiveProvider</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'./LiveReact'</span><br/><br/><span class="hl-5">ReactDOM</span><span class="hl-2">.</span><span class="hl-1">render</span><span class="hl-2">(</span><br/><span class="hl-2"> </span><span class="hl-11"><</span><span class="hl-7">LiveProvider</span><span class="hl-11">></span><br/><span class="hl-2"> </span><span class="hl-11"><</span><span class="hl-7">RootApp</span><span class="hl-2"> </span><span class="hl-11">/></span><br/><span class="hl-2"> </span><span class="hl-11"></</span><span class="hl-7">LiveProvider</span><span class="hl-11">></span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">container</span><span class="hl-2">,</span><br/><span class="hl-2">)</span>
|
|
323
312
|
</code><button type="button">Copy</button></pre>
|
|
324
313
|
|
|
325
314
|
<p>步骤三:在您的 <code>React</code> 函数组件中使用相关 <code>Hooks</code> 函数。</p>
|
|
326
|
-
<
|
|
315
|
+
<a id="md:可用的-react-hooks" class="tsd-anchor"></a><h3 class="tsd-anchor-link">可用的 React Hooks<a href="#md:可用的-react-hooks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong>Live</strong> 提供了丰富的 React Hooks,方便在 React 组件中使用:</p>
|
|
316
|
+
<ul>
|
|
317
|
+
<li><code>useLiveInstance()</code> - 获取当前 Live 实例</li>
|
|
318
|
+
<li><code>useRTCInstance()</code> - 获取当前 RTC 实例</li>
|
|
319
|
+
<li><code>useConnect()</code> - 获取连接函数</li>
|
|
320
|
+
<li><code>useKeyframe(key)</code> - 获取指定键的帧数据状态和更新函数(类似 useState)</li>
|
|
321
|
+
<li><code>useKeyframeUpdateCallback(key, callback, deps)</code> - 监听指定键的帧数据更新回调</li>
|
|
322
|
+
<li><code>useLiveAction()</code> - 获取带看操作函数(connect, sendKeyframe, toggleMicro, broadcast, exit, kick, forbidMicro, forbidSync, getFramesByKey, setSelfInfo, updateStatus)</li>
|
|
323
|
+
<li><code>useLiveEventCallback(name, callback, deps)</code> - 监听带看事件</li>
|
|
324
|
+
<li><code>useLiveState()</code> - 获取带看连接状态</li>
|
|
325
|
+
<li><code>useRTCAction()</code> - 获取 RTC 操作函数(join, quit, toggleMicro, detectMicro, shock)</li>
|
|
326
|
+
<li><code>useRTCEventCallback(name, callback, deps)</code> - 监听 RTC 事件</li>
|
|
327
|
+
<li><code>useSelfInfo()</code> - 获取和更新用户信息(类似 useState)</li>
|
|
328
|
+
<li><code>useKeyframesSnapshot()</code> - 获取所有帧数据快照</li>
|
|
329
|
+
<li><code>useUserList()</code> - 获取用户列表</li>
|
|
330
|
+
</ul>
|
|
331
|
+
<p>使用示例:</p>
|
|
332
|
+
<pre><code class="tsx"><span class="hl-4">import</span><span class="hl-2"> { </span><span class="hl-5">useConnect</span><span class="hl-2">, </span><span class="hl-5">useLiveAction</span><span class="hl-2">, </span><span class="hl-5">useKeyframe</span><span class="hl-2">, </span><span class="hl-5">useLiveState</span><span class="hl-2">, </span><span class="hl-5">LiveState</span><span class="hl-2"> } </span><span class="hl-4">from</span><span class="hl-2"> </span><span class="hl-3">'./LiveReact'</span><br/><br/><span class="hl-6">function</span><span class="hl-2"> </span><span class="hl-1">ReconnectBtn</span><span class="hl-2">() {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">connect</span><span class="hl-2"> = </span><span class="hl-1">useConnect</span><span class="hl-2">()</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">liveState</span><span class="hl-2"> = </span><span class="hl-1">useLiveState</span><span class="hl-2">()</span><br/><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> (</span><br/><span class="hl-2"> </span><span class="hl-11"><</span><span class="hl-12">button</span><span class="hl-2"> </span><br/><span class="hl-2"> </span><span class="hl-13">onClick</span><span class="hl-2">=</span><span class="hl-6">{</span><span class="hl-10">() </span><span class="hl-6">=></span><span class="hl-10"> </span><span class="hl-1">connect</span><span class="hl-10">({ </span><br/><span class="hl-10"> </span><span class="hl-5">url:</span><span class="hl-10"> </span><span class="hl-3">'wss://example.com/live'</span><span class="hl-10">,</span><br/><span class="hl-10"> </span><span class="hl-1">getTicket</span><span class="hl-5">:</span><span class="hl-10"> </span><span class="hl-6">async</span><span class="hl-10"> () </span><span class="hl-6">=></span><span class="hl-10"> {</span><br/><span class="hl-10"> </span><span class="hl-6">const</span><span class="hl-10"> </span><span class="hl-8">response</span><span class="hl-10"> </span><span class="hl-2">=</span><span class="hl-10"> </span><span class="hl-4">await</span><span class="hl-10"> </span><span class="hl-1">fetch</span><span class="hl-10">(</span><span class="hl-3">'/api/get-ticket'</span><span class="hl-10">)</span><br/><span class="hl-10"> </span><span class="hl-4">return</span><span class="hl-10"> </span><span class="hl-5">response</span><span class="hl-10">.</span><span class="hl-1">json</span><span class="hl-10">().</span><span class="hl-5">ticket</span><br/><span class="hl-10"> }</span><br/><span class="hl-10"> })</span><span class="hl-6">}</span><br/><span class="hl-2"> </span><span class="hl-13">disabled</span><span class="hl-2">=</span><span class="hl-6">{</span><span class="hl-5">liveState</span><span class="hl-10"> </span><span class="hl-2">===</span><span class="hl-10"> </span><span class="hl-5">LiveState</span><span class="hl-10">.</span><span class="hl-8">CONNECTING</span><span class="hl-10"> </span><span class="hl-2">||</span><span class="hl-10"> </span><span class="hl-5">liveState</span><span class="hl-10"> </span><span class="hl-2">===</span><span class="hl-10"> </span><span class="hl-5">LiveState</span><span class="hl-10">.</span><span class="hl-8">OPEN</span><span class="hl-6">}</span><br/><span class="hl-2"> </span><span class="hl-11">></span><br/><span class="hl-2"> </span><span class="hl-6">{</span><span class="hl-5">liveState</span><span class="hl-10"> </span><span class="hl-2">===</span><span class="hl-10"> </span><span class="hl-5">LiveState</span><span class="hl-10">.</span><span class="hl-8">OPEN</span><span class="hl-10"> </span><span class="hl-2">?</span><span class="hl-10"> </span><span class="hl-3">'已连接'</span><span class="hl-10"> </span><span class="hl-2">:</span><span class="hl-10"> </span><span class="hl-3">'重新连接'</span><span class="hl-6">}</span><br/><span class="hl-2"> </span><span class="hl-11"></</span><span class="hl-12">button</span><span class="hl-11">></span><br/><span class="hl-2"> )</span><br/><span class="hl-2">}</span><br/><br/><span class="hl-6">function</span><span class="hl-2"> </span><span class="hl-1">CameraControl</span><span class="hl-2">() {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> [</span><span class="hl-8">camera</span><span class="hl-2">, </span><span class="hl-8">setCamera</span><span class="hl-2">] = </span><span class="hl-1">useKeyframe</span><span class="hl-2">(</span><span class="hl-3">'camera'</span><span class="hl-2">)</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> { </span><span class="hl-8">sendKeyframe</span><span class="hl-2"> } = </span><span class="hl-1">useLiveAction</span><span class="hl-2">()</span><br/><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-1">handleMove</span><span class="hl-2"> = () </span><span class="hl-6">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-6">const</span><span class="hl-2"> </span><span class="hl-8">newCamera</span><span class="hl-2"> = { </span><span class="hl-5">position:</span><span class="hl-2"> [</span><span class="hl-9">1</span><span class="hl-2">, </span><span class="hl-9">2</span><span class="hl-2">, </span><span class="hl-9">3</span><span class="hl-2">], </span><span class="hl-5">rotation:</span><span class="hl-2"> [</span><span class="hl-9">0</span><span class="hl-2">, </span><span class="hl-9">0</span><span class="hl-2">, </span><span class="hl-9">0</span><span class="hl-2">] }</span><br/><span class="hl-2"> </span><span class="hl-1">setCamera</span><span class="hl-2">(</span><span class="hl-5">newCamera</span><span class="hl-2">) </span><span class="hl-0">// 会自动同步到其他用户</span><br/><span class="hl-2"> </span><span class="hl-0">// 或者使用 sendKeyframe</span><br/><span class="hl-2"> </span><span class="hl-0">// sendKeyframe('camera', newCamera)</span><br/><span class="hl-2"> }</span><br/><br/><span class="hl-2"> </span><span class="hl-4">return</span><span class="hl-2"> (</span><br/><span class="hl-2"> </span><span class="hl-11"><</span><span class="hl-12">div</span><span class="hl-11">></span><br/><span class="hl-2"> </span><span class="hl-11"><</span><span class="hl-12">p</span><span class="hl-11">></span><span class="hl-2">相机位置: </span><span class="hl-6">{</span><span class="hl-5">camera</span><span class="hl-10">?.</span><span class="hl-5">position</span><span class="hl-10">?.</span><span class="hl-1">join</span><span class="hl-10">(</span><span class="hl-3">', '</span><span class="hl-10">)</span><span class="hl-6">}</span><span class="hl-11"></</span><span class="hl-12">p</span><span class="hl-11">></span><br/><span class="hl-2"> </span><span class="hl-11"><</span><span class="hl-12">button</span><span class="hl-2"> </span><span class="hl-13">onClick</span><span class="hl-2">=</span><span class="hl-6">{</span><span class="hl-5">handleMove</span><span class="hl-6">}</span><span class="hl-11">></span><span class="hl-2">移动相机</span><span class="hl-11"></</span><span class="hl-12">button</span><span class="hl-11">></span><br/><span class="hl-2"> </span><span class="hl-11"></</span><span class="hl-12">div</span><span class="hl-11">></span><br/><span class="hl-2"> )</span><br/><span class="hl-2">}</span>
|
|
327
333
|
</code><button type="button">Copy</button></pre>
|
|
328
334
|
|
|
329
335
|
<a id="md:live-api-文档" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Live API 文档<a href="#md:live-api-文档" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>欢迎查看 <a href="https://unpkg.com/@realsee/live/docs/index.html" target="_blank" class="external">Live API</a> 文档 。<br>
|
|
330
336
|
该文档由 <a href="https://typedoc.org/" target="_blank" class="external">TypeDoc</a> 生成,您可以详细查看 API 使用方式、事件 Hooks 及数据结构定义等。</p>
|
|
331
337
|
<a id="md:相关文档链接" class="tsd-anchor"></a><h2 class="tsd-anchor-link">相关文档链接<a href="#md:相关文档链接" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
|
332
338
|
<li><a href="https://www.npmjs.com/package/@realsee/five" target="_blank" class="external">@realsee/five</a></li>
|
|
333
|
-
<li><a href="https://www.npmjs.com/package/@realsee/jsbridge" target="_blank" class="external">@realsee/jsbridge</a></li>
|
|
334
|
-
<li><a href="https://
|
|
339
|
+
<li><a href="https://www.npmjs.com/package/@realsee/jsbridge-x" target="_blank" class="external">@realsee/jsbridge-x</a></li>
|
|
340
|
+
<li><a href="https://open-platform.realsee.com/developer/docs/live/intro/" target="_blank" class="external">如视开放平台线上带看</a></li>
|
|
335
341
|
</ul>
|
|
336
|
-
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:livejs"><span>Live.js</span></a><ul><li><a href="#md:功能说明"><span>功能说明</span></a></li><li><ul><li><a href="#md:名词释义"><span>名词释义</span></a></li></ul></li><li><a href="#md:快速上手"><span>快速上手</span></a></li><li><ul><li><a href="#md:安装-sdk"><span>安装 SDK</span></a></li><li><a href="#md:如何使用"><span>如何使用</span></a></li></ul></li><li><a href="#md:消息系统"><span>消息系统</span></a></li><li><ul><li><a href="#md:帧数据同步"><span>帧数据同步</span></a></li><li><a href="#md:房间信息"><span>房间信息</span></a></li><li><a href="#md:广播消息"><span>广播消息</span></a></li></ul></li><li><a href="#md:事件监听"><span>事件监听</span></a></li><li><ul><li><a href="#md
|
|
342
|
+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:livejs"><span>Live.js</span></a><ul><li><a href="#md:功能说明"><span>功能说明</span></a></li><li><ul><li><a href="#md:名词释义"><span>名词释义</span></a></li></ul></li><li><a href="#md:快速上手"><span>快速上手</span></a></li><li><ul><li><a href="#md:安装-sdk"><span>安装 SDK</span></a></li><li><a href="#md:如何使用"><span>如何使用</span></a></li></ul></li><li><a href="#md:消息系统"><span>消息系统</span></a></li><li><ul><li><a href="#md:帧数据同步"><span>帧数据同步</span></a></li><li><a href="#md:房间信息"><span>房间信息</span></a></li><li><a href="#md:广播消息"><span>广播消息</span></a></li></ul></li><li><a href="#md:事件监听"><span>事件监听</span></a></li><li><ul><li><a href="#md:带看连接状态"><span>带看连接状态</span></a></li><li><a href="#md:带看事件"><span>带看事件</span></a></li><li><a href="#md:主要方法说明"><span>主要方法说明</span></a></li><li><a href="#md:主要属性说明"><span>主要属性说明</span></a></li><li><a href="#md:rtc-事件"><span>RTC 事件</span></a></li><li><a href="#md:异常处理"><span>异常处理</span></a></li></ul></li><li><a href="#md:rtc-协议"><span>RTC 协议</span></a></li><li><a href="#md:浏览器端支持"><span>浏览器端支持</span></a></li><li><ul><li><a href="#md:trtc"><span>TRTC</span></a></li><li><a href="#md:chime"><span>Chime</span></a></li><li><a href="#md:使用内置的-jsbridge-和-rtc-实现"><span>使用内置的 <wbr/>Js<wbr/>Bridge 和 RTC 实现</span></a></li></ul></li><li><a href="#md:typescript--react-支持"><span>Type<wbr/>Script & <wbr/>React 支持</span></a></li><li><ul><li><a href="#md:可用的-react-hooks"><span>可用的 <wbr/>React <wbr/>Hooks</span></a></li></ul></li><li><a href="#md:live-api-文档"><span>Live API 文档</span></a></li><li><a href="#md:相关文档链接"><span>相关文档链接</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>如视 Live SDK</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|