warpr 1.0.20 → 1.0.22

package/fesm2022/warpr.mjs

@@ -0,0 +1,716 @@
+import * as i0 from '@angular/core';
+import { Injectable, ViewChild, Component } from '@angular/core';
+import { v4 } from 'uuid';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class ArrayStream {
+    constructor(buffer) {
+        this._view = new DataView(buffer);
+        this._position = 0;
+    }
+    get Position() {
+        return this._position;
+    }
+    set Position(value) {
+        if (value < 0 || this._view.buffer.byteLength < value) {
+            throw new RangeError("The provided value lies outside the stream's bounds.");
+        }
+        this._position = value;
+    }
+    ReadBool() {
+        let result = this._view.getUint8(this._position) != 0;
+        this._position += 1;
+        return result;
+    }
+    ReadUInt8() {
+        let result = this._view.getUint8(this._position);
+        this._position += 1;
+        return result;
+    }
+    ReadUInt16() {
+        let result = this._view.getUint16(this._position, true);
+        this._position += 2;
+        return result;
+    }
+    ReadUInt32() {
+        let result = this._view.getUint32(this._position, true);
+        this._position += 4;
+        return result;
+    }
+    ReadUInt64() {
+        let result = this._view.getBigUint64(this._position, true);
+        this._position += 8;
+        return result;
+    }
+    ReadInt8() {
+        let result = this._view.getInt8(this._position);
+        this._position += 1;
+        return result;
+    }
+    ReadInt16() {
+        let result = this._view.getInt16(this._position, true);
+        this._position += 2;
+        return result;
+    }
+    ReadInt32() {
+        let result = this._view.getInt32(this._position, true);
+        this._position += 4;
+        return result;
+    }
+    ReadInt64() {
+        let result = this._view.getBigInt64(this._position, true);
+        this._position += 8;
+        return result;
+    }
+    ReadSingle() {
+        let result = this._view.getFloat32(this._position, true);
+        this._position += 4;
+        return result;
+    }
+    ReadDouble() {
+        let result = this._view.getFloat64(this._position, true);
+        this._position += 8;
+        return result;
+    }
+    ReadBuffer() {
+        let length = this.ReadUInt32();
+        let result = this._view.buffer.slice(this._position, this._position + length);
+        this._position += length;
+        return result;
+    }
+    ReadToEnd() {
+        let length = this._view.buffer.byteLength - this._position;
+        let result = this._view.buffer.slice(this._position, this._position + length);
+        this._position += length;
+        return result;
+    }
+    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;
+    }
+}
+
+var FrameType;
+(function (FrameType) {
+    FrameType[FrameType["Unknown"] = 0] = "Unknown";
+    FrameType[FrameType["Key"] = 1] = "Key";
+    FrameType[FrameType["Delta"] = 2] = "Delta";
+})(FrameType || (FrameType = {}));
+class EncodedFrame {
+    constructor(buffer) {
+        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();
+    }
+}
+class Size {
+    constructor(Width, Height) {
+        this.Width = Width;
+        this.Height = Height;
+    }
+    static { this.Empty = { Width: 0, Height: 0 }; }
+    static AreEqual(a, b) {
+        return a.Width === b.Width && a.Height === b.Height;
+    }
+}
+
+var WarprSignalingMessageType;
+(function (WarprSignalingMessageType) {
+    WarprSignalingMessageType["ConnectionRequest"] = "ConnectionRequest";
+    WarprSignalingMessageType["PairingCompleteMessage"] = "PairingCompleteMessage";
+    WarprSignalingMessageType["PeerConnectionDescriptionMessage"] = "PeerConnectionDescriptionMessage";
+    WarprSignalingMessageType["PeerConnectionCandidateMessage"] = "PeerConnectionCandidateMessage";
+    WarprSignalingMessageType["StreamingSourcesMessage"] = "StreamingSourcesMessage";
+})(WarprSignalingMessageType || (WarprSignalingMessageType = {}));
+class ConnectionRequest {
+    constructor() {
+        this.$type = WarprSignalingMessageType.ConnectionRequest;
+    }
+}
+class PairingCompleteMessage {
+    constructor() {
+        this.$type = WarprSignalingMessageType.PairingCompleteMessage;
+    }
+}
+function GetConfiguration(iceServers) {
+    let result = {};
+    result.iceServers = new Array();
+    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;
+}
+class PeerConnectionDescriptionMessage {
+    constructor() {
+        this.$type = WarprSignalingMessageType.PeerConnectionDescriptionMessage;
+    }
+}
+class PeerConnectionCandidateMessage {
+    constructor() {
+        this.$type = WarprSignalingMessageType.PeerConnectionCandidateMessage;
+    }
+}
+class StreamingSourcesMessage {
+    constructor() {
+        this.$type = WarprSignalingMessageType.StreamingSourcesMessage;
+    }
+}
+
+var WarprStreamingMessageType;
+(function (WarprStreamingMessageType) {
+    WarprStreamingMessageType["PointerInputMessage"] = "PointerInputMessage";
+    WarprStreamingMessageType["ResizeSurfaceMessage"] = "ResizeSurfaceMessage";
+})(WarprStreamingMessageType || (WarprStreamingMessageType = {}));
+var PointerType;
+(function (PointerType) {
+    PointerType["Unknown"] = "Unknown";
+    PointerType["Mouse"] = "Mouse";
+    PointerType["Pen"] = "Pen";
+    PointerType["Touch"] = "Touch";
+})(PointerType || (PointerType = {}));
+var PointerAction;
+(function (PointerAction) {
+    PointerAction["Unknown"] = "Unknown";
+    PointerAction["Pressed"] = "Pressed";
+    PointerAction["Moved"] = "Moved";
+    PointerAction["Released"] = "Released";
+    PointerAction["WheelChanged"] = "WheelChanged";
+})(PointerAction || (PointerAction = {}));
+var PointerFlags;
+(function (PointerFlags) {
+    PointerFlags[PointerFlags["None"] = 0] = "None";
+    PointerFlags[PointerFlags["LeftButton"] = 1] = "LeftButton";
+    PointerFlags[PointerFlags["MiddleButton"] = 2] = "MiddleButton";
+    PointerFlags[PointerFlags["RightButton"] = 4] = "RightButton";
+    PointerFlags[PointerFlags["Wheel"] = 8] = "Wheel";
+    PointerFlags[PointerFlags["Captured"] = 16] = "Captured";
+})(PointerFlags || (PointerFlags = {}));
+;
+class PointerState {
+    constructor() {
+        this.Buttons = 0;
+    }
+}
+class PointerInputMessage {
+    constructor(event, states, target, wheelDelta) {
+        this.$type = WarprStreamingMessageType.PointerInputMessage;
+        this.Id = -1;
+        this.Type = PointerType.Unknown;
+        this.Action = PointerAction.Unknown;
+        this.Position = { X: 0, Y: 0 };
+        this.Flags = PointerFlags.None;
+        this.WheelDelta = 0;
+        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;
+    }
+    static GetRemotePosition(event, target) {
+        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
+        };
+    }
+}
+class ResizeSurfaceMessage {
+    constructor(Width, Height) {
+        this.Width = Width;
+        this.Height = Height;
+        this.$type = WarprStreamingMessageType.ResizeSurfaceMessage;
+    }
+}
+
+class EventSubscription {
+    constructor(_owner, _token) {
+        this._owner = _owner;
+        this._token = _token;
+    }
+    Unsubscribe() {
+        this._owner.Unsubscribe(this._token);
+    }
+}
+class EventOwner {
+    constructor() {
+        this.Token = Symbol();
+    }
+    Raise(event, sender, eventArgs) {
+        event.Raise(this, sender, eventArgs);
+    }
+}
+class EventArgs {
+    static { this.Empty = new EventArgs(); }
+}
+class EventPublisher {
+    constructor(owner) {
+        this._handlers = new Map;
+        this._token = owner.Token;
+    }
+    Subscribe(handler) {
+        const token = Symbol();
+        this._handlers.set(token, handler);
+        return new EventSubscription(this, token);
+    }
+    Raise(owner, sender, eventArgs) {
+        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) {
+        this._handlers.delete(token);
+    }
+}
+
+class MessageBuilder {
+    constructor(Id, Size, FragmentSize) {
+        this.Id = Id;
+        this.Size = Size;
+        this.FragmentSize = FragmentSize;
+        this.FragmentsReady = 0;
+        this.FragmentCount = Math.ceil(Size / FragmentSize);
+        this.Buffer = new Uint8Array(Size);
+    }
+    AddFragment(index, buffer) {
+        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;
+    }
+}
+class MessageAssembler {
+    constructor(_maxBuilderCount = 3) {
+        this._maxBuilderCount = _maxBuilderCount;
+        this._builders = new Map();
+    }
+    PushMessage(buffer) {
+        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;
+        }
+    }
+}
+
+class WebSocketClient {
+    constructor(_uri) {
+        this._uri = _uri;
+        this._events = new EventOwner();
+        this.Connected = new EventPublisher(this._events);
+        this.MessageReceived = new EventPublisher(this._events);
+        this.Disconnected = new EventPublisher(this._events);
+    }
+    Connect() {
+        console.log(`Connecting to ${this._uri}...`);
+        let socket = new WebSocket(this._uri);
+        socket.onopen = () => this.OnConnected();
+        socket.onmessage = (e) => this.OnMessageReceived(e);
+        socket.onclose = () => this.OnDisconnected();
+        socket.onerror = (e) => this.OnError(e);
+        this._socket = socket;
+    }
+    SendMessage(message) {
+        if (!this._socket)
+            return;
+        let content = JSON.stringify(message);
+        console.debug(`Sending message: ${content}`);
+        this._socket.send(content);
+    }
+    OnConnected() {
+        console.log(`Connected to: ${this._uri}.`);
+        this._events.Raise(this.Connected, this, EventArgs.Empty);
+    }
+    OnMessageReceived(eventArgs) {
+        console.debug('Message received: ' + eventArgs.data);
+        let message = JSON.parse(eventArgs.data);
+        this._events.Raise(this.MessageReceived, this, message);
+    }
+    OnDisconnected() {
+        console.log(`Disconnected from: ${this._uri}.`);
+        this._events.Raise(this.Disconnected, this, EventArgs.Empty);
+    }
+    OnError(error) {
+        console.log('Connection failed: ' + error);
+    }
+}
+
+class MessagingService extends WebSocketClient {
+    static { this._connectionUri = 'api/sinks/connect'; }
+    constructor() {
+        const uri = MessagingService.GetServerUri();
+        super(uri);
+        this._sessionId = v4();
+    }
+    static GetServerUri() {
+        const location = window.location;
+        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+        return `${protocol}://${location.host}/${this._connectionUri}`;
+    }
+    OnConnected() {
+        super.OnConnected();
+        let request = new ConnectionRequest();
+        request.SessionId = this._sessionId;
+        this.SendMessage(request);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessagingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessagingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessagingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class StreamingService {
+    constructor(_messagingService) {
+        this._messagingService = _messagingService;
+        this._events = new EventOwner();
+        this.FrameReceived = new EventPublisher(this._events);
+        this.Connected = new EventPublisher(this._events);
+        this.ControlMessageReceived = new EventPublisher(this._events);
+        this.AuxMessageReceived = new EventPublisher(this._events);
+        this._lastRefreshTime = performance.now();
+        this._count = 0;
+        _messagingService.MessageReceived.Subscribe((sender, message) => this.OnSignalingMessageReceived(sender, message));
+        _messagingService.Connect();
+    }
+    Reconnect(configuration) {
+        console.log("Establishing peer connection...");
+        this._controlConnection?.close();
+        this._streamConnection?.close();
+        this._messageBuilder = new MessageAssembler();
+        this._auxConnection?.close();
+        this._peerConnection?.close();
+        this._peerConnection = new RTCPeerConnection(configuration);
+        this._peerConnection.onicecandidate = (event) => this.OnIceCandidateAdded(event.candidate?.candidate);
+        this._peerConnection.ondatachannel = (event) => this.OnDataChannel(event);
+        this._peerConnection.onconnectionstatechange = (event) => this.OnConnectionStateChanged();
+    }
+    SendControlMessage(message) {
+        let json = JSON.stringify(message);
+        this._controlConnection?.send(json);
+    }
+    SendAuxMessage(message) {
+        this._auxConnection?.send(message);
+    }
+    OnConnectionStateChanged() {
+        console.log("WebRTC: " + this._peerConnection?.connectionState);
+    }
+    OnDataChannel(event) {
+        console.log(`WebRTC data channel ${event.channel.label} connected.`);
+        switch (event.channel.label) {
+            case "control":
+                this._controlConnection = event.channel;
+                this._controlConnection.binaryType = "arraybuffer";
+                this._controlConnection.onmessage = (event) => this._events.Raise(this.ControlMessageReceived, this, event.data);
+                this._events.Raise(this.Connected, this, null);
+                break;
+            case "stream":
+                this._streamConnection = event.channel;
+                this._streamConnection.binaryType = "arraybuffer";
+                this._streamConnection.onmessage = (event) => this.OnLowLatencyMessage(event);
+                break;
+            case "aux":
+                this._auxConnection = event.channel;
+                this._auxConnection.binaryType = "arraybuffer";
+                this._auxConnection.onmessage = (event) => this._events.Raise(this.AuxMessageReceived, this, event.data);
+                this._events.Raise(this.Connected, this, null);
+                break;
+        }
+    }
+    OnLowLatencyMessage(event) {
+        let message = this._messageBuilder?.PushMessage(event.data);
+        if (!message)
+            return;
+        let now = performance.now();
+        let elapsed = now - this._lastRefreshTime;
+        this._count++;
+        if (elapsed > 1000) {
+            this._lastRefreshTime = now;
+            console.debug(`Messages: ${this._count / elapsed * 1000} FPS`);
+            this._count = 0;
+        }
+        let frame = new EncodedFrame(message);
+        this._events.Raise(this.FrameReceived, this, frame);
+    }
+    OnIceCandidateAdded(candidate) {
+        if (candidate == null)
+            return;
+        let message = new PeerConnectionCandidateMessage();
+        message.Candidate = candidate;
+        this._messagingService.SendMessage(message);
+    }
+    async OnSignalingMessageReceived(sender, message) {
+        switch (message.$type) {
+            case WarprSignalingMessageType.PairingCompleteMessage:
+                this.Reconnect(GetConfiguration(message.IceServers));
+                break;
+            case WarprSignalingMessageType.PeerConnectionDescriptionMessage:
+                if (!this._peerConnection)
+                    return;
+                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:
+                if (!this._peerConnection)
+                    return;
+                await this._peerConnection.addIceCandidate({ candidate: message.Candidate, sdpMid: "0" });
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StreamingService, deps: [{ token: MessagingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StreamingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StreamingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: MessagingService }] });
+
+class StreamHostComponent {
+    get IsFullScreenAvailable() {
+        return document.fullscreenEnabled;
+    }
+    constructor(_streamingService) {
+        this._streamingService = _streamingService;
+        this._renderingContext = null;
+        this._videoSize = Size.Empty;
+        this._displaySize = Size.Empty;
+        this._isDecoderInitialized = false;
+        this._pointerStates = {};
+        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)
+        });
+    }
+    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());
+    }
+    OnPointerEvent(event, 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);
+    }
+    OnWheelEvent(event) {
+        //console.log(event);
+        event.preventDefault();
+        let pointerEvent = new PointerEvent(event.type, event);
+        this.OnPointerEvent(pointerEvent, event.deltaY);
+    }
+    OnConnected() {
+        this._displaySize = Size.Empty;
+    }
+    OnFrameReceived(frame) {
+        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);
+    }
+    OnFrameDecoded(frame) {
+        if (this._framePending)
+            this._framePending.close();
+        this._framePending = frame;
+        requestAnimationFrame(() => this.RenderFrame());
+    }
+    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();
+        }
+    }
+    ToggleFullScreen() {
+        if (document.fullscreenElement === this._root?.nativeElement) {
+            document.exitFullscreen();
+        }
+        else {
+            this._root?.nativeElement.requestFullscreen();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StreamHostComponent, deps: [{ token: StreamingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: StreamHostComponent, isStandalone: true, selector: "warpr-stream-host", viewQueries: [{ propertyName: "_root", first: true, predicate: ["root"], descendants: true }, { propertyName: "_canvas", first: true, predicate: ["renderTarget"], descendants: true }], ngImport: i0, template: "<div #root class=\"root\">\n  <canvas #renderTarget class=\"renderTarget\"></canvas>\n\n  <div class=\"overlay\" (click)=\"ToggleFullScreen()\" *ngIf=\"IsFullScreenAvailable\" title=\"Warpr\">W</div>\n</div>\n", styles: [".root{background-color:#000;color:#fff;display:flex;position:relative}.renderTarget{width:100%;height:100%;object-fit:contain;touch-action:none}.overlay{position:absolute;bottom:10px;right:10px;background-color:#00000080;color:#ffffffbf;padding:10px;border-radius:5px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:700;cursor:pointer}.overlay:hover{background-color:#000000bf;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: StreamHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'warpr-stream-host', imports: [CommonModule], template: "<div #root class=\"root\">\n  <canvas #renderTarget class=\"renderTarget\"></canvas>\n\n  <div class=\"overlay\" (click)=\"ToggleFullScreen()\" *ngIf=\"IsFullScreenAvailable\" title=\"Warpr\">W</div>\n</div>\n", styles: [".root{background-color:#000;color:#fff;display:flex;position:relative}.renderTarget{width:100%;height:100%;object-fit:contain;touch-action:none}.overlay{position:absolute;bottom:10px;right:10px;background-color:#00000080;color:#ffffffbf;padding:10px;border-radius:5px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:700;cursor:pointer}.overlay:hover{background-color:#000000bf;color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: StreamingService }], propDecorators: { _root: [{
+                type: ViewChild,
+                args: ["root"]
+            }], _canvas: [{
+                type: ViewChild,
+                args: ["renderTarget"]
+            }] } });
+
+/*
+ * Public API Surface of warpr-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrayStream, ConnectionRequest, EncodedFrame, EventArgs, EventOwner, EventPublisher, EventSubscription, FrameType, GetConfiguration, MessageAssembler, MessagingService, PairingCompleteMessage, PeerConnectionCandidateMessage, PeerConnectionDescriptionMessage, PointerAction, PointerFlags, PointerInputMessage, PointerState, PointerType, ResizeSurfaceMessage, Size, StreamHostComponent, StreamingService, StreamingSourcesMessage, WarprSignalingMessageType, WarprStreamingMessageType, WebSocketClient };
+//# sourceMappingURL=warpr.mjs.map