@realsee/live 0.6.15 → 0.7.0

package/README.md

@@ -40,14 +40,14 @@ yarn add @realsee/live
 简单使用样例（先不考虑实时语音能力）：
 
 ```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` 实例时配置了两个参数：
@@ -80,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` 属性来获取当前所有序列帧数据的"快照"。
@@ -96,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) => {})
 ```
 
 ### 广播消息
@@ -116,16 +116,13 @@ 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) 文档 。
@@ -140,8 +137,8 @@ live.on('broadcast', (data /* 广播的数据 */) => {});
 
 ```ts
 live.on('ws.readyStateUpdate', (readyState: WebSocketState) => {
-  console.log(readyState); // readyState 即是最新的 WebScoket 状态
-});
+  console.log(readyState) // readyState 即是最新的 WebScoket 状态
+})
 ```
 
 ### WebSocket 事件
@@ -203,8 +200,8 @@ live.on('ws.readyStateUpdate', (readyState: WebSocketState) => {
 
 ```ts
 live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
-  console.log(userVolumes); // userVolumes 正在说话的用户及其音量数据。
-});
+  console.log(userVolumes) // userVolumes 正在说话的用户及其音量数据。
+})
 ```
 
 ### 异常处理
@@ -257,31 +254,31 @@ live.$RTC.on('userVolumes', (userVolumes: UserVolume[]) => {
 如果是 iOS/Android App（已接入如视 VRTC 容器 SDK）
 
 ```js
-import JSBridge from '@realsee/jsbridge-x';
-import { createLive, VRWebViewRTC } from '@realsee/live';
+import JSBridge from '@realsee/jsbridge-x'
+import { createLive, VRWebViewRTC } from '@realsee/live'
 
-const jsBridgeInstance = new JSBridge();
+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,16 +299,16 @@ yarn add trtc-js-sdk
 使用方式：
 
 ```tsx
-import { createLive, BrowserRTC } from '@realsee/live';
+import { createLive, BrowserRTC } from '@realsee/live'
 
 const rtcInstance = new VRWebViewRTC({
   getVoiceSign: () => {},
-});
+})
 
 const live = createLive({
   rtc: rtcInstance,
   getTicket: async () => '',
-});
+})
 ```
 
 ### Chime
@@ -326,16 +323,16 @@ yarn add amazon-chime-sdk-js
 使用方式：
 
 ```tsx
-import { createLive, BrowserRTC4Chime } from '@realsee/live';
+import { createLive, BrowserRTC4Chime } from '@realsee/live'
 
 const rtcInstance = new BrowserRTC4Chime({
   getVoiceSign: () => {},
-});
+})
 
 const live = createLive({
   rtc: rtcInstance,
   getTicket: async () => '',
-});
+})
 ```
 
 ### 使用内置的 JsBridge 和 RTC 实现
@@ -343,7 +340,7 @@ const live = createLive({
 使用方式：
 
 ```tsx
-import { createLive } from '@realsee/live';
+import { createLive } from '@realsee/live'
 
 const live = createLive({
   useBuiltInRTC: true, // 使用内置rtc
@@ -351,13 +348,11 @@ const live = createLive({
   useBuiltInJsBridge: true, // 使用内置的jsBridge
   getVoiceSign, // 内置的rtc还是要把 getVoiceSign 方法传递进去
   getTicket: async () => '' /* 必须提供 */,
-});
+})
 
 // 可以直接使用里面的 jsBridge, 该实例由 @realsee/jsbridge-x 提供支持
-const jsBridge = live.jsBridge;
-jsBridge
-  .ready()
-  .then(() => console.info(`${jsBridge.webViewType} jsBridge is ready`));
+const jsBridge = live.jsBridge
+jsBridge.ready().then(() => console.info(`${jsBridge.webViewType} jsBridge is ready`))
 ```
 
 ## TypeScript & React 支持
@@ -370,57 +365,57 @@ jsBridge
 步骤一：新建文件 `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,
-);
+)
 ```
 
 步骤三：在您的 `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>
 }
 ```