warpr 0.0.1 → 1.0.9

package/README.md

@@ -1,24 +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.
+# 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

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

package/package.json

@@ -1,12 +1,14 @@
 {
-  "name": "warpr",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
+    "name":  "warpr",
+    "version":  "1.0.9",
+    "license":  "MPL-2.0",
+    "description":  "Warper is a WebRTC based ultra-low latency video streaming library.",
+    "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

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

@@ -1,31 +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;
-  }
+.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

@@ -1,23 +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();
-  });
-});
+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

@@ -1,170 +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();
-    }
-  }
-}
+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

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