@realsee/live 0.1.1 → 0.3.0-alpha.1

package/README.md

@@ -4,7 +4,7 @@
 
 ## 功能说明
 
-**Live** 是 [如视开发者中心VRTC服务](https://developers.realsee.com/docs/#/docs/live/README) 的核心客户端 Web SDK，搭配 Live Container
+**Live** 是 [如视开发者中心 VRTC 服务](https://developers.realsee.com/docs/#/docs/live/README) 的核心客户端 Web SDK，搭配 Live Container
 SDKs（iOS/Android/微信小程序）和 Live API 可以快速实现实时同屏、实时语音、IM 等功能。
 
 ### 名词释义
@@ -26,15 +26,17 @@ SDKs（iOS/Android/微信小程序）和 Live API 可以快速实现实时同屏
 
 ### 安装 SDK
 
-可以通过Node包管理工具 [npm](https://www.npmjs.com/) 或 [yarn](https://yarnpkg.com/) 安装**Live**：
+可以通过 Node 包管理工具 [npm](https://www.npmjs.com/) 或 [yarn](https://yarnpkg.com/) 安装**Live**：
 
 ```bash
 # npm
-npm i @realsee/live
+npm i @realsee/live tslib
 # yarn
-yarn add @realsee/live
+yarn add @realsee/live tslib
 ```
 
+> **Live** 通过 [TypeScript](http://www.typescriptlang.org/) 编写，依赖 [tslib]() 运行时，如果你的项目不是由 [TypeScript](http://www.typescriptlang.org/) 构成，请安装此运行时。
+
 ### 如何使用
 
 简单使用样例（先不考虑实时语音能力）：
@@ -43,10 +45,11 @@ yarn add @realsee/live
 import { createLive } from '@realsee/live'
 
 const live = createLive({
-  url: 'wss://ws-access.realsee.com/***/?=xxx', /* 连接 WebSocket 服务的 URL */
-  getTicket: async () => {/* 获取带看"门票"的回调函数 */},
+  url: 'wss://ws-access.realsee.com/***/?=xxx' /* 连接 WebSocket 服务的 URL */,
+  getTicket: async () => {
+    /* 获取带看"门票"的回调函数 */
+  },
 })
-
 ```
 
 在创建 `live` 实例时配置了两个参数：
@@ -136,7 +139,7 @@ live.on('broadcast', (data /* 广播的数据 */) => {})
 
 ```ts
 live.on('ws.readyStateUpdate', (readyState: WebSocketState) => {
-    console.log(readyState) // readyState 即是最新的 WebScoket 状态
+  console.log(readyState) // readyState 即是最新的 WebScoket 状态
 })
 ```
 
@@ -199,7 +202,7 @@ live.on('ws.readyStateUpdate', (readyState: WebSocketState) => {
 
 ```ts
 live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
-    console.log(userVolumes) // userVolumes 正在说话的用户及其音量数据。
+  console.log(userVolumes) // userVolumes 正在说话的用户及其音量数据。
 })
 ```
 
@@ -222,17 +225,17 @@ live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
 
 与 WebSocket 通信的结构体`LiveMsg`格式如下：
 
-| 名称            | 类型                | 描述                                                                                                                  |
-| --------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| 名称            | 类型                | 描述                                                                                                  |
+| --------------- | ------------------- | ----------------------------------------------------------------------------------------------------- |
 | appId           | string              |
-| code            | string              | 返回码，详情参照[服务端 API Code 码表](https://developers.realsee.com/docs/#/docs/live/server/README)                                         |
-| command         | 指令                | WebSocket 通信指令类型，详情请查看[Live API](https://unpkg.com/@realsee/live/docs/index.html) 文档 |
-| data            | Record<string, any> | 本条指令对应的业务数据                                                                                                |
-| frontRequestId: | string              | 前端的请求 ID，由 WS 服务原样透传回前端                                                                               |
-| message         | string              | 返回描述                                                                                                              |
-| requestId       | string              | 后端请求 ID                                                                                                           |
-| roomCode        | string              | 带看房间号                                                                                                            |
-| triggerUserId   | string              | 触发指令的用户 ID                                                                                                     |
+| code            | string              | 返回码，详情参照[服务端 API Code 码表](https://developers.realsee.com/docs/#/docs/live/server/README) |
+| command         | 指令                | WebSocket 通信指令类型，详情请查看[Live API](https://unpkg.com/@realsee/live/docs/index.html) 文档    |
+| data            | Record<string, any> | 本条指令对应的业务数据                                                                                |
+| frontRequestId: | string              | 前端的请求 ID，由 WS 服务原样透传回前端                                                               |
+| message         | string              | 返回描述                                                                                              |
+| requestId       | string              | 后端请求 ID                                                                                           |
+| roomCode        | string              | 带看房间号                                                                                            |
+| triggerUserId   | string              | 触发指令的用户 ID                                                                                     |
 
 当 WebSocket 推送的数据结构体不满足 `LiveMsg` 或者 `code` 值不为 `SUCCESS` 时会以 `error` 事件的形式抛出来。
 
@@ -244,33 +247,29 @@ live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
 
 语音能力需依赖 WebView/Browser 容器，即需要容器端实现 RTC 能力。
 
-为了方便开发者接入，**如视开发者中心VRTC服务** 为主流平台提供 [容器SDK](https://developers.realsee.com/docs/#/docs/live/client/container/README )
+为了方便开发者接入，**如视开发者中心 VRTC 服务** 为主流平台提供 [容器 SDK](https://developers.realsee.com/docs/#/docs/live/client/container/README)
 和 [jsbridge-x](https://www.npmjs.com/package/@realsee/jsbridge-x) 。
 
-**Live** 通过 **jsbridge-x** 与 集成了**容器SDK** 的客户端应用或微信小程序应用程序桥接，实现原生能力的调用。这个 `jsbridge-x`
+**Live** 通过 **jsbridge-x** 与 集成了**容器 SDK** 的客户端应用或微信小程序应用程序桥接，实现原生能力的调用。这个 `jsbridge-x`
 实例需作为配置参数提供给`createLive()`。
 
-如果是 iOS/Android App（已接入如视VRTC容器SDK）
+如果是 iOS/Android App（已接入如视 VRTC 容器 SDK）
 
 ```js
-import AppBridge from '@realsee/jsbridge-x/lib/cjs/app'
+import { JSBridgeApp } from '@realsee/jsbridge-x/lib/app'
 import { createLive } from '@realsee/live'
+import { VRWebViewRTC } from '@realsee/live/RTC/VRWebViewRTC'
 
-const live = createLive({
-  rtc: new AppBridge(),
-  getTicket: async () => ''
-})
-```
-
-如果是 微信小程序（已接入如视VRTC容器SDK）
+const jsBridgeInstance = new JSBridgeApp()
 
-```js
-import MiniprogramBridge from '@realsee/jsbridge-x/lib/cjs/miniprogram'
-import { createLive } from '@realsee/live'
+const rtcInstance = new VRWebViewRTC({
+  jsBridge,
+  getVoiceSign: () => {},
+})
 
 const live = createLive({
-  rtc: new MiniprogramBridge(),
-  getTicket: async () => ''
+  rtc: rtcInstance,
+  getTicket: async () => '',
 })
 ```
 
@@ -285,6 +284,62 @@ live.$RTC.micro
 live.$RTC.on('userVolumes', (userVolumes) => {})
 ```
 
+## 浏览器端支持
+
+不同于客户端(Android\iOS) 已经内置 **RTC** 能力，浏览器端需要我们自己安装 第三方 **RTC SDK** 依赖。 **Live** 内置 腾讯[TRTC](https://github.com/tencentyun/TRTCSDK/blob/HEAD/Web/README-zh_CN.md) 和 亚马逊[Chime](https://github.com/aws/amazon-chime-sdk-js) 两个语音能力集成实现。
+
+> 纯浏览器端不需要 **Native** 中转能力，没有 **jsBridge** 依赖。
+
+### TRTC
+
+安装依赖：
+
+```shell
+# 需要您自行安装
+yarn add trtc-js-sdk
+```
+
+使用方式：
+
+```tsx
+import { createLive } from '@realsee/live'
+import { BrowserRTC } from '@realsee/live/RTC/BrowserRTC'
+
+const rtcInstance = new VRWebViewRTC({
+  getVoiceSign: () => {},
+})
+
+const live = createLive({
+  rtc: rtcInstance,
+  getTicket: async () => '',
+})
+```
+
+### Chime
+
+安装依赖：
+
+```shell
+# 需要您自行安装
+yarn add amazon-chime-sdk-js
+```
+
+使用方式：
+
+```tsx
+import { createLive } from '@realsee/live'
+import { BrowserRTC4Chime } from '@realsee/live/RTC/BrowserRTC4Chime'
+
+const rtcInstance = new BrowserRTC4Chime({
+  getVoiceSign: () => {},
+})
+
+const live = createLive({
+  rtc: rtcInstance,
+  getTicket: async () => '',
+})
+```
+
 ## TypeScript & React 支持
 
 **Live** 有完整的 [TypeScript Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html)
@@ -295,30 +350,24 @@ live.$RTC.on('userVolumes', (userVolumes) => {})
 步骤一：新建文件 `LiveReact.ts` 并创建您自己的 `LiveReact` 实例。
 
 ```tsx
-import {createLiveReact} from '@realsee/live'
+import { createLiveReact } from '@realsee/live'
 
 /** 定义帧数据快照结构 */
 interface Snapshot {
-    /** 以 Five 状态快照为例 */
-    five: {
-        panoIndex: number,
-        fov: number,
-        mode: 'Panorama' | 'Model',
-        latitude: number,
-        longitude: number,
-    }
-}
-
-/** 定义异步获取 `Ticket` 回调参数结构 */
-interface TicketArgs {
-    /* 没有特殊参数 */
+  /** 以 Five 状态快照为例 */
+  five: {
+    panoIndex: number
+    fov: number
+    mode: 'Panorama' | 'Model'
+    latitude: number
+    longitude: number
+  }
 }
 
+/** 通过 `createLiveReact()` 函数创建实例*/
 
-/** 通过 `createLiveReact()` 函数创建实例，注意必须提供 `getTicket` 配置参数 */
-
-const LiveReact = createLiveReact<Snapshot, TicketArgs>({
-    getTicket: async () => '', /* 必须提供 */
+const LiveReact = createLiveReact<Snapshot>({
+  getTicket: async () => '' /* 必须提供 */,
 })
 
 export default LiveReact
@@ -328,7 +377,6 @@ export const LiveProvider = LiveReact.LiveProvider
 export const useConnect = LiveReact.useConnect
 export const useKeyframe = LiveReact.useKeyframe
 // export ..
-
 ```
 
 步骤二：通过 `LiveProvider` 将 `live` 实例集成到 `React` 的 [Context](https://reactjs.org/docs/context.html) 上下文环境中。
@@ -336,7 +384,12 @@ export const useKeyframe = LiveReact.useKeyframe
 ```jsx
 import { LiveProvider } from './LiveReact'
 
-ReactDOM.render(<LiveProvider><RootApp/></LiveProvider>, containter)
+ReactDOM.render(
+  <LiveProvider>
+    <RootApp />
+  </LiveProvider>,
+  containter
+)
 ```
 
 步骤三：在您的 `React` 函数组件中使用相关 `Hooks` 函数。
@@ -344,7 +397,7 @@ ReactDOM.render(<LiveProvider><RootApp/></LiveProvider>, containter)
 ```jsx
 import { useConnect } from './LiveReact'
 
-function ReconnectBtn () {
+function ReconnectBtn() {
   const connect = useConnect()
 
   return <button onClick={() => connect()}>重新连接</button>
@@ -359,5 +412,5 @@ function ReconnectBtn () {
 ## 相关文档链接
 
 - [@realsee/five](https://www.npmjs.com/package/@realsee/five)
-- [@realsee/jsbridge-x](https://www.npmjs.com/package/@realsee/jsbridge-x)
-- [如视开发者中心VRTC服务](https://developers.realsee.com/docs/#/docs/live/README)
+- [@realsee/jsbridge](https://www.npmjs.com/package/@realsee/jsbridge)
+- [如视开发者中心 VRTC 服务](https://developers.realsee.com/docs/#/docs/live/README)

package/docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/custom.css

@@ -0,0 +1,43 @@
+body {
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+blockquote {
+  border-left: 4px solid rgb(128 128 128 / 50%);
+  color: rgb(0 0 0 / 60%);
+  line-height: 2;
+  font-size: 0.85rem;
+  padding: 3px 0px 3px 1em;
+}
+
+.tsd-typography {
+  font-size: 14px;
+}
+
+.tsd-typography h4 {
+  line-height: 2;
+}
+
+.hljs {
+  background-color: transparent;
+  font-family: monospace;
+}
+code {
+  font-size: 12px;
+  background-color: rgb(96 125 139 / 10%);
+}
+
+pre {
+  background-color: rgb(205 220 57 / 8%);
+}
+
+p {
+  line-height: 1.5;
+}
+
+a {
+  color: #3832cf;
+}
+
+a:hover {
+  color: darkred;
+}

package/docs/assets/highlight.css

@@ -0,0 +1,127 @@
+:root {
+    --light-hl-0: #008000;
+    --dark-hl-0: #6A9955;
+    --light-hl-1: #000000;
+    --dark-hl-1: #D4D4D4;
+    --light-hl-2: #AF00DB;
+    --dark-hl-2: #C586C0;
+    --light-hl-3: #001080;
+    --dark-hl-3: #9CDCFE;
+    --light-hl-4: #A31515;
+    --dark-hl-4: #CE9178;
+    --light-hl-5: #0000FF;
+    --dark-hl-5: #569CD6;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #795E26;
+    --dark-hl-7: #DCDCAA;
+    --light-hl-8: #098658;
+    --dark-hl-8: #B5CEA8;
+    --light-hl-9: #267F99;
+    --dark-hl-9: #4EC9B0;
+    --light-hl-10: #800000;
+    --dark-hl-10: #808080;
+    --light-hl-11: #800000;
+    --dark-hl-11: #569CD6;
+    --light-hl-12: #FF0000;
+    --dark-hl-12: #9CDCFE;
+    --light-hl-13: #000000FF;
+    --dark-hl-13: #D4D4D4;
+    --light-hl-14: #000000;
+    --dark-hl-14: #C8C8C8;
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
+.hl-14 { color: var(--hl-14); }
+pre, code { background: var(--code-background); }