@clockworkdog/cogs-client 1.4.3 → 1.5.1

package/README.md

@@ -6,21 +6,33 @@ Create content for your COGS Media Master
 
 ## Add to your project
 
-### Browser
+### Static HTML
+
+Download `cogs-client.js` from https://unpkg.com/@clockworkdog/cogs-client and save it to your project.
+
+Include the script in your HTML page:
 
 ```html
-<script src="https://unpkg.com/@clockworkdog/cogs-client@1"></script>
+<script src="./cogs-client.js"></script>
 ```
 
-### NPM
+(Avoid `<script>` tags with `http...` so your content works without an internet connection.)
+
+### NPM / Yarn
+
+If you haven't yet created a web project we recommend using Vite with Typescript:
 
 ```shell
-npm install --save @clockworkdog/cogs-client
+yarn create vite my-custom-content --template vanilla-ts
+cd my-custom-content
+yarn
 ```
 
-### Yarn
+Then add `cogs-client` with NPM or Yarn:
 
 ```shell
+npm install --save @clockworkdog/cogs-client
+# OR
 yarn add @clockworkdog/cogs-client
 ```
 

package/dist/AudioPlayer.js

@@ -405,12 +405,14 @@ function isFadeValid(fade) {
     return typeof fade === 'number' && !isNaN(fade) && fade > 0;
 }
 function setPlayerSinkId(player, sinkId) {
+    var _a;
     if (sinkId === undefined) {
         return;
     }
     if (player._html5) {
-        player._sounds.forEach((sound) => {
-            sound._node.setSinkId(sinkId);
+        (_a = player._sounds) === null || _a === void 0 ? void 0 : _a.forEach((sound) => {
+            var _a, _b;
+            (_b = (_a = sound._node) === null || _a === void 0 ? void 0 : _a.setSinkId) === null || _b === void 0 ? void 0 : _b.call(_a, sinkId);
         });
     }
     else {

package/dist/RtspStreamer.d.ts

@@ -1,4 +1,4 @@
-import { Html5VideoPipeline } from '@clockworkdog/media-stream-library-browser';
+export declare const LIVE_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.
@@ -12,11 +12,14 @@ export default class RtspStreamer {
     });
     /**
      * Start an RTSP video stream on with the given URI on the given video element.
-     * @returns The playing HTML5 video pipeline.
+     * @returns An object with a function to close the pipeline
      */
     play(params: {
         uri: string;
         videoElement: HTMLVideoElement;
         playbackRate?: number;
-    }): Html5VideoPipeline;
+        restartIfStopped?: boolean;
+    }): {
+        close: () => void;
+    };
 }

package/dist/RtspStreamer.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIVE_VIDEO_PLAYBACK_RATE = void 0;
 const media_stream_library_browser_1 = require("@clockworkdog/media-stream-library-browser");
 const urls_1 = require("./helpers/urls");
+const DEFAULT_VIDEO_PLAYBACK_RATE = 1;
 // 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;
+exports.LIVE_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.
@@ -15,32 +17,83 @@ class RtspStreamer {
     }
     /**
      * Start an RTSP video stream on with the given URI on the given video element.
-     * @returns The playing HTML5 video pipeline.
+     * @returns An object with a function to close the 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);
-            }
+        videoElement.playsInline = true; // Required for iOS
+        let pipeline;
+        const startPipeline = () => {
+            pipeline === null || pipeline === void 0 ? void 0 : pipeline.close();
+            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)) {
+                    console.log('Video stream ended. Restarting.');
+                    videoElement.pause();
+                    setTimeout(startPipeline, 0);
+                }
+            };
+            // Start playback when ready
+            pipeline.ready.then(() => {
+                pipeline.rtsp.play();
+            });
+        };
+        startPipeline();
+        if (params.playbackRate) {
+            const playbackRate = (_a = params.playbackRate) !== null && _a !== void 0 ? _a : DEFAULT_VIDEO_PLAYBACK_RATE;
+            videoElement.playbackRate = playbackRate;
+            videoElement.addEventListener('play', () => {
+                videoElement.playbackRate = playbackRate;
+            });
+        }
+        let removeRestartListeners = null;
+        if (params.restartIfStopped) {
+            let playing = false;
+            let interval = null;
+            const handleTimeUpdate = () => {
+                playing = true;
+            };
+            const handlePlay = () => {
+                playing = true;
+                videoElement.addEventListener('timeupdate', handleTimeUpdate);
+                if (!interval) {
+                    interval = setInterval(() => {
+                        if (!playing) {
+                            console.log('Video stopped playing. Restarting.');
+                            videoElement.pause();
+                            setTimeout(startPipeline, 0);
+                        }
+                        playing = false;
+                    }, 2000);
+                }
+            };
+            const handlePause = () => {
+                videoElement.removeEventListener('timeupdate', handleTimeUpdate);
+                if (interval) {
+                    clearInterval(interval);
+                    interval = null;
+                }
+            };
+            videoElement.addEventListener('play', handlePlay);
+            videoElement.addEventListener('pause', handlePause);
+            removeRestartListeners = () => {
+                handlePause();
+                videoElement.removeEventListener('play', handlePlay);
+                videoElement.removeEventListener('pause', handlePause);
+            };
+        }
+        return {
+            close: () => {
+                pipeline === null || pipeline === void 0 ? void 0 : pipeline.close();
+                removeRestartListeners === null || removeRestartListeners === void 0 ? void 0 : removeRestartListeners();
+            },
         };
-        // 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;

package/dist/VideoPlayer.js

@@ -266,6 +266,7 @@ class VideoPlayer {
     }
     createVideoElement(path, config, { volume }) {
         const videoElement = document.createElement('video');
+        videoElement.playsInline = true; // Required for iOS
         videoElement.src = urls_1.assetUrl(path);
         videoElement.autoplay = false;
         videoElement.loop = false;
@@ -321,5 +322,7 @@ function setPlayerSinkId(player, sinkId) {
     if (sinkId === undefined) {
         return;
     }
-    player.videoElement.setSinkId(sinkId);
+    if (typeof player.videoElement.setSinkId === 'function') {
+        player.videoElement.setSinkId(sinkId);
+    }
 }