@realsee/live 0.4.0-alpha.2 → 0.4.0-alpha.5

package/README.md

@@ -30,26 +30,24 @@ SDKs（iOS/Android/微信小程序）和 Live API 可以快速实现实时同屏
 
 ```bash
 # npm
-npm i @realsee/live tslib
+npm i @realsee/live
 # yarn
-yarn add @realsee/live tslib
+yarn add @realsee/live
 ```
 
-> **Live** 通过 [TypeScript](http://www.typescriptlang.org/) 编写，依赖 [tslib]() 运行时，如果你的项目不是由 [TypeScript](http://www.typescriptlang.org/) 构成，请安装此运行时。
-
 ### 如何使用
 
 简单使用样例（先不考虑实时语音能力）：
 
 ```js
-import { createLive } from '@realsee/live'
+import { createLive } from '@realsee/live';
 
 const live = createLive({
   url: 'wss://ws-access.realsee.com/***/?=xxx' /* 连接 WebSocket 服务的 URL */,
   getTicket: async () => {
     /* 获取带看"门票"的回调函数 */
   },
-})
+});
 ```
 
 在创建 `live` 实例时配置了两个参数：
@@ -82,12 +80,12 @@ const live = createLive({
 
 ```js
 // 发送本地 帧数据 (Five State)
-live.sendKeyframe('five', { panoIndex: 13 })
+live.sendKeyframe('five', { panoIndex: 13 });
 
 // 接收远程 帧数据 (Five State)
 live.keyframes.on('five', (newState, prevState) => {
   // 可以拿最新的 `newState` 更新本地 UI 状态
-})
+});
 ```
 
 您也可以通过 `live.snapshot` 属性来获取当前所有序列帧数据的"快照"。
@@ -98,19 +96,19 @@ live.keyframes.on('five', (newState, prevState) => {
 
 ```js
 // 属性：获取本地用户信息
-live.selfInfo
+live.selfInfo;
 
 // 属性：获取当前房间内所有用户列表
-live.userList
+live.userList;
 
 // 方法：更新本地用户信息
-live.setSelfInfo({})
+live.setSelfInfo({});
 
 // 事件：本地用户信息发生变更
-live.on('selfInfoUpdate', (userInfo) => {})
+live.on('selfInfoUpdate', (userInfo) => {});
 
 // 事件：房间用户列表信息发生变更
-live.on('userListUpdate', (userList) => {})
+live.on('userListUpdate', (userList) => {});
 ```
 
 ### 广播消息
@@ -118,13 +116,16 @@ live.on('userListUpdate', (userList) => {})
 除了帧数据和房间信息之外，还可以用事件的形式向房间内的其他用户广播消息：
 
 ```js
-live.broadcast(data /* 广播的数据 */, ['user_id_1', 'user_id_2'] /* 收到此用户的userId */)
+live.broadcast(
+  data /* 广播的数据 */,
+  ['user_id_1', 'user_id_2'] /* 收到此用户的userId */,
+);
 ```
 
 此时，房间内用户 Id 为 `user_id_1`、`user_id_2` 的用户会收到此广播消息（其他用户无感知）：
 
 ```js
-live.on('broadcast', (data /* 广播的数据 */) => {})
+live.on('broadcast', (data /* 广播的数据 */) => {});
 ```
 
 更多的例子请查看 [Live API](https://unpkg.com/@realsee/live/docs/index.html) 文档 。
@@ -139,8 +140,8 @@ live.on('broadcast', (data /* 广播的数据 */) => {})
 
 ```ts
 live.on('ws.readyStateUpdate', (readyState: WebSocketState) => {
-  console.log(readyState) // readyState 即是最新的 WebScoket 状态
-})
+  console.log(readyState); // readyState 即是最新的 WebScoket 状态
+});
 ```
 
 ### WebSocket 事件
@@ -202,8 +203,8 @@ live.on('ws.readyStateUpdate', (readyState: WebSocketState) => {
 
 ```ts
 live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
-  console.log(userVolumes) // userVolumes 正在说话的用户及其音量数据。
-})
+  console.log(userVolumes); // userVolumes 正在说话的用户及其音量数据。
+});
 ```
 
 ### 异常处理
@@ -256,32 +257,31 @@ live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
 如果是 iOS/Android App（已接入如视 VRTC 容器 SDK）
 
 ```js
-import { JSBridgeApp } from '@realsee/jsbridge-x/lib/app'
-import { createLive } from '@realsee/live'
-import { VRWebViewRTC } from '@realsee/live/RTC/VRWebViewRTC'
+import JSBridge from '@realsee/jsbridge-x';
+import { createLive, VRWebViewRTC } from '@realsee/live';
 
-const jsBridgeInstance = new JSBridgeApp()
+const jsBridgeInstance = new JSBridge();
 
 const rtcInstance = new VRWebViewRTC({
   jsBridge,
   getVoiceSign: () => {},
-})
+});
 
 const live = createLive({
   rtc: rtcInstance,
   getTicket: async () => '',
-})
+});
 ```
 
 提供 RTC 实例配置参数之后，语音的连接、断开、重连等逻辑就托管给了 **Live** 。您可以通过 live 实例上的 `$RTC` 命名空间访问语音相关的状态和事件。
 
 ```js
 // 状态：用户是否成功加入语音房间
-live.$RTC.joined
+live.$RTC.joined;
 // 状态：用户麦克风状态
-live.$RTC.micro
+live.$RTC.micro;
 // 监听用户音量变化
-live.$RTC.on('userVolumes', (userVolumes) => {})
+live.$RTC.on('userVolumes', (userVolumes) => {});
 ```
 
 ## 浏览器端支持
@@ -302,17 +302,16 @@ yarn add trtc-js-sdk
 使用方式：
 
 ```tsx
-import { createLive } from '@realsee/live'
-import { BrowserRTC } from '@realsee/live/RTC/BrowserRTC'
+import { createLive, BrowserRTC } from '@realsee/live';
 
 const rtcInstance = new VRWebViewRTC({
   getVoiceSign: () => {},
-})
+});
 
 const live = createLive({
   rtc: rtcInstance,
   getTicket: async () => '',
-})
+});
 ```
 
 ### Chime
@@ -327,17 +326,16 @@ yarn add amazon-chime-sdk-js
 使用方式：
 
 ```tsx
-import { createLive } from '@realsee/live'
-import { BrowserRTC4Chime } from '@realsee/live/RTC/BrowserRTC4Chime'
+import { createLive, BrowserRTC4Chime } from '@realsee/live';
 
 const rtcInstance = new BrowserRTC4Chime({
   getVoiceSign: () => {},
-})
+});
 
 const live = createLive({
   rtc: rtcInstance,
   getTicket: async () => '',
-})
+});
 ```
 
 ## TypeScript & React 支持
@@ -350,57 +348,57 @@ const live = createLive({
 步骤一：新建文件 `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
-  }
+    panoIndex: number;
+    fov: number;
+    mode: 'Panorama' | 'Model';
+    latitude: number;
+    longitude: number;
+  };
 }
 
 /** 通过 `createLiveReact()` 函数创建实例*/
 
 const LiveReact = createLiveReact<Snapshot>({
   getTicket: async () => '' /* 必须提供 */,
-})
+});
 
-export default LiveReact
+export default LiveReact;
 
 /** 如果您不喜欢 `LiveReact.LiveProvider` 这类编程习惯，可以将需要的函数"抛"出来 */
-export const LiveProvider = LiveReact.LiveProvider
-export const useConnect = LiveReact.useConnect
-export const useKeyframe = LiveReact.useKeyframe
+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) 上下文环境中。
 
 ```jsx
-import { LiveProvider } from './LiveReact'
+import { LiveProvider } from './LiveReact';
 
 ReactDOM.render(
   <LiveProvider>
     <RootApp />
   </LiveProvider>,
-  containter
-)
+  containter,
+);
 ```
 
 步骤三：在您的 `React` 函数组件中使用相关 `Hooks` 函数。
 
 ```jsx
-import { useConnect } from './LiveReact'
+import { useConnect } from './LiveReact';
 
 function ReconnectBtn() {
-  const connect = useConnect()
+  const connect = useConnect();
 
-  return <button onClick={() => connect()}>重新连接</button>
+  return <button onClick={() => connect()}>重新连接</button>;
 }
 ```