larksr_websdk 3.3.104 → 3.3.106

package/dist/doc/en/index.md

@@ -1,115 +0,0 @@
-# LarkSR WebClient SDK
-
-Develop webclient for LarkSR cloudrending or LarkSR VR monitor client. Free design UI and define operate.
-
-Links：
-
-[Paraverse](https://www.paraverse.cc/)
-
-[LarkSR Doc](https://www.pingxingyun.com/devCenter.html)
-
-[Experience](https://www.paraverse.cc/)
-
-SDK include:
-
-* LarkSR restful request.
-* CloudRending Video.
-* Handle input, keyboard, gamepad, touchscreen.
-* Scale mode.
-* Fullscreen mode.
-* Landscap mode.
-
-### Notice
-
-> SDK V3.2.30 only support server version above [V3.2.3.1](https://www.pingxingyun.com/devCenter.html)
-> [Old verion SDK Demo](https://github.com/ParaverseTechnology/lark_sr_websdk_demos/releases/tag/V3.2.10)
-> V3.2.314 server and datachannel above 3.2.5.1
-
-## Quick Start
-
-### install
-
-1. npm
-
-```cmd
-npm i larksr_websdk
-```
-
-2. plain html
-
-```html
-<script src="larksr-web-sdk.min.js"></script>
-```
-
-### Use
-
-Import websdk with plain html SDK under global object larksr_websdk.
-
-Connect cloud resource and all event access with new LarkSR object.
-
-> SDK default config html 100% height 100% width viewport. Auto handle input.
-
-> SDK mainly contain loading page and cloud video page no other ui.efore start:
-
-1. Lark SR server address, exp：http://222.128.6.137:8181/
-2. SDK auth code，connect business@pingxingyun.com or register https://www.pingxingyun.com/console/#/
-3. App id from Lark SR admin server applist.
-
-```javascript
-var client = new LarkSR({ 
-    // root html element
-    // WARNING not document.documentElement
-    rootElement: document.getElementById('container'),
-    // Sever address
-    serverAddress: "Lark Sever address",
-    // SDK ID or set by call initSDKAuthCode
-    // authCode: 'your SDK ID',
-    // test backgroud url
-    // loadingBgUrl: 'https://home-obs.pingxingyun.com/homePage_4_0/bg.jpg',
-});
-```
-
-Set sdk auth code.
-
-```javascript
-client.initSDKAuthCode('Your SDK ID')
-.then(() => {
-    // start connect;
-    client.connect({
-        // LarkSR cloud appid from LarkSR admin server.
-        // doc
-        // https://www.pingxingyun.com/online/api3_2.html?id=476
-        appliId: "appid from LarkSR admin"
-    })
-    .then(() => {
-        console.log('enter success');
-    })
-    .catch((e) => {
-        console.error(e);
-    }); 
-})
-.catch((e) => {
-    console.error(e);
-});
-// ...
-// close connection.
-// client.close();
-// release DOM element.
-// client.destroy();
-```
-
-### Doc
-
-[LarkSR WebClient SDK](https://pingxingyun.github.io/en/webclient_sdk/)
-
-
-## Index
-
-### [Config](./config.md)
-### [LarkSR functions](./functions.md)
-### [LarkSR events](./events.md)
-### [LarkSR event codes](./event_codes.md)
-### [LarkSR member varibales](./member_variables.md)
-### [SDK ID encryption](./sdkid_encryption.md)
-### [Multi media share](./multi_media_3_2_401.md)
-### [SDK Update](./update.md)

package/dist/doc/en/member_variables.md

@@ -1,403 +0,0 @@
-# LarkSR Object Member Variables
-
-LarkSR object member variables. Note that variables starting with an underscore are internal private variables or read-only member variables and are not recommended for direct modification or use.
-
-> In the following code, `larksr` is an instance of the created LarkSR object. The creation process is omitted.
-
-```javascript
-let larksr;
-
-// ... create code.
-```
-
-## Video Component
-
-1. `videoComponent` Video Component
-
-```javascript
-// Get the <video /> video element being played
-larksr.videoComponent.getVideo();
-// Play the video, async method throws an exception if playback fails
-larksr.videoComponent.playVideo();
-// Stop video playback
-larksr.videoComponent.stopVideo();
-// Play video sound, unmute playback
-larksr.videoComponent.sountPlayout();
-// Capture a frame, return base64, and throw a screenshot success event
-larksr.videoComponent.captrueFrame(data);
-```
-
-2. videoElement HTML video video element itself
-
-```javascript
-larksr.videoElement;
-```
-
-3. Control Display Elements
-
-```javascript
-// Whether to show touch points on mobile
-larksr.isEnableTouchPoint = false;
-// Whether to show bottom text during loading screen
-larksr.isEnableLoadingStateBar = false;
-```
-
-```javascript
-// Set zoom mode
-larksr.scaleMode = ScaleMode.CONTAIN_APP;
-```
-
-4. Virtual Mouse and Touch Points
-
-```javascript
-/**
- * Current position of the virtual mouse, relative to the overall container
- */
-larksr.virtualCursorPosition
-/**
- * Current position of the virtual mouse, internal zoom container, same as the actual display virtual mouse CSS style
- */
-larksr.virtualCursorPositionRaw
-```
-
-Example:
-
-The following example code uses React to demonstrate clicking a button to synchronize the position of an outer element and the virtual mouse.
-
-```javascript
-// ....
-// Omitted React creation code
-export default class App extends React.Component {
-    private state: any = {
-        pointPosition: {
-            x: 0,
-            y: 0,
-        }
-    };
-    // ....
-    // Omitted larksr creation process and other code
-    render() {
-        return (
-            <div>
-                // ...
-                // Omitted other elements
-                <div style={{
-                        zIndex: 1000,
-                        position: 'absolute', 
-                        left: this.state.pointPosition.x, 
-                        top: this.state.pointPosition.y,
-                        backgroundColor: "red",
-                        width: 50,
-                        height: 50,
-                        borderRadius: "50%"
-                    }}>
-                </div>
-                <button style={{pointerEvents: "all"}} 
-                    onClick={()=>{
-                        // Get the position of the virtual mouse
-                        console.log("touch point", this.larksr.virtualCursorPosition);
-                        // Synchronize the position of the virtual mouse
-                        this.setState({
-                            pointPosition: this.larksr.virtualCursorPosition,
-                        })
-                    }}
-                    >
-                    touchPoint
-                </button>
-            </div>
-        )
-    }
-}
-```
-
-## Configuration Parameters
-
-```javascript
-// `config` ILarkSRConfig object passed in IAppliParams
-larksr.config;
-// `params` IAppliParams object passed in the constructor
-larksr.params;
-```
-
-## User Mode
-
-```javascript
-// `playerModeType` Current player mode;
-larksr.playerModeType;
-// `userType` Current user type;
-larksr.userType;
-// Whether it is currently in interactive mode, the default interactive mode is operable
-larksr.isInteractiveMode;
-// Whether it is observer mode
-larksr.isObMode;
-```
-
-## Current App State
-
-```javascript
-larksr.appState;
-```
-
-Specific state values are as follows:
-
-```javascript
-export enum APP_STATE {
-    BEFORE_CREATE = 0,
-    INITED,
-    WEBSOCKET_CHANNEL_OPEN,
-    LOGIN_SUCCESS,
-    RTC_CONNECTED,
-    MEDIA_LOADED,
-    MEDIA_PLAED,
-    RTC_RETRY,
-    APP_RETRY,
-    BEFORE_DESTORY,
-    WEBSOCKET_CLOSED,
-    RTC_CLOSED,
-    DESTROYED,
-}
-```
-
-You can listen to the APP_STATE changes through the event APPSTATE_CHANGE = 'appstatechange'.
-
-```javascript
-// create code
-...
-
-// Listen to the connection success event
-larksr.on('appstatechange', function(e) { 
-    console.log("appstatechange", e); 
-});
-```
-
-## Whether the Cloud Screen is Ready
-
-```javascript
-// Whether the cloud screen is ready, input events can only be sent after it is ready
-larksr.remoteScreenReady
-```
-
-## Current Screen State
-
-```javascript
-// Notify viewport change or need to recalculate display properties
-larksr.screenState.resize();
-// Current size of the cloud app
-larksr.screenState.appSize;
-// Current mouse state of the cloud app
-larksr.screenState.appMouseMode;
-// Current size of the rendering container
-larksr.screenState.viewPort;
-// Force landscape mode
-larksr.screenState.screenOrientation;
-// Zoom mode
-larksr.screenState.scaleMode;
-// Whether it is in full screen mode
-larksr.screenState.isFullScreen;
-// Whether the mouse state is locked
-larksr.screenState.isLockMouse;
-// Mouse style of the cloud app
-larksr.screenState.cursorStyle;
-// Initialize mouse mode
-larksr.screenState.initCursorMode;
-// Whether it is mobile mode
-larksr.screenState.isMobile;
-// Whether to render the local mouse
-larksr.screenState.isLocalRenderMouse;
-// Whether to lock the mouse
-larksr.screenState.isLockMosue;
-```
-
-Listen to the state changes of screenState, the event code is 0. It is called after screenState.resize() is triggered internally or externally by the SDK.
-
-```javascript
-larksr.screenState.on(0, () => {
-    console.log("screen state resize", larksr.screenState.screenOrientation);
-});
-```
-
-## Operation Class Instances
-
-```javascript
-// Start listening, automatically starts by default
-larksr.op.startListening();
-// Stop listening to input events.
-larksr.op.stopListenling();
-// Enable or disable mouse input events
-larksr.op.setMouseEnable(enable: boolean);
-// Enable or disable keyboard input events
-larksr.op.setKeyboardEnable(enable: boolean);
-// Enable or disable gamepad input events
-larksr.op.setGamepadEnable(enable: boolean);
-// Enable or disable touch screen input events
-larksr.op.setTouchEnable(enable: boolean);
-```
-
-### Keyboard Handler in Operation Class
-
-```javascript
-// Set the default interception of keyboard events to prevent the default behavior of the browser.
-// The keys in preventKeys will be intercepted, if the array is empty, all will be intercepted
-// Default interception F1 F5 F12
-larksr.op.keyboardHandler.preventKeys = [["F1", "F5", "F12"]];
-```
-
-### Gesture Handler in Operation Class
-
-gestureHandler handles the process of converting mobile touch events to mouse events.
-
-#### Adjust Touch Event Trigger Parameters
-
-```javascript
-// The speed of the mouse relative movement provided when the touch event is converted to a mouse event.
-// That is, rx = (pxNew-pxOld) * relativeMouseMoveSpeed
-//        ry = (pyNew-pyOld) * relativeMouseMoveSpeed
-// May affect the effect of cloud applications that use relative movement (rawInput) judgment
-larksr.op.gestureHandler.relativeMouseMoveSpeed = 2;
-// The judgment range for simulating clicks when touch events are converted to mouse events.
-// Actual mouse events generally do not move when clicked, but touch operations will almost certainly trigger move events
-// If you want to simulate click events on a PC, such as single or double clicks, no mouse move should be inserted between mouse down and up
-// When a move event is triggered, a move event is sent only if it exceeds this judgment range.
-// Note that modifying this value may cause single or double click failures on cloud applications, but it generally has little impact if the cloud application does not include similar operations
-larksr.op.gestureHandler.tapLimitRadius = 20;
-// Attempts to send a single click down event within this time range, modifying this value may affect the success rate of triggering single click events
-larksr.op.gestureHandler.tapLimitTimeout = 100;
-```
-
-#### Intercept Touch Event Callback
-
-You can set the specific correspondence between touch events and mouse events by intercepting the touch event callback.
-
-> Set the callback function through larksr.op.gestureHandler.gestureCallback The GESTURE_TYPE in the example below is the gesture event type exported by the SDK. If the SDK is introduced in amd mode, all exported types are under the larksr_websdk global object. If the SDK is introduced in other ways, such as importing import { GESTURE_TYPE } from 'larksr_websdk' The following example code omits the larksr creation process and other code
-
-```javascript
-// The event parameter has the following fields
-// event : {
-//      type: GESTURE_TYPE; Gesture event type
-//      x: number;          Converted to cloud coordinate x
-//      y: number;          Converted to cloud coordinate y
-//      rx: number;         Converted to cloud coordinate rx
-//      ry: number;         Converted to cloud coordinate ry
-//      edge: boolean;      Whether it reaches the touch edge
-//      rawEvent: any;      Touch event not converted to cloud coordinates
-//    }
-// 
-larksr.op.gestureHandler.gestureCallback = (event) => {
-    console.log(event);
-    const p = event;
-    switch (event.type) {
-    // Single touch starts moving the mouse to the current position
-    case GESTURE_TYPE.SINGLE_FINGER_TOUCH_START:
-        larksr.mouseMove(p.x, p.y, p.rx, p.ry);
-        break;
-    // Single finger tap -> left mouse click
-    case GESTURE_TYPE.SINGLE_FINGER_TAP:
-        larksr.mouseTap(p.x, p.y, CloudLark.MouseKey.LEFT);
-        break;
-    // Single finger tap down -> move mouse, press mouse
-    case GESTURE_TYPE.SINGLE_FINGER_TAP_DOWN:
-        // move mouse first
-        larksr.mouseMove(p.x, p.y, p.rx, p.ry);
-        // sync tap down
-        larksr.mouseDown(p.x, p.y, CloudLark.MouseKey.LEFT);
-        break;
-    // Single finger tap up -> move mouse, release mouse
-    case GESTURE_TYPE.SINGLE_FINGER_TAP_UP:
-        // move mouse first
-        larksr.moseMove(p.x, p.y, p.rx, p.ry);
-        // sync tap down
-        larksr.mouseUp(p.x, p.y, CloudLark.MouseKey.LEFT);
-        break;
-    // Single finger swipe -> move mouse
-    case GESTURE_TYPE.SINGLE_FINGER_SWIPE:
-        larksr.moseMove(p.x, p.y, p.rx, p.ry);
-        break;
-    // Single finger swipe start -> left mouse button down
-    case GESTURE_TYPE.SINGLE_FINGER_SWIPE_START:
-        // sync tap down
-        larksr.mouseDown(p.x, p.y, CloudLark.MouseKey.LEFT);
-        break;
-    // Single finger swipe end -> left mouse button up
-    case GESTURE_TYPE.SINGLE_FINGER_SWIPE_END:
-        larksr.mouseUp(p.x, p.y, CloudLark.MouseKey.LEFT);
-        break;
-    // Double finger tap -> right mouse click
-    case GESTURE_TYPE.DOUBLE_FINGER_TAP:
-        larksr.mouseTap(p.x, p.y, CloudLark.MouseKey.RIGHT);
-        break;
-    // Double finger tap down -> move mouse
-    case GESTURE_TYPE.DOUBLE_FINGER_TAP_DOWN:
-        // move mouse first
-        larksr.moseMove(p.x, p.y, p.rx, p.ry);
-        // sync tap down
-        larksr.mouseDown(p.x, p.y, CloudLark.MouseKey.RIGHT);
-        break;
-    case GESTURE_TYPE.DOUBLE_FINGER_TAP_UP:
-        // move mouse first
-        larksr.moseMove(p.x, p.y, p.rx, p.ry);
-        // sync tap up
-        larksr.mouseUp(p.x, p.y, CloudLark.MouseKey.RIGHT);
-        break;
-    // Double finger swipe -> scroll wheel
-    case GESTURE_TYPE.DOUBLE_FINGER_SWIPE:
-        // move mouse mid
-        // this.$emitMouseWheel(p.x, p.y, e.motion.y);
-        larksr.moseMove(p.x, p.y, p.rx, p.ry);
-        break;
-    case GESTURE_TYPE.DOUBLE_FINGER_EXPAND: 
-        // Windows message deltaY up is +120 down is -120
-        // Double finger expand swipe outwards
-        // Scroll wheel down
-        // move mouse mid
-        larksr.mouseWheel(p.x, p.y, 120);
-        break;
-    case GESTURE_TYPE.DOUBLE_FINGER_SHRINK:
-        // Windows message deltaY up is +120 down is -120
-        // Double finger swipe inwards
-        // Scroll wheel up
-        larksr.mouseWheel(p.x, p.y,  -120);
-        break;
-    case GESTURE_TYPE.DOUBLE_FINGER_SWIPE_END:
-        // sync tap up
-        larksr.mouseUp(p.x, p.y, CloudLark.MouseKey.RIGHT);
-        break;
-    // Triple finger tap -> middle mouse click
-    case GESTURE_TYPE.TRIPLE_FINGER_TAP:
-        larksr.mouseTap(p.x, p.y, CloudLark.MouseKey.MIDDLE);
-        break;
-    // Triple finger swipe -> move mouse
-    case GESTURE_TYPE.TRIPLE_FINGER_SWIPE:
-        larksr.mouseMove(p.x, p.y, p.rx, p.ry);
-        break;
-    // Triple finger swipe start -> middle mouse button down
-    case GESTURE_TYPE.TRIPLE_FINGER_SWIPE_START:
-        larksr.mouseMove(p.x, p.y, p.rx, p.ry);
-        //
-        larksr.mouseDown(p.x, p.y, CloudLark.MouseKey.MIDDLE);
-        break;
-    // Triple finger swipe end -> middle mouse button up
-    case GESTURE_TYPE.TRIPLE_FINGER_SWIPE_END:
-        // sync tap up
-        larksr.mouseUp(p.x, p.y, CloudLark.MouseKey.MIDDLE);
-        break;
-    // All fingers up
-    case GESTURE_TYPE.RELEASE:
-        break;
-    default:
-        break;
-    }
-};
-```
-
-## Full Screen and Lock Screen
-
-```javascript
-// Enter full screen mode
-larksr.fullScreen.launchFullScreen();
-// Exit full screen mode
-larksr.fullScreen.exitFullscreen();
-// Lock the mouse
-larksr.lockPointer.lockPointer();
-// Release the mouse
-larksr.lockPointer.exitPointerLock();
-```

package/dist/doc/en/multi_media_3_2_401.md

@@ -1,84 +0,0 @@
-# 3.2.401
-
-> The multimedia channel feature of version 3.2.401 is enabled on rendering server 3.2.2.0+.
-
-## New Features in 3.2.401
-
-> The following sample code assumes that the `larksr` object has been initialized and connected successfully.
-> Test demo: https://github.com/ParaverseTechnology/lark_sr_websdk_demos/tree/gh-pages
-
-(1). Added multi-channel media upload feature for the Web. Use `larksr.getMediaSharePeerConnection(index)` to get the media upload channel.
-
-The index supports 0 - 5. The media operations after obtaining the media channel are the same as the previous interface. The original interface is equivalent to `getMediaSharePeerConnection(0)`.
-
-Usage example:
-
-```javascript
-larksr.getMediaSharePeerConnection(0).openVideo();
-larksr.getMediaSharePeerConnection(0).closeVideo();
-```
-
-> When connecting to an older version of the rendering server that does not support multi-channel upload, only channel 0 will work.
-
-(2). Get the connection status of a specific channel using `getStats`
-
-```javascript
-larksr.getMediaSharePeerConnection(0).getStats()
-.then((res) => {
-    console.log("state: ", res);
-})
-.catch((e) => {
-    console.log("get state failed", e);
-})
-```
-
-(3). Set the video encoding for a specific connection channel using `preferVideoCode`
-
-```javascript
-larksr.getMediaSharePeerConnection(0).preferVideoCode = 'h264';
-```
-
-> If the current browser supports the specified video encoding, it will be used preferentially. If not, the default encoding method will be used.
-> The setting will take effect the next time the video is opened. The already opened video will not change.
-
-(4). Set the video upload bitrate for a specific connection channel
-
-```javascript
-larksr.getMediaSharePeerConnection(0).codeRate = {
-        start: 1000,
-        min: 1000,
-        max: 20000,
-}
-```
-
-> The setting will take effect the next time the video is opened. The already opened video will not change.
-
-(5). Media connection channels can listen to events separately, for example:
-
-```javascript
-larksr.getMediaSharePeerConnection(0).on("rtc_state_change", function(e) {
-    console.log("ice state change", e);
-});
-```
-
-(6). The opened or saved media channel object has a separate id, 0 - 5
-
-```javascript
-larksr.getMediaSharePeerConnection(0).id
-```
-
-(7). Force the use of canvas mode, the canvas of the video channel can rotate the screen clockwise or counterclockwise
-
-Enable rotation
-
-```javascript
-larksr.getMediaSharePeerConnection(0).forceRenderToCanvas = true;
-```
-
-Force clockwise rotation
-
-```javascript
-larksr.getMediaSharePeerConnection(0).canvasRender.setRotate(true);
-```
-
-> The setting will take effect the next time the video is opened. The already opened video will not change.

package/dist/doc/en/sdkid_encryption.md

@@ -1,40 +0,0 @@
-# SDK ID Encryption Configuration
-
-To use the larksr SDK, you first need to obtain an SDK authorization code from Pingxingyun Business (business@pingxingyun.com) or at https://www.pingxingyun.com/console (note that this is not the server-side authorization code).
-
-Pass the `authCode` through larksr config or set the authorization code using the method `larksr.initSDKAuthCode('YourSDKID')`.
-
-To protect the security of the SDK ID, from server version 3.2.3.0 onwards, you can configure SDK ID encryption.
-
-Configure SDK encryption:
-
-1. First, log in to the larkxr platform backend, find System Settings -> Access Management -> SDKID Key Management to generate an SDK ID encryption key.
-
-2. Encrypt the SDK ID
-
-The following is an example in Java:
-
-```java
-public static void main(String[] args) {
-    /**
-    * @param res   The original string to be encrypted
-    * @param key   16-character key for encryption
-    */
-    try {
-        String res = "The original string to be encrypted";
-        String key = "16-character key for encryption";
-        String ALGORITHM = "AES";
-        String CHARSET = "UTF-8";
-        SecretKeySpec sks = new SecretKeySpec(key.getBytes(CHARSET), ALGORITHM);
-        Cipher cipher = Cipher.getInstance(ALGORITHM);
-        cipher.init(cipher.ENCRYPT_MODE, sks);
-        byte[] result = cipher.doFinal(res.getBytes());
-        // BASE64Encoder encoder = new BASE64Encoder();      //java8
-        Base64.Encoder encoder = Base64.getEncoder(); //java9+
-        System.out.println(encoder.encodeToString(result));
-    } catch (Exception e) {
-    }
-}
-```
-
-3. Pass the encrypted string into the lark configuration.