@yang__yj/pixelstreaming-core 1.0.0 → 1.0.2

package/src/Inputs/TouchController.ts

@@ -0,0 +1,253 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import { Logger } from '../Logger/Logger';
+import { CoordinateConverter } from '../Util/CoordinateConverter';
+import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
+import { VideoPlayer } from '../VideoPlayer/VideoPlayer';
+import { ITouchController } from './ITouchController';
+import { EventListenerTracker } from '../Util/EventListenerTracker';
+/**
+ * Handles the Touch input Events
+ */
+export class TouchController implements ITouchController {
+    toStreamerMessagesProvider: StreamMessageController;
+    videoElementProvider: VideoPlayer;
+    coordinateConverter: CoordinateConverter;
+    videoElementParent: HTMLVideoElement;
+    fingers = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
+    fingerIds = new Map();
+    maxByteValue = 255;
+
+    // Utility for keeping track of event handlers and unregistering them
+    private touchEventListenerTracker = new EventListenerTracker();
+
+    /**
+     * @param toStreamerMessagesProvider - Stream message instance
+     * @param videoElementProvider - Video Player instance
+     * @param coordinateConverter - A coordinate converter instance
+     */
+    constructor(
+        toStreamerMessagesProvider: StreamMessageController,
+        videoElementProvider: VideoPlayer,
+        coordinateConverter: CoordinateConverter
+    ) {
+        this.toStreamerMessagesProvider = toStreamerMessagesProvider;
+        this.videoElementProvider = videoElementProvider;
+        this.coordinateConverter = coordinateConverter;
+        this.videoElementParent = videoElementProvider.getVideoElement();
+        const ontouchstart = (ev: TouchEvent) =>
+            this.onTouchStart(ev);
+        const ontouchend = (ev: TouchEvent) =>
+            this.onTouchEnd(ev);
+        const ontouchmove = (ev: TouchEvent) =>
+            this.onTouchMove(ev);
+        this.videoElementParent.addEventListener('touchstart', ontouchstart);
+        this.videoElementParent.addEventListener('touchend', ontouchend);
+        this.videoElementParent.addEventListener('touchmove', ontouchmove);
+        this.touchEventListenerTracker.addUnregisterCallback(
+            () => this.videoElementParent.removeEventListener('touchstart', ontouchstart)
+        );
+        this.touchEventListenerTracker.addUnregisterCallback(
+            () => this.videoElementParent.removeEventListener('touchend', ontouchend)
+        );
+        this.touchEventListenerTracker.addUnregisterCallback(
+            () => this.videoElementParent.removeEventListener('touchmove', ontouchmove)
+        );
+        Logger.Log(Logger.GetStackTrace(), 'Touch Events Registered', 6);
+
+        // is this strictly necessary?
+        const preventOnTouchMove = (event: TouchEvent) => {
+            event.preventDefault();
+        };
+        document.addEventListener('touchmove', preventOnTouchMove);
+        this.touchEventListenerTracker.addUnregisterCallback(
+            () => document.removeEventListener('touchmove', preventOnTouchMove)
+        );
+    }
+
+    /**
+     * Unregister all touch events
+     */
+    unregisterTouchEvents() {
+        this.touchEventListenerTracker.unregisterAll();
+    }
+
+    /**
+     * Remember a touch command
+     * @param touch - the touch command
+     */
+    rememberTouch(touch: Touch) {
+        const finger = this.fingers.pop();
+        if (finger === undefined) {
+            Logger.Log(
+                Logger.GetStackTrace(),
+                'exhausted touch identifiers',
+                6
+            );
+        }
+        this.fingerIds.set(touch.identifier, finger);
+    }
+
+    /**
+     * Forgets a touch command
+     * @param touch - the touch command
+     */
+    forgetTouch(touch: Touch) {
+        this.fingers.push(this.fingerIds.get(touch.identifier));
+        // Sort array back into descending order. This means if finger '1' were to lift after finger '0', we would ensure that 0 will be the first index to pop
+        this.fingers.sort(function (a, b) {
+            return b - a;
+        });
+        this.fingerIds.delete(touch.identifier);
+    }
+
+    /**
+     * When a touch event starts
+     * @param touchEvent - the touch event being intercepted
+     */
+    onTouchStart(touchEvent: TouchEvent) {
+        if (!this.videoElementProvider.isVideoReady()) {
+            return;
+        }
+        for (let t = 0; t < touchEvent.changedTouches.length; t++) {
+            this.rememberTouch(touchEvent.changedTouches[t]);
+        }
+        Logger.Log(Logger.GetStackTrace(), 'touch start', 6);
+
+        this.emitTouchData('TouchStart', touchEvent.changedTouches);
+        touchEvent.preventDefault();
+    }
+
+    /**
+     * When a touch event ends
+     * @param touchEvent - the touch event being intercepted
+     */
+    onTouchEnd(touchEvent: TouchEvent) {
+        if (!this.videoElementProvider.isVideoReady()) {
+            return;
+        }
+        Logger.Log(Logger.GetStackTrace(), 'touch end', 6);
+        this.emitTouchData('TouchEnd', touchEvent.changedTouches);
+        // Re-cycle unique identifiers previously assigned to each touch.
+        for (let t = 0; t < touchEvent.changedTouches.length; t++) {
+            this.forgetTouch(touchEvent.changedTouches[t]);
+        }
+        touchEvent.preventDefault();
+    }
+
+    /**
+     * when a moving touch event occurs
+     * @param touchEvent - the touch event being intercepted
+     */
+    onTouchMove(touchEvent: TouchEvent) {
+        if (!this.videoElementProvider.isVideoReady()) {
+            return;
+        }
+        Logger.Log(Logger.GetStackTrace(), 'touch move', 6);
+        this.emitTouchData('TouchMove', touchEvent.touches);
+        touchEvent.preventDefault();
+    }
+
+    emitTouchData(type: string, touches: TouchList) {
+
+        // 计算手机触屏ue
+        // 问题来源：最开始触屏传参是为手机当前可视化内容区域内的px 因为手机的1px并不是一个像素，
+        // 如（600*300） 导致跟ue触屏位置不准确
+        // 解决：将手机px转换为物理分辨率，根据分辨率来计算位置
+
+        // 目前是页面强制横屏 所以触屏的x，y轴都不变，需要转换才能
+        let screen = document.querySelector(".screen");
+        // ue 宽分辨率
+        let ueWidth = Math.floor(
+            screen.getBoundingClientRect().width * window.devicePixelRatio
+        );
+        // ue 高分辨率
+        let ueHeight = Math.floor(
+            screen.getBoundingClientRect().height * window.devicePixelRatio
+        );
+        // 总宽分辨率
+        let ratioWidth = Math.floor(window.screen.width * window.devicePixelRatio);
+        // 总高分辨率
+        let ratioHeight = Math.floor(window.screen.height * window.devicePixelRatio);
+        // 计算导航栏的分辨率
+        let headWidth =
+            ratioWidth -
+            Math.floor(document.documentElement.clientWidth * window.devicePixelRatio);
+        // 计算导航栏的分辨率
+        let headHeight =
+            ratioHeight -
+            Math.floor(document.documentElement.clientHeight * window.devicePixelRatio);
+        // 固定宽
+        let clientWidth = document.querySelector(".screen").clientWidth / ueHeight;
+        // 固定高
+        let clientHeight = document.querySelector(".screen").clientHeight / ueWidth;
+
+
+        if (!this.videoElementProvider.isVideoReady()) {
+            return;
+        }
+        const offset = this.videoElementProvider.getVideoParentElement().getBoundingClientRect();
+        const toStreamerHandlers =
+            this.toStreamerMessagesProvider.toStreamerHandlers;
+
+        for (let t = 0; t < touches.length; t++) {
+            const numTouches = 1; // the number of touches to be sent this message
+            const touch = touches[t];
+            let x, y;
+            // const x = touch.clientX - offset.left;
+            // const y = touch.clientY - offset.top;
+
+            x =
+                clientHeight *
+                (Math.floor(touch.clientY * window.devicePixelRatio) -
+                    Math.floor((ratioHeight - headHeight - ueHeight) / 2));
+            y =
+                clientWidth *
+                (ueWidth -
+                    (Math.floor(touch.clientX * window.devicePixelRatio) -
+                        Math.floor((ratioWidth - ueWidth) / 2)));
+            Logger.Log(
+                Logger.GetStackTrace(),
+                `F${this.fingerIds.get(touch.identifier)}=(${x}, ${y})`,
+                6
+            );
+
+            const coord = this.coordinateConverter.normalizeAndQuantizeUnsigned(
+                x,
+                y
+            );
+            switch (type) {
+                case 'TouchStart':
+                    toStreamerHandlers.get('TouchStart')([
+                        numTouches,
+                        coord.x,
+                        coord.y,
+                        this.fingerIds.get(touch.identifier),
+                        this.maxByteValue * touch.force,
+                        coord.inRange ? 1 : 0
+                    ]);
+                    break;
+                case 'TouchEnd':
+                    toStreamerHandlers.get('TouchEnd')([
+                        numTouches,
+                        coord.x,
+                        coord.y,
+                        this.fingerIds.get(touch.identifier),
+                        this.maxByteValue * touch.force,
+                        coord.inRange ? 1 : 0
+                    ]);
+                    break;
+                case 'TouchMove':
+                    toStreamerHandlers.get('TouchMove')([
+                        numTouches,
+                        coord.x,
+                        coord.y,
+                        this.fingerIds.get(touch.identifier),
+                        this.maxByteValue * touch.force,
+                        coord.inRange ? 1 : 0
+                    ]);
+                    break;
+            }
+        }
+    }
+}

package/src/Inputs/XRGamepadController.ts

@@ -0,0 +1,126 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+import { StreamMessageController } from '../UeInstanceMessage/StreamMessageController';
+import { Controller } from './GamepadTypes';
+import { WebXRUtils } from '../Util/WebXRUtils';
+
+/**
+ * The class that handles the functionality of xrgamepads and controllers
+ */
+export class XRGamepadController {
+    controllers: Array<Controller>;
+    toStreamerMessagesProvider: StreamMessageController;
+
+    /**
+     * @param toStreamerMessagesProvider - Stream message instance
+     */
+    constructor(toStreamerMessagesProvider: StreamMessageController) {
+        this.toStreamerMessagesProvider = toStreamerMessagesProvider;
+        this.controllers = [];
+    }
+
+    updateStatus(
+        source: XRInputSource,
+        frame: XRFrame,
+        refSpace: XRReferenceSpace
+    ) {
+        if (source.gamepad) {
+            const gamepadPose = frame.getPose(source.gripSpace, refSpace);
+            if (!gamepadPose) {
+                return;
+            }
+
+            let system = 0;
+            if (source.profiles.includes('htc-vive')) {
+                system = 1;
+            } else if (source.profiles.includes('oculus-touch')) {
+                system = 2;
+            }
+            // TODO (william.belcher): Add other profiles (Quest, Microsoft Mixed Reality, etc)
+            this.toStreamerMessagesProvider.toStreamerHandlers.get('XRSystem')([
+                system
+            ]);
+
+            // Default: AnyHand (2)
+            let handedness = 2;
+            switch (source.handedness) {
+                case 'left':
+                    handedness = 0;
+                    break;
+                case 'right':
+                    handedness = 1;
+                    break;
+            }
+
+            // Send controller transform
+            const matrix = gamepadPose.transform.matrix;
+            const mat = [];
+            for (let i = 0; i < 16; i++) {
+                mat[i] = new Float32Array([matrix[i]])[0];
+            }
+
+            // prettier-ignore
+            this.toStreamerMessagesProvider.toStreamerHandlers.get('XRControllerTransform')([
+                mat[0], mat[4], mat[8], mat[12],
+                mat[1], mat[5], mat[9], mat[13],
+                mat[2], mat[6], mat[10], mat[14],
+                mat[3], mat[7], mat[11], mat[15],
+                handedness
+            ]);
+
+            // Handle controller buttons and axes
+            if (this.controllers[handedness] === undefined) {
+                this.controllers[handedness] = {
+                    prevState: undefined,
+                    currentState: undefined,
+					id: undefined
+                };
+                this.controllers[handedness].prevState =
+                    WebXRUtils.deepCopyGamepad(source.gamepad);
+            }
+
+            this.controllers[handedness].currentState =
+                WebXRUtils.deepCopyGamepad(source.gamepad);
+
+            const controller = this.controllers[handedness];
+            const currState = controller.currentState;
+            const prevState = controller.prevState;
+            // Iterate over buttons
+            for (let i = 0; i < currState.buttons.length; i++) {
+                const currButton = currState.buttons[i];
+                const prevButton = prevState.buttons[i];
+
+                if (currButton.pressed) {
+                    // press
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
+                        'XRButtonPressed'
+                    )([handedness, i, prevButton.pressed ? 1 : 0]);
+                } else if (!currButton.pressed && prevButton.pressed) {
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
+                        'XRButtonReleased'
+                    )([handedness, i, 0]);
+                }
+
+                if (currButton.touched && !currButton.pressed) {
+                    // press
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
+                        'XRButtonPressed'
+                    )([handedness, 3, prevButton.touched ? 1 : 0]);
+                } else if (!currButton.touched && prevButton.touched) {
+                    this.toStreamerMessagesProvider.toStreamerHandlers.get(
+                        'XRButtonReleased'
+                    )([handedness, 3, 0]);
+                }
+            }
+
+            // Iterate over gamepad axes
+            for (let i = 0; i < currState.axes.length; i++) {
+                this.toStreamerMessagesProvider.toStreamerHandlers.get(
+                    'XRAnalog'
+                )([handedness, i, currState.axes[i]]);
+            }
+
+            this.controllers[handedness].prevState = currState;
+        }
+    }
+}

package/src/Logger/Logger.ts

@@ -0,0 +1,80 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+export class Logger {
+    static verboseLogLevel = 5;
+
+    /**
+     * Captures the stack and returns it
+     * @returns the current stack
+     */
+    static GetStackTrace() {
+        const error = new Error();
+        let formattedStack = 'No Stack Available for this browser';
+
+        // format the error
+        if (error.stack) {
+            formattedStack = error.stack.toString().replace(/Error/g, '');
+        }
+
+        return formattedStack;
+    }
+
+    /**
+     * Set the log verbosity level
+     */
+    static SetLoggerVerbosity(verboseLogLevel: number) {
+        if (this.verboseLogLevel != null) {
+            this.verboseLogLevel = verboseLogLevel;
+        }
+    }
+
+    /**
+     * The standard logging output
+     * @param stack - the stack trace
+     * @param message - the message to be logged
+     * @param verbosity - the verbosity level
+     */
+    static Log(stack: string, message: string, verbosity?: number) {
+        if (verbosity > this.verboseLogLevel) {
+            return;
+        }
+
+        const returnString = `Level: Log\nMsg: ${message}\nCaller: ${stack}`;
+        console.log(returnString);
+    }
+
+    /**
+     * The standard logging output
+     * @param stack - the stack trace
+     * @param message - the message to be logged
+     * @param verbosity - the verbosity level
+     */
+    static Info(stack: string, message: string, verbosity?: number) {
+        if (verbosity > this.verboseLogLevel) {
+            return;
+        }
+
+        const returnString = `Level: Info\nMsg: ${message}`;
+        console.info(returnString);
+    }
+
+    /**
+     * The standard logging output
+     * @param stack - the stack trace
+     * @param message - the message to be logged
+     */
+    static Error(stack: string, message: string) {
+        const returnString = `Level: Error\nMsg: ${message}\nCaller: ${stack}`;
+        console.error(returnString);
+    }
+
+    /**
+     * The standard logging output
+     * @param stack - the stack trace
+     * @param message - the message to be logged
+     */
+    static Warning(stack: string, message: string) {
+        const returnString = `Level: Warning\nCaller: ${stack}\nMsg: ${message}`;
+        console.warn(returnString);
+    }
+}