warpr 0.0.1

package/README.md

@@ -0,0 +1,24 @@
+# WarprLib
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project warpr-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project warpr-lib`.
+> Note: Don't forget to add `--project warpr-lib` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build warpr-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build warpr-lib`, go to the dist folder `cd dist/warpr-lib` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test warpr-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/warpr-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "warpr",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,5 @@
+<div #root class="root">
+  <canvas #renderTarget class="renderTarget"></canvas>
+
+  <div class="overlay" (click)="ToggleFullScreen()" *ngIf="IsFullScreenAvailable" title="Warpr">W</div>
+</div>

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

@@ -0,0 +1,31 @@
+.root {
+  background-color: black;
+  color: white;
+  display: flex;
+  position: relative;
+}
+
+.renderTarget {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  touch-action: none;
+}
+
+.overlay {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: rgba(255,255,255,0.75);
+  padding: 10px;
+  border-radius: 5px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+  .overlay:hover {
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+  }

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StreamHostComponent } from './stream-host.component';
+
+describe('StreamHostComponent', () => {
+  let component: StreamHostComponent;
+  let fixture: ComponentFixture<StreamHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [StreamHostComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(StreamHostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,170 @@
+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',
+  standalone: true,
+  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.SendMessage(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.SendMessage(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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,37 @@
+
+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;
+}
+
+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

@@ -0,0 +1,136 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,50 @@
+import { EventOwner, EventPublisher, EventArgs } from "../infrastructure/events";
+import { IMessagingClient } from "./messaging-client";
+
+export class WebSocketClient<TMessage> implements IMessagingClient<TMessage> {
+  private readonly _socket: WebSocket;
+  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);
+
+  constructor(uri: string) {
+    console.log(`Connecting to ${uri}...`);
+
+    let socket = new WebSocket(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 {
+    let content = JSON.stringify(message);
+    console.log(`Sending message: ${content}`);
+
+    this._socket.send(content);
+  }
+
+  protected OnConnected(): void {
+    console.log(`Connected to: ${this._socket.url}.`);
+    this._events.Raise(this.Connected, this, EventArgs.Empty);
+  }
+
+  protected OnMessageReceived(eventArgs: MessageEvent<string>): void {
+    console.log('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._socket.url}.`);
+    this._events.Raise(this.Disconnected, this, EventArgs.Empty);
+  }
+
+  protected OnError(error: Event): void {
+    console.log('Connection failed: ' + error);
+  }
+}

package/src/lib/services/messaging.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessagingService } from './messaging.service';
+
+describe('MessagingService', () => {
+  let service: MessagingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MessagingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/messaging.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { WebSocketClient } from '../networking/web-socket-client';
+import { WarprSignalingMessage, ConnectionRequest } from '../data/signaling-messages';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessagingService extends WebSocketClient<WarprSignalingMessage> {
+
+  private static readonly _connectionUri = 'api/sinks/connect';
+  private readonly _sessionId = "a5d26e70-2b61-451f-9ecb-7d1b9a76ed1b";
+
+  constructor() {
+    const uri = MessagingService.GetServerUri();
+    super(uri);
+  }
+
+  private static GetServerUri(): string {
+    const location = window.location;
+    const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+    return `${protocol}://${location.host}/${this._connectionUri}`;
+  }
+
+  protected override OnConnected(): void {
+    super.OnConnected();
+
+    let request = new ConnectionRequest();
+    request.SessionId = this._sessionId;
+    this.SendMessage(request);
+  }
+}

package/src/lib/services/streaming.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StreamingService } from './streaming.service';
+
+describe('StreamingService', () => {
+  let service: StreamingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StreamingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/streaming.service.ts

@@ -0,0 +1,150 @@
+import { Injectable } from '@angular/core';
+import { MessagingService } from './messaging.service';
+import { PeerConnectionCandidateMessage, PeerConnectionDescriptionMessage, WarprSignalingMessage, WarprSignalingMessageType } from '../data/signaling-messages';
+import { IMessagingClient } from '../networking/messaging-client';
+import { EncodedFrame, FrameType } from '../data/frames';
+import { EventOwner, EventPublisher } from '../infrastructure/events';
+import { MessageAssembler } from '../infrastructure/message-assembler';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StreamingService {
+
+  private _peerConnection?: RTCPeerConnection;
+  private _reliableConnection?: RTCDataChannel;
+  private _lowLatencyConnection?: RTCDataChannel;
+  private _messageBuilder? : MessageAssembler;
+
+  private readonly _events = new EventOwner();
+  public readonly FrameReceived = new EventPublisher<StreamingService, EncodedFrame>(this._events);
+  public readonly Connected = new EventPublisher<StreamingService, any>(this._events);
+
+  private static _config: RTCConfiguration = {
+    iceServers: [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:stun.relay.metered.ca:80" },
+      {
+        urls: "turn:global.relay.metered.ca:80",
+        username: "cb51ef701a61be3cdc89466f",
+        credential: "BBnGCvnTLaxhVbuf"
+      },
+      {
+        urls: "turn:global.relay.metered.ca:80?transport=tcp",
+        username: "cb51ef701a61be3cdc89466f",
+        credential: "BBnGCvnTLaxhVbuf"
+      },
+      {
+        urls: "turn:global.relay.metered.ca:443",
+        username: "cb51ef701a61be3cdc89466f",
+        credential: "BBnGCvnTLaxhVbuf"
+      },
+      {
+        urls: "turns:global.relay.metered.ca:443?transport=tcp",
+        username: "cb51ef701a61be3cdc89466f",
+        credential: "BBnGCvnTLaxhVbuf"
+      }
+    ]
+  };
+
+  constructor(
+    private _messagingService: MessagingService) {
+
+    _messagingService.MessageReceived.Subscribe((sender: IMessagingClient<WarprSignalingMessage>, message: WarprSignalingMessage) => this.OnMessageReceived(sender, message));
+
+    this.Reconnect();
+  }
+
+  private Reconnect() {
+    this._reliableConnection?.close();
+    this._lowLatencyConnection?.close();
+    this._peerConnection?.close();
+    this._messageBuilder = new MessageAssembler();
+
+    this._peerConnection = new RTCPeerConnection(StreamingService._config);
+    this._peerConnection.onicecandidate = (event) => this.OnIceCandidateAdded(event.candidate?.candidate);
+    this._peerConnection.ondatachannel = (event) => this.OnDataChannel(event);
+    this._peerConnection.onconnectionstatechange = (event) => this.OnConnectionStateChanged();
+  }
+  
+  public SendMessage(message: any) {
+    let json = JSON.stringify(message);
+    this._reliableConnection?.send(json);
+  }
+
+  private OnConnectionStateChanged() {
+    console.log("WebRTC: " + this._peerConnection?.connectionState);
+  }
+
+  private OnDataChannel(event: RTCDataChannelEvent) {
+    console.log(`WebRTC data channel ${event.channel.label} connected.`);
+
+    switch (event.channel.label) {
+      case "reliable":
+        this._reliableConnection = event.channel;
+        this._events.Raise(this.Connected, this, null);
+        break;
+      case "low_latency":
+        this._lowLatencyConnection = event.channel;
+        this._lowLatencyConnection.binaryType = "arraybuffer"
+        this._lowLatencyConnection.onmessage = (event) => this.OnLowLatencyMessage(event);
+        break;
+    }
+  }
+
+  private _lastRefreshTime = performance.now();
+  private _count = 0;
+
+  private OnLowLatencyMessage(event: MessageEvent<any>) {
+
+    let message = this._messageBuilder?.PushMessage(event.data as ArrayBuffer);
+    if (!message) return;
+
+    let now = performance.now();
+    let elapsed = now - this._lastRefreshTime;
+    this._count++;
+
+    if (elapsed > 1000) {
+      this._lastRefreshTime = now;
+
+      console.log(`Messages: ${this._count / elapsed * 1000} FPS`);
+      this._count = 0;
+    }
+
+    let frame = new EncodedFrame(message);
+    this._events.Raise(this.FrameReceived, this, frame);
+  }
+
+  private OnIceCandidateAdded(candidate?: string) {
+    if (candidate == null) return;
+
+    let message = new PeerConnectionCandidateMessage();
+    message.Candidate = candidate;
+    this._messagingService.SendMessage(message);
+  }
+
+  private async OnMessageReceived(sender: IMessagingClient<WarprSignalingMessage>, message: WarprSignalingMessage) {
+
+    if (!this._peerConnection) return;
+
+    switch (message.$type) {
+      case WarprSignalingMessageType.PairingCompleteMessage:
+        this.Reconnect();
+        break;
+      case WarprSignalingMessageType.PeerConnectionDescriptionMessage:
+        await this._peerConnection.setRemoteDescription({ type: "offer", sdp: message.Description });
+        let answer = await this._peerConnection.createAnswer();
+        await this._peerConnection.setLocalDescription(answer);
+
+        let answerMessage = new PeerConnectionDescriptionMessage();
+        answerMessage.Description = answer.sdp;
+        this._messagingService.SendMessage(answerMessage);
+
+        break;
+      case WarprSignalingMessageType.PeerConnectionCandidateMessage:
+        await this._peerConnection.addIceCandidate({ candidate: message.Candidate, sdpMid: "0" });
+        break;
+    }
+
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,15 @@
+/*
+ * Public API Surface of warpr-lib
+ */
+
+export * from './lib/data/frames';
+export * from './lib/data/signaling-messages';
+export * from './lib/data/streaming-messages';
+export * from './lib/infrastructure/array-stream';
+export * from './lib/infrastructure/events';
+export * from './lib/infrastructure/message-assembler';
+export * from './lib/networking/messaging-client';
+export * from './lib/networking/web-socket-client';
+export * from './lib/services/messaging.service';
+export * from './lib/services/streaming.service';
+export * from './lib/components/stream-host/stream-host.component';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}