Merge branch 'main' into joeyklee.adds-callcallback-tests

.all-contributorsrc

@@ -1297,6 +1297,17 @@
         "code",
         "example"
       ]
+    },
+    {
+      "login": "lindapaiste",
+      "name": "lindapaiste",
+      "avatar_url": "https://avatars.githubusercontent.com/u/28965286?v=4",
+      "profile": "http://lindapaiste.com",
+      "contributions": [
+        "code",
+        "ideas",
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -338,6 +338,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/asvsfs"><img src="https://avatars.githubusercontent.com/u/119840?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Amir</b></sub></a><br /><a href="https://github.com/ml5js/ml5-library/commits?author=asvsfs" title="Code">💻</a> <a href="#example-asvsfs" title="Examples">💡</a></td>
+    <td align="center"><a href="http://lindapaiste.com"><img src="https://avatars.githubusercontent.com/u/28965286?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lindapaiste</b></sub></a><br /><a href="https://github.com/ml5js/ml5-library/commits?author=lindapaiste" title="Code">💻</a> <a href="#ideas-lindapaiste" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ml5js/ml5-library/issues?q=author%3Alindapaiste" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

src/StyleTransfer/index.js

@@ -54,7 +54,6 @@ class StyleTransfer extends Video {
   async load(model) {
     if (this.videoElt) {
       await this.loadVideo();
-      this.videoReady = true;
     }
     await this.loadCheckpoints(model);
     return this;

src/utils/Video.js

@@ -8,22 +8,51 @@ Image and Video base class
 */
 
 class Video {
+  /**
+   * @property {HTMLVideoElement} [video]
+   */
+
+  /**
+   * @param {HTMLVideoElement | p5.Video | null | undefined} [video] - Can pass a video
+   *  into the constructor of the model in order to run the model on every frame of the video.
+   * @param {number | null | undefined} [size] - The size expected by the underlying model.
+   *  NOT the size of the current video.  The size will be used to resize the current video.
+   */
   constructor(video, size) {
+    /**
+     * @type {HTMLVideoElement | null}
+     */
     this.videoElt = null;
+    /**
+     * @type {number | null | undefined}
+     */
     this.size = size;
+    /**
+     * @type {boolean}
+     */
     this.videoReady = false;
 
-    if (video instanceof HTMLVideoElement) {
-      this.videoElt = video;
-    } else if (video !== null && typeof video === 'object' && video.elt instanceof HTMLVideoElement) {
-      // Handle p5.js video element
-      this.videoElt = video.elt;
+    if (typeof HTMLVideoElement !== 'undefined') {
+      if (video instanceof HTMLVideoElement) {
+        this.videoElt = video;
+      } else if (video !== null && typeof video === 'object' && video.elt instanceof HTMLVideoElement) {
+        // Handle p5.js video element
+        this.videoElt = video.elt;
+      }
     }
   }
 
+  /**
+   * Copies the stream from the source video into a new video element.
+   * The copied element is set to property `this.video` and is also returned by the function.
+   * @returns {Promise<HTMLVideoElement>}
+   */
   async loadVideo() {
     let stream;
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
+      if (!this.videoElt) {
+        reject(new Error('No video was passed to the constructor.'));
+      }
       this.video = document.createElement('video');
       const sUsrAg = navigator.userAgent;
       if (sUsrAg.indexOf('Firefox') > -1) {
@@ -32,14 +61,17 @@ class Video {
         stream = this.videoElt.captureStream();
       }
       this.video.srcObject = stream;
-      this.video.width = this.size;
-      this.video.height = this.size;
+      if (this.size) {
+        this.video.width = this.size;
+        this.video.height = this.size;
+      }
       this.video.autoplay = true;
       this.video.playsinline = true;
       this.video.muted = true;
       const playPromise = this.video.play();
       if (playPromise !== undefined) {
         playPromise.then(() => {
+          this.videoReady = true;
           resolve(this.video);
         });
       }