warpr 1.0.21 → 1.0.22

package/src/lib/components/stream-host/stream-host.component.ts

@@ -1,169 +0,0 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import { StreamingService } from '../../services/streaming.service';
-import { EncodedFrame, FrameType, Size } from '../../data/frames';
-import { PointerInputMessage, PointerStates, ResizeSurfaceMessage } from '../../data/streaming-messages';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'warpr-stream-host',
-  imports: [CommonModule],
-  templateUrl: './stream-host.component.html',
-  styleUrl: './stream-host.component.scss'
-})
-export class StreamHostComponent {
-
-  @ViewChild("root")
-  private _root?: ElementRef<HTMLDivElement>;
-
-  @ViewChild("renderTarget")
-  private _canvas?: ElementRef<HTMLCanvasElement>;
-  private _renderingContext: CanvasRenderingContext2D | null = null;
-
-  private _decoder: VideoDecoder;
-  private _framePending?: VideoFrame;
-  private _videoSize = Size.Empty;
-  private _displaySize = Size.Empty;
-  private _isDecoderInitialized = false;
-  private _pointerStates: PointerStates = {};
-
-  public get IsFullScreenAvailable(): boolean {
-    return document.fullscreenEnabled;
-  }
-
-  public constructor(
-    private _streamingService: StreamingService) {
-    this._streamingService.Connected.Subscribe((sender, eventArgs) => this.OnConnected());
-    this._streamingService.FrameReceived.Subscribe((sender, eventArgs) => this.OnFrameReceived(eventArgs));
-
-    this._decoder = new VideoDecoder({
-      output: (frame) => this.OnFrameDecoded(frame),
-      error: (error) => console.log(error)
-    });
-  }
-
-  private async ngAfterViewInit() {
-
-    console.log("Initializing stream host...");
-
-    let canvas = this._canvas!.nativeElement;
-    this._renderingContext = canvas.getContext("2d")!;
-    canvas.onpointerdown = (event) => this.OnPointerEvent(event);
-    canvas.onpointermove = (event) => this.OnPointerEvent(event);
-    canvas.onpointerup = (event) => this.OnPointerEvent(event);
-    canvas.onwheel = (event) => this.OnWheelEvent(event);
-    canvas.oncontextmenu = (event) => event.preventDefault();
-
-    if (this._renderingContext) {
-      console.log("Stream host initialized.");
-    }
-    else {
-      console.log("Stream host failed to initialize.");
-    }
-
-    requestAnimationFrame(() => this.RenderFrame());
-  }
-
-  private OnPointerEvent(event: PointerEvent, wheelDelta = 0) {
-    //console.log(event);
-    event.preventDefault();
-
-    if (event.type == "pointerdown") this._canvas!.nativeElement.setPointerCapture(event.pointerId);
-
-    let message = new PointerInputMessage(event, this._pointerStates, this._canvas!.nativeElement, wheelDelta);
-    //console.log(message);
-
-    this._streamingService.SendControlMessage(message);
-  }
-
-  private OnWheelEvent(event: WheelEvent) {
-    //console.log(event);
-    event.preventDefault();
-
-    let pointerEvent: PointerEvent = new PointerEvent(event.type, event);
-    this.OnPointerEvent(pointerEvent, event.deltaY);
-  }
-
-  private OnConnected() {
-    this._displaySize = Size.Empty;
-  }
-
-  private OnFrameReceived(frame: EncodedFrame) {
-    let chunk = new EncodedVideoChunk({
-      data: frame.Bytes,
-      type: frame.Type == FrameType.Key ? "key" : "delta",
-      timestamp: frame.Index
-    });
-
-    //Initialize decoder
-    let frameSize = new Size(frame.Width, frame.Height);
-
-    if (!Size.AreEqual(frameSize, this._videoSize)) {
-      console.log("Configuring decoder...");
-      this._decoder.configure({
-        codec: "hvc1.1.6.L93.B0",
-        codedWidth: frame.Width,
-        codedHeight: frame.Height,
-        hardwareAcceleration: "prefer-hardware",
-        optimizeForLatency: true
-      });
-      console.log("Decoder configured.");
-      console.log(`Resolution is ${frame.Width} x ${frame.Height}.`);
-
-      this._videoSize = frameSize;
-    }
-
-    //Decode frame
-    if (!this._isDecoderInitialized && chunk.type != "key") return;
-    this._isDecoderInitialized = true;
-
-    this._decoder.decode(chunk);
-  }
-
-  private OnFrameDecoded(frame: VideoFrame) {
-    if (this._framePending) this._framePending.close();
-    this._framePending = frame;
-    requestAnimationFrame(() => this.RenderFrame());
-  }
-
-  private RenderFrame() {
-
-    let frame = this._framePending;
-    this._framePending = undefined;
-
-    if (frame) {
-
-      //Set canvas resolution to video resolution
-      let canvas = this._canvas!.nativeElement;
-      canvas.width = frame.displayWidth;
-      canvas.height = frame.displayHeight;
-
-      //Check for control size change
-      let canvasRect = canvas.getBoundingClientRect();
-      let canvasSize = new Size(Math.round(canvasRect.width * window.devicePixelRatio), Math.round(canvasRect.height * window.devicePixelRatio));
-      if (!Size.AreEqual(canvasSize, this._displaySize)) {
-        this._displaySize = canvasSize;
-
-        console.log(`Resized to ${canvasSize.Width} x ${canvasSize.Height}`);
-        let message = new ResizeSurfaceMessage(canvasSize.Width, canvasSize.Height);
-        this._streamingService.SendControlMessage(message);
-      }
-
-      //Draw new frame
-      if (this._renderingContext) {
-        this._renderingContext.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight);
-      }
-
-      //Release memory
-      frame.close();
-    }
-  }
-
-  public ToggleFullScreen() {
-    if (document.fullscreenElement === this._root?.nativeElement) {
-      document.exitFullscreen();
-    }
-    else {
-      this._root?.nativeElement.requestFullscreen();
-    }
-  }
-}

package/src/lib/data/frames.ts

@@ -1,37 +0,0 @@
-import { ArrayStream } from "../infrastructure/array-stream";
-
-export enum FrameType {
-  Unknown,
-  Key,
-  Delta
-}
-
-export class EncodedFrame {
-  public Index: number;
-  public Type: FrameType;
-  public Width: number;
-  public Height: number;
-  public Bytes: ArrayBuffer;
-
-  public constructor(buffer: ArrayBuffer) {
-    let stream = new ArrayStream(buffer);
-
-    this.Type = stream.ReadUInt32();
-    this.Index = stream.ReadUInt32();
-    this.Width = stream.ReadUInt32();
-    this.Height = stream.ReadUInt32();
-    this.Bytes = stream.ReadBuffer();
-  }
-}
-
-export class Size {
-  public constructor(
-    public Width: number,
-    public Height: number) { }
-
-  public static Empty: Size = { Width: 0, Height: 0 };
-
-  public static AreEqual(a: Size, b: Size) {
-    return a.Width === b.Width && a.Height === b.Height;
-  }
-}

package/src/lib/data/signaling-messages.ts

@@ -1,64 +0,0 @@
-
-export enum WarprSignalingMessageType {
-  ConnectionRequest = "ConnectionRequest",
-  PairingCompleteMessage = "PairingCompleteMessage",
-  PeerConnectionDescriptionMessage = "PeerConnectionDescriptionMessage",
-  PeerConnectionCandidateMessage = "PeerConnectionCandidateMessage",
-  StreamingSourcesMessage = "StreamingSourcesMessage",
-}
-
-export class ConnectionRequest {
-  public readonly $type = WarprSignalingMessageType.ConnectionRequest;
-  public SessionId?: string;
-}
-
-export class PairingCompleteMessage {
-  public readonly $type = WarprSignalingMessageType.PairingCompleteMessage;
-
-  public IceServers?: string[];
-}
-
-export function GetConfiguration(iceServers?: string[]): RTCConfiguration {
-  let result: RTCConfiguration = {};
-  result.iceServers = new Array<RTCIceServer>();
-
-  if (iceServers) {
-    let regex = /^(?<protocol>stun|turn):(?:(?<username>\w+):(?<password>\w+)@)?(?<url>[\w\.:?=&]+)$/im;
-    for (let server of iceServers) {
-      let match = regex.exec(server);
-      if (!match || !match.groups) {
-        console.warn(`Failed to parse ICE server URI ${server}.`);
-        continue;
-      }
-
-      result.iceServers.push({
-        urls: `${match.groups['protocol']}:${match.groups['url']}`,
-        username: match.groups['username'],
-        credential: match.groups['password']
-      });
-    }
-  }
-
-  return result;
-}
-
-export class PeerConnectionDescriptionMessage {
-  public readonly $type = WarprSignalingMessageType.PeerConnectionDescriptionMessage;
-  public Description?: string;
-}
-
-export class PeerConnectionCandidateMessage {
-  public readonly $type = WarprSignalingMessageType.PeerConnectionCandidateMessage;
-  public Candidate?: string;
-}
-export class StreamingSourcesMessage {
-  public readonly $type = WarprSignalingMessageType.StreamingSourcesMessage;
-  public Sources?: string[];
-}
-
-export type WarprSignalingMessage =
-  ConnectionRequest |
-  PairingCompleteMessage |
-  PeerConnectionDescriptionMessage |
-  PeerConnectionCandidateMessage |
-  StreamingSourcesMessage;

package/src/lib/data/streaming-messages.ts

@@ -1,136 +0,0 @@
-export enum WarprStreamingMessageType {
-  PointerInputMessage = "PointerInputMessage",
-  ResizeSurfaceMessage = "ResizeSurfaceMessage"
-}
-
-export type Point = {
-  X: number;
-  Y: number;
-}
-
-export enum PointerType {
-  Unknown = "Unknown",
-  Mouse = "Mouse",
-  Pen = "Pen",
-  Touch = "Touch"
-}
-
-export enum PointerAction {
-  Unknown = "Unknown",
-  Pressed = "Pressed",
-  Moved = "Moved",
-  Released = "Released",
-  WheelChanged = "WheelChanged"
-}
-
-export enum PointerFlags {
-  None = 0,
-  LeftButton = 1,
-  MiddleButton = 2,
-  RightButton = 4,
-  Wheel = 8,
-  Captured = 16
-};
-
-export class PointerState {
-  public Buttons = 0;
-}
-
-export type PointerStates = { [key: number]: PointerState };
-
-export class PointerInputMessage {
-  public readonly $type = WarprStreamingMessageType.PointerInputMessage;
-
-  public Id = -1;
-  public Type = PointerType.Unknown;
-  public Action = PointerAction.Unknown;
-  public Position: Point = { X: 0, Y: 0 };
-  public Flags = PointerFlags.None;
-  public WheelDelta = 0;
-
-  constructor(event: PointerEvent, states: PointerStates, target: HTMLCanvasElement, wheelDelta: number) {
-
-    let state = states[event.pointerId];
-    if (state === undefined) {
-      state = new PointerState();
-      states[event.pointerId] = state;
-    }
-
-    this.Id = event.pointerId;
-
-    switch (event.pointerType) {
-      case "mouse":
-        this.Type = PointerType.Mouse;
-        break;
-      case "pen":
-        this.Type = PointerType.Pen;
-        break;
-      case "touch":
-        this.Type = PointerType.Touch;
-        break;
-      default:
-        this.Type = PointerType.Mouse;
-        break;
-    }
-
-    switch (event.type) {
-      case "pointerdown":
-        this.Action = PointerAction.Pressed;
-        state.Buttons |= 1 << event.button
-        break;
-      case "pointerup":
-        this.Action = PointerAction.Released;
-        state.Buttons &= ~(1 << event.button)
-        break;
-      case "pointermove":
-        this.Action = PointerAction.Moved;
-        break;
-      case "wheel":
-        this.Action = PointerAction.WheelChanged;
-        break;
-    }
-
-    if (state.Buttons & 1) this.Flags |= PointerFlags.LeftButton;
-    if (state.Buttons & 2) this.Flags |= PointerFlags.MiddleButton;
-    if (state.Buttons & 4) this.Flags |= PointerFlags.RightButton;
-    if (wheelDelta != 0) this.Flags |= PointerFlags.Wheel;
-    if (target.hasPointerCapture(event.pointerId)) this.Flags |= PointerFlags.Captured;
-    
-    this.Position = PointerInputMessage.GetRemotePosition(event, target);
-    this.WheelDelta = -wheelDelta;
-  }
-
-  private static GetRemotePosition(event: PointerEvent, target: HTMLCanvasElement): Point {
-    let offsetX = 0;
-    let offsetY = 0;
-    let scale = 1;
-    let canvasAspectRatio = target.clientWidth / target.clientHeight;
-    let videoAspectRatio = target.width / target.height;
-
-    if (videoAspectRatio > canvasAspectRatio) {
-      offsetY = 0.5 * (target.clientHeight - target.clientWidth / videoAspectRatio);
-      scale = target.width / target.clientWidth;
-    } else {
-      offsetX = 0.5 * (target.clientWidth - target.clientHeight * videoAspectRatio);
-      scale = target.height / target.clientHeight;
-    }
-
-    return {
-      X: (event.x - offsetX) * scale,
-      Y: (event.y - offsetY) * scale
-    };
-  }
-}
-
-export class ResizeSurfaceMessage {
-  public readonly $type = WarprStreamingMessageType.ResizeSurfaceMessage;
-
-  constructor(
-    public Width: number,
-    public Height: number
-  ) { }
-}
-
-export type WarprStreamingMessage =
-  PointerInputMessage |
-  ResizeSurfaceMessage;

package/src/lib/infrastructure/array-stream.ts

@@ -1,109 +0,0 @@
-export class ArrayStream {
-  private _view: DataView;
-  private _position: number;
-
-  public constructor(buffer: ArrayBuffer) {
-    this._view = new DataView(buffer);
-    this._position = 0;
-  }
-
-  public get Position(): number {
-    return this._position;
-  }
-
-  public set Position(value: number) {
-    if (value < 0 || this._view.buffer.byteLength < value) {
-      throw new RangeError("The provided value lies outside the stream's bounds.");
-    }
-
-    this._position = value;
-  }
-
-  public ReadBool(): boolean {
-    let result = this._view.getUint8(this._position) != 0;
-    this._position += 1;
-    return result;
-  }
-
-  public ReadUInt8(): number {
-    let result = this._view.getUint8(this._position);
-    this._position += 1;
-    return result;
-  }
-
-  public ReadUInt16(): number {
-    let result = this._view.getUint16(this._position, true);
-    this._position += 2;
-    return result;
-  }
-
-  public ReadUInt32(): number {
-    let result = this._view.getUint32(this._position, true);
-    this._position += 4;
-    return result;
-  }
-
-  public ReadUInt64(): bigint {
-    let result = this._view.getBigUint64(this._position, true);
-    this._position += 8;
-    return result;
-  }
-
-  public ReadInt8(): number {
-    let result = this._view.getInt8(this._position);
-    this._position += 1;
-    return result;
-  }
-
-  public ReadInt16(): number {
-    let result = this._view.getInt16(this._position, true);
-    this._position += 2;
-    return result;
-  }
-
-  public ReadInt32(): number {
-    let result = this._view.getInt32(this._position, true);
-    this._position += 4;
-    return result;
-  }
-
-  public ReadInt64(): bigint {
-    let result = this._view.getBigInt64(this._position, true);
-    this._position += 8;
-    return result;
-  }
-
-  public ReadSingle(): number {
-    let result = this._view.getFloat32(this._position, true);
-    this._position += 4;
-    return result;
-  }
-
-  public ReadDouble(): number {
-    let result = this._view.getFloat64(this._position, true);
-    this._position += 8;
-    return result;
-  }
-
-  public ReadBuffer(): ArrayBuffer {
-    let length = this.ReadUInt32();
-    let result = this._view.buffer.slice(this._position, this._position + length);
-    this._position += length;
-    return result;
-  }
-
-  public ReadToEnd(): ArrayBuffer {
-    let length = this._view.buffer.byteLength - this._position;
-    let result = this._view.buffer.slice(this._position, this._position + length);
-    this._position += length;
-    return result;
-  }
-
-  public ReadString() {
-    let length = this.ReadUInt32();
-    let decoder = new TextDecoder();
-    let result = decoder.decode(this._view.buffer.slice(this._position, this._position + length));
-    this._position += length;
-    return result;
-  }
-}

package/src/lib/infrastructure/events.ts

@@ -1,61 +0,0 @@
-export type EventHandler<TSender, TEventArgs> = (sender: TSender, eventArgs: TEventArgs) => void;
-
-export interface IEventSource {
-
-  Unsubscribe(token: symbol): void;
-}
-
-export class EventSubscription {
-
-  constructor(
-    private _owner: IEventSource,
-    private _token: symbol) { }
-
-  Unsubscribe() {
-    this._owner.Unsubscribe(this._token);
-  }
-}
-
-export class EventOwner {
-
-  public readonly Token = Symbol();
-
-  Raise<TSender, TEventArgs>(event: EventPublisher<TSender, TEventArgs>, sender: TSender, eventArgs: TEventArgs) {
-    event.Raise(this, sender, eventArgs);
-  }
-}
-
-export class EventArgs {
-  public static readonly Empty = new EventArgs();
-}
-
-export class EventPublisher<TSender, TEventArgs> implements IEventSource {
-
-  private readonly _token: symbol;
-  private readonly _handlers = new Map<symbol, EventHandler<TSender, TEventArgs>>;
-
-  constructor(owner: EventOwner) {
-    this._token = owner.Token;
-  }
-
-  Subscribe(handler: EventHandler<TSender, TEventArgs>) {
-    const token = Symbol();
-    this._handlers.set(token, handler);
-    return new EventSubscription(this, token);
-  }
-
-  Raise(owner: EventOwner, sender: TSender, eventArgs: TEventArgs): void {
-    if (owner.Token === this._token) {
-      for (let [symbol, handler] of this._handlers) {
-        handler(sender, eventArgs);
-      }
-    }
-    else {
-      throw Error("Cannot raise event: this event source does not belong to the specified owner.");
-    }
-  }
-
-  Unsubscribe(token: symbol): void {
-    this._handlers.delete(token);
-  }
-}

package/src/lib/infrastructure/message-assembler.ts

@@ -1,60 +0,0 @@
-import { ArrayStream } from "./array-stream";
-
-class MessageBuilder {
-  public readonly FragmentCount: number;
-  public FragmentsReady: number = 0;
-  public Buffer: Uint8Array;
-
-  constructor(
-    public readonly Id: number,
-    public readonly Size: number,
-    public readonly FragmentSize: number
-  ) {
-    this.FragmentCount = Math.ceil(Size / FragmentSize);
-    this.Buffer = new Uint8Array(Size);
-  }
-
-  AddFragment(index: number, buffer: Uint8Array): boolean {
-    if (this.FragmentCount == this.FragmentsReady) throw RangeError("All message parts have been already collected.");
-
-    this.Buffer.set(buffer, this.FragmentSize * index);
-    this.FragmentsReady++;
-
-    return this.FragmentCount == this.FragmentsReady;
-  }
-}
-
-export class MessageAssembler {
-
-  private _builders = new Map<number, MessageBuilder>();
-
-  public constructor(private _maxBuilderCount = 3) { }
-
-  public PushMessage(buffer: ArrayBuffer): ArrayBuffer | null {
-    let stream = new ArrayStream(buffer);
-    let messageIndex = stream.ReadUInt32();
-    let messageSize = stream.ReadUInt32();
-    let fragmentSize = stream.ReadUInt32();
-    let fragmentIndex = stream.ReadUInt32();
-    let fragment = new Uint8Array(stream.ReadToEnd());
-
-    let builder = this._builders.get(messageIndex);
-    if (builder === undefined) {
-      builder = new MessageBuilder(messageIndex, messageSize, fragmentSize);
-      this._builders.set(messageIndex, builder);
-
-      if (this._builders.size > this._maxBuilderCount) {
-        let [oldest] = this._builders.keys();
-        this._builders.delete(oldest);
-        console.log("Message lost.");
-      }
-    }
-
-    if (builder.AddFragment(fragmentIndex, fragment)) {
-      this._builders.delete(messageIndex);
-      return builder.Buffer.buffer;
-    } else {
-      return null;
-    }
-  }
-}

package/src/lib/networking/messaging-client.ts

@@ -1,7 +0,0 @@
-import { EventPublisher } from "../infrastructure/events";
-
-export interface IMessagingClient<TMessage> {
-  readonly MessageReceived: EventPublisher<IMessagingClient<TMessage>, TMessage>;
-
-  SendMessage(message: TMessage): void;
-}

package/src/lib/networking/web-socket-client.ts

@@ -1,55 +0,0 @@
-import { EventOwner, EventPublisher, EventArgs } from "../infrastructure/events";
-import { IMessagingClient } from "./messaging-client";
-
-export class WebSocketClient<TMessage> implements IMessagingClient<TMessage> {
-  private readonly _events = new EventOwner();
-
-  public readonly Connected = new EventPublisher<IMessagingClient<TMessage>, EventArgs>(this._events);
-  public readonly MessageReceived = new EventPublisher<IMessagingClient<TMessage>, TMessage>(this._events);
-  public readonly Disconnected = new EventPublisher<IMessagingClient<TMessage>, EventArgs>(this._events);
-
-  private _socket?: WebSocket;
-
-  constructor(private _uri: string) { }
-
-  Connect(): void {
-    console.log(`Connecting to ${this._uri}...`);
-
-    let socket = new WebSocket(this._uri);
-    socket.onopen = () => this.OnConnected();
-    socket.onmessage = (e: MessageEvent<string>) => this.OnMessageReceived(e);
-    socket.onclose = () => this.OnDisconnected();
-    socket.onerror = (e: Event) => this.OnError(e);
-    this._socket = socket;
-  }
-
-  SendMessage(message: TMessage): void {
-    if (!this._socket) return;
-
-    let content = JSON.stringify(message);
-    console.debug(`Sending message: ${content}`);
-
-    this._socket.send(content);
-  }
-
-  protected OnConnected(): void {
-    console.log(`Connected to: ${this._uri}.`);
-    this._events.Raise(this.Connected, this, EventArgs.Empty);
-  }
-
-  protected OnMessageReceived(eventArgs: MessageEvent<string>): void {
-    console.debug('Message received: ' + eventArgs.data);
-
-    let message = JSON.parse(eventArgs.data) as TMessage;
-    this._events.Raise(this.MessageReceived, this, message);
-  }
-
-  protected OnDisconnected(): void {
-    console.log(`Disconnected from: ${this._uri}.`);
-    this._events.Raise(this.Disconnected, this, EventArgs.Empty);
-  }
-
-  protected OnError(error: Event): void {
-    console.log('Connection failed: ' + error);
-  }
-}