@realsee/live 0.4.0-alpha.3 → 0.4.0-beta.1

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,38 @@ 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 () => '',
-})
+});
+```
+
+### 使用内置的 JsBridge 和 RTC 实现
+
+使用方式：
+
+```tsx
+import { createLive } from '@realsee/live';
+
+const live = createLive({
+  useBuiltInRTC: true, // 使用内置rtc
+  builtInRTCType: BuiltInRTCType.RealseeXChimeRTC, // 内置 rtc 类型，不填则默认trtc，chime请指明
+  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`));
 ```
 
 ## TypeScript & React 支持
@@ -350,57 +370,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>;
 }
 ```
 

package/dist/realsee-live.cjs.development.js

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var JSBridge = require('@realsee/jsbridge-x');
 var amazonChimeSdkJs = require('amazon-chime-sdk-js');
 var TRTC = require('trtc-js-sdk');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var JSBridge__default = /*#__PURE__*/_interopDefaultLegacy(JSBridge);
 var TRTC__default = /*#__PURE__*/_interopDefaultLegacy(TRTC);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
@@ -137,7 +139,12 @@ exports.RTCType = void 0;
     RTCType["RealseeBrowserRTC"] = "RealseeBrowserRTC";
     RTCType["RealseeVRWebViewRTC"] = "RealseeVRWebViewRTC";
     RTCType["RealseeBrowserChimeRTC"] = "RealseeBrowserChimeRTC";
-})(exports.RTCType || (exports.RTCType = {}));
+})(exports.RTCType || (exports.RTCType = {}));
+exports.BuiltInRTCType = void 0;
+(function (BuiltInRTCType) {
+    BuiltInRTCType["RealseeXTRTC"] = "trtc";
+    BuiltInRTCType["RealseeXChimeRTC"] = "chime";
+})(exports.BuiltInRTCType || (exports.BuiltInRTCType = {}));
 
 // uuid
 function S4() {
@@ -888,6 +895,12 @@ function appendUri(uri, query) {
     return uri + newQuery;
 }
 
+const userAgent = globalThis.navigator.userAgent;
+const isAndroid = /android/gi.test(userAgent);
+const isIOS = /iPhone|iPad\s+OS/gi.test(userAgent);
+const isWxMiniProgram = /MicroMessenger/gi.test(userAgent) && /miniProgram/gi.test(userAgent);
+const isRealseeVRWebview = /realsee/gi.test(userAgent);
+
 /**
  * 判断是否是真实的对象类型
  * @param value
@@ -1252,9 +1265,13 @@ function createLive(options) {
     };
     class LiveTpl extends Subscribe {
         constructor() {
-            var _a;
+            var _a, _b, _c;
             super();
             this.keyframes = new Subscribe();
+            const jsBridge = ((_a = options.jsBridge) !== null && _a !== void 0 ? _a : options.useBuiltInJsBridge)
+                ? new JSBridge__default["default"]()
+                : undefined;
+            liveController.options.jsBridge = jsBridge;
             // 没有传rtc实例时
             if (!options.rtc) {
                 // 取指定的内部rtc类型
@@ -1262,15 +1279,15 @@ function createLive(options) {
                     if (!options.getVoiceSign) {
                         throw new Error('GetVoiceSign method must be passed when using built-in RTC instances');
                     }
-                    const getVoiceSign = (_a = options.getVoiceSign) !== null && _a !== void 0 ? _a : unimplementedGetVoiceSign;
+                    const getVoiceSign = (_b = options.getVoiceSign) !== null && _b !== void 0 ? _b : unimplementedGetVoiceSign;
                     switch (options.rtcType) {
                         case exports.RTCType.RealseeVRWebViewRTC: {
                             // 内置的 VRWebViewRTC
-                            if (!options.jsBridge) {
+                            if (!jsBridge) {
                                 throw new Error('JsBridge instance must be passed when using built-in VRWebViewRTC instances');
                             }
                             liveController.options.rtc = new VRWebViewRTC({
-                                jsBridge: options.jsBridge,
+                                jsBridge,
                                 getVoiceSign,
                             });
                             break;
@@ -1295,6 +1312,30 @@ function createLive(options) {
                         }
                     }
                 }
+                // 都不满足时取内置
+                if (options.useBuiltInRTC) {
+                    if (!options.getVoiceSign) {
+                        throw new Error('GetVoiceSign method must be passed when using built-in RTC instances');
+                    }
+                    const getVoiceSign = (_c = options.getVoiceSign) !== null && _c !== void 0 ? _c : unimplementedGetVoiceSign;
+                    if (!jsBridge) {
+                        throw new Error('jsBridge instance must be passed when using built-in RTC instances');
+                    }
+                    // vrwebview 默认
+                    if ((isRealseeVRWebview && (isAndroid || isIOS)) || isWxMiniProgram) {
+                        liveController.options.rtc = new VRWebViewRTC({
+                            jsBridge,
+                            getVoiceSign,
+                        });
+                    }
+                    else {
+                        // 其它终端使用
+                        liveController.options.rtc =
+                            options.builtInRTCType === exports.BuiltInRTCType.RealseeXChimeRTC
+                                ? new BrowserRTC4Chime({ getVoiceSign })
+                                : new BrowserRTC({ getVoiceSign });
+                    }
+                }
             }
             if (!liveController.options.rtc) {
                 console.warn('unused rtc');
@@ -1342,6 +1383,9 @@ function createLive(options) {
         get $RTC() {
             return liveController.options.rtc;
         }
+        get jsBridge() {
+            return liveController.options.jsBridge;
+        }
         async setSelfInfo(userInfo) {
             if (this.readyState !== exports.WebSocketState.OPEN) {
                 return new Error('The connection is not open and ready to communicate.');
@@ -1588,6 +1632,7 @@ function createLive(options) {
 function createLiveReact(options) {
     const LiveContext = React__default["default"].createContext(null);
     const live = createLive(options);
+    const jsBridge = live.jsBridge;
     function LiveProvider(props) {
         return (React__default["default"].createElement(LiveContext.Provider, { value: props.live || live }, props.children));
     }
@@ -1783,6 +1828,7 @@ function createLiveReact(options) {
     }
     return {
         live,
+        jsBridge,
         LiveProvider,
         unsafe__useLiveInstance,
         unsafe__useRTCInstance,