@clockworkdog/cogs-client 1.3.1 → 1.4.2

package/dist/CogsConnection.d.ts

@@ -74,6 +74,12 @@ export default class CogsConnection<CustomTypes extends {
     sendInitialMediaClipStates(allMediaClipStates: AllMediaClipStatesMessage): void;
     sendMediaClipState(mediaClipState: MediaClipStateMessage): void;
     sendAudioOutputs(audioOutputs: MediaDeviceInfo[]): void;
+    /**
+     * Show or hide the plugin window.
+     * @param visible Whether to show or hide the window
+     * This is only relevant for plugins, not for Media Master content.
+     */
+    setPluginWindowVisible(visible: boolean): void;
     addEventListener<EventName extends keyof ConnectionEventListeners<CustomTypes>, EventValue extends ConnectionEventListeners<CustomTypes>[EventName]>(type: EventName, listener: (ev: CustomEvent<EventValue>) => void, options?: boolean | AddEventListenerOptions): void;
     removeEventListener<EventName extends keyof ConnectionEventListeners<CustomTypes>, EventValue extends ConnectionEventListeners<CustomTypes>[EventName]>(type: EventName, listener: (ev: CustomEvent<EventValue>) => void, options?: boolean | EventListenerOptions): void;
     private dispatchEvent;

package/dist/CogsConnection.js

@@ -146,6 +146,16 @@ class CogsConnection {
             this.websocket.send(JSON.stringify({ audioOutputs }));
         }
     }
+    /**
+     * Show or hide the plugin window.
+     * @param visible Whether to show or hide the window
+     * This is only relevant for plugins, not for Media Master content.
+     */
+    setPluginWindowVisible(visible) {
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({ window: { visible } }));
+        }
+    }
     // Type-safe wrapper around EventTarget
     addEventListener(type, listener, options) {
         this.eventTarget.addEventListener(type, listener, options);
@@ -165,7 +175,7 @@ function websocketParametersFromUrl(url) {
     const localClientId = pathParams.get('local_id');
     const isSimulator = pathParams.get('simulator') === 'true';
     const display = (_a = pathParams.get('display')) !== null && _a !== void 0 ? _a : '';
-    const pluginId = parsedUrl.pathname.startsWith('/plugin/') ? parsedUrl.pathname.split('/')[2] : undefined;
+    const pluginId = parsedUrl.pathname.startsWith('/plugin/') ? decodeURIComponent(parsedUrl.pathname.split('/')[2]) : undefined;
     if (localClientId) {
         const type = (_b = pathParams.get('t')) !== null && _b !== void 0 ? _b : '';
         pathParams.delete('local_id');

package/dist/RtspStreamer.d.ts

@@ -0,0 +1,22 @@
+import { Html5VideoPipeline } from '@clockworkdog/media-stream-library-browser';
+/**
+ * Manages a websocket connection to the COGS TCP relay which can be used to send RTSP video
+ * feeds to the web.
+ */
+export default class RtspStreamer {
+    private _websocketUri;
+    constructor({ hostname, port, path, }?: {
+        hostname?: string;
+        port?: number;
+        path?: string;
+    });
+    /**
+     * Start an RTSP video stream on with the given URI on the given video element.
+     * @returns The playing HTML5 video pipeline.
+     */
+    play(params: {
+        uri: string;
+        videoElement: HTMLVideoElement;
+        playbackRate?: number;
+    }): Html5VideoPipeline;
+}

package/dist/RtspStreamer.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const media_stream_library_browser_1 = require("@clockworkdog/media-stream-library-browser");
+const urls_1 = require("./helpers/urls");
+// Use a faster-than-realtime playback rate by default
+// so that it keeps up with a realtime stream in case of video buffering
+const DEFAULT_VIDEO_PLAYBACK_RATE = 1.1;
+/**
+ * Manages a websocket connection to the COGS TCP relay which can be used to send RTSP video
+ * feeds to the web.
+ */
+class RtspStreamer {
+    constructor({ hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT, path = '/tcp-proxy', } = {}) {
+        this._websocketUri = `ws://${hostname}:${port}${path}`;
+    }
+    /**
+     * Start an RTSP video stream on with the given URI on the given video element.
+     * @returns The playing HTML5 video pipeline.
+     */
+    play(params) {
+        var _a;
+        const { uri, videoElement } = params;
+        const pipeline = new media_stream_library_browser_1.Html5VideoPipeline({
+            ws: { uri: this._websocketUri },
+            rtsp: { uri: uri },
+            mediaElement: videoElement,
+        });
+        // Restart stream on RTCP BYE (stream ended)
+        pipeline.rtsp.onRtcp = (rtcp) => {
+            if (media_stream_library_browser_1.isRtcpBye(rtcp)) {
+                setTimeout(() => this.play(params), 0);
+            }
+        };
+        // Start playback when ready
+        pipeline.ready.then(() => {
+            pipeline.rtsp.play();
+        });
+        videoElement.playbackRate = (_a = params.playbackRate) !== null && _a !== void 0 ? _a : DEFAULT_VIDEO_PLAYBACK_RATE;
+        videoElement.addEventListener('play', () => {
+            var _a;
+            videoElement.playbackRate = (_a = params.playbackRate) !== null && _a !== void 0 ? _a : DEFAULT_VIDEO_PLAYBACK_RATE;
+        });
+        return pipeline;
+    }
+}
+exports.default = RtspStreamer;