[tfjs-data] Update webcam tests for tfjs-core@1.2.9 (#1979)

INTERNAL
* prepare data for 1.2.9

* update test

* no restart in firefox browserstack

* save

* fix nit

* fix test

Author: Kangyi Zhang

tfjs-data/package.json

@@ -12,7 +12,7 @@
   "miniprogram": "dist/miniprogram",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@tensorflow/tfjs-core": "1.2.8",
+    "@tensorflow/tfjs-core": "1.2.9",
     "@tensorflow/tfjs-layers": "1.2.8",
     "@types/jasmine": "~2.5.53",
     "@types/seedrandom": "^2.4.27",
@@ -53,7 +53,7 @@
     "lint": "tslint -p . -t verbose"
   },
   "peerDependencies": {
-    "@tensorflow/tfjs-core": "1.2.8",
+    "@tensorflow/tfjs-core": "1.2.9",
     "seedrandom": "~2.4.3"
   },
   "dependencies": {

tfjs-data/src/iterators/webcam_iterator_test.ts

@@ -17,7 +17,7 @@
  */
 
 import {memory, tensor3d, test_util} from '@tensorflow/tfjs-core';
-import {describeBrowserEnvs, setupFakeVideoStream} from '../util/test_utils';
+import {describeBrowserEnvs, replaceHTMLVideoElementSource, setupFakeVideoStream} from '../util/test_utils';
 import {WebcamIterator} from './webcam_iterator';
 
 describeBrowserEnvs('WebcamIterator', () => {
@@ -27,38 +27,44 @@ describeBrowserEnvs('WebcamIterator', () => {
 
   it('create webcamIterator with html element', async () => {
     const videoElement = document.createElement('video');
-    videoElement.width = 100;
-    videoElement.height = 200;
+    videoElement.width = 160;
+    videoElement.height = 90;
 
     const webcamIterator = await WebcamIterator.create(videoElement);
+
+    await replaceHTMLVideoElementSource(videoElement);
+
     const result = await webcamIterator.next();
     expect(result.done).toBeFalsy();
-    expect(result.value.shape).toEqual([200, 100, 3]);
+    expect(result.value.shape).toEqual([90, 160, 3]);
   });
 
   it('create webcamIterator with html element and capture', async () => {
     const videoElement = document.createElement('video');
-    videoElement.width = 100;
-    videoElement.height = 200;
+    videoElement.width = 160;
+    videoElement.height = 90;
 
     const webcamIterator = await WebcamIterator.create(videoElement);
+
+    await replaceHTMLVideoElementSource(videoElement);
+
     const result = await webcamIterator.capture();
-    expect(result.shape).toEqual([200, 100, 3]);
+    expect(result.shape).toEqual([90, 160, 3]);
   });
 
   it('create webcamIterator with no html element', async () => {
     const webcamIterator = await WebcamIterator.create(
-        null, {resizeWidth: 100, resizeHeight: 200});
+        null, {resizeWidth: 300, resizeHeight: 150});
     const result = await webcamIterator.next();
     expect(result.done).toBeFalsy();
-    expect(result.value.shape).toEqual([200, 100, 3]);
+    expect(result.value.shape).toEqual([150, 300, 3]);
   });
 
   it('create webcamIterator with no html element and capture', async () => {
     const webcamIterator = await WebcamIterator.create(
-        null, {resizeWidth: 100, resizeHeight: 200});
+        null, {resizeWidth: 300, resizeHeight: 150});
     const result = await webcamIterator.capture();
-    expect(result.shape).toEqual([200, 100, 3]);
+    expect(result.shape).toEqual([150, 300, 3]);
   });
 
   it('create webcamIterator with no html element and no size', async done => {
@@ -164,13 +170,14 @@ describeBrowserEnvs('WebcamIterator', () => {
 
   it('webcamIterator could stop', async () => {
     const videoElement = document.createElement('video');
-    videoElement.width = 100;
-    videoElement.height = 100;
+    videoElement.width = 160;
+    videoElement.height = 90;
 
     const webcamIterator = await WebcamIterator.create(videoElement);
+    await replaceHTMLVideoElementSource(videoElement);
     const result1 = await webcamIterator.next();
     expect(result1.done).toBeFalsy();
-    expect(result1.value.shape).toEqual([100, 100, 3]);
+    expect(result1.value.shape).toEqual([90, 160, 3]);
 
     await webcamIterator.stop();
     const result2 = await webcamIterator.next();
@@ -180,31 +187,29 @@ describeBrowserEnvs('WebcamIterator', () => {
 
   it('webcamIterator could restart', async () => {
     const videoElement = document.createElement('video');
-    videoElement.width = 100;
-    videoElement.height = 100;
+    videoElement.width = 160;
+    videoElement.height = 90;
 
     const webcamIterator = await WebcamIterator.create(videoElement);
+    await replaceHTMLVideoElementSource(videoElement);
     const result1 = await webcamIterator.next();
     expect(result1.done).toBeFalsy();
-    expect(result1.value.shape).toEqual([100, 100, 3]);
+    expect(result1.value.shape).toEqual([90, 160, 3]);
 
     webcamIterator.stop();
     const result2 = await webcamIterator.next();
     expect(result2.done).toBeTruthy();
     expect(result2.value).toBeNull();
 
-    // Reset fake media stream after stopped the stream.
-    setupFakeVideoStream();
-
-    await webcamIterator.start();
     // Skip validation when it's in Firefox and Mac OS, because BrowserStack for
-    // Firefox on travis does not support restarting experimental function
-    // HTMLCanvasElement.captureStream().
+    // Firefox does not trigger the readyState event when restarting.
     if (navigator.userAgent.search('Firefox') < 0 &&
         navigator.userAgent.search('OS X') < 0) {
+          await webcamIterator.start();
+      await replaceHTMLVideoElementSource(videoElement);
       const result3 = await webcamIterator.next();
       expect(result3.done).toBeFalsy();
-      expect(result3.value.shape).toEqual([100, 100, 3]);
+      expect(result3.value.shape).toEqual([90, 160, 3]);
     }
   });
 

tfjs-data/src/readers_test.ts

@@ -16,7 +16,7 @@
  */
 
 import * as tfd from './readers';
-import {describeAllEnvs, describeBrowserEnvs, describeNodeEnvs, setupFakeVideoStream} from './util/test_utils';
+import {describeAllEnvs, describeBrowserEnvs, describeNodeEnvs, replaceHTMLVideoElementSource, setupFakeVideoStream} from './util/test_utils';
 
 describeAllEnvs('readers', () => {
   it('generate dataset from function', async () => {
@@ -138,22 +138,23 @@ describeBrowserEnvs('readers in browser', () => {
   it('generate data from webcam with HTML element', async () => {
     setupFakeVideoStream();
     const videoElement = document.createElement('video');
-    videoElement.width = 300;
-    videoElement.height = 500;
+    videoElement.width = 160;
+    videoElement.height = 90;
 
     const webcamIterator = await tfd.webcam(videoElement);
+    await replaceHTMLVideoElementSource(videoElement);
     const result = await webcamIterator.next();
     expect(result.done).toBeFalsy();
-    expect(result.value.shape).toEqual([500, 300, 3]);
+    expect(result.value.shape).toEqual([90, 160, 3]);
   });
 
   it('generate data from webcam with no HTML element', async () => {
     setupFakeVideoStream();
     const webcamIterator =
-        await tfd.webcam(null, {resizeWidth: 100, resizeHeight: 200});
+        await tfd.webcam(null, {resizeWidth: 300, resizeHeight: 150});
     const result = await webcamIterator.next();
     expect(result.done).toBeFalsy();
-    expect(result.value.shape).toEqual([200, 100, 3]);
+    expect(result.value.shape).toEqual([150, 300, 3]);
   });
 
   it('generate data from webcam with HTML element and resize', async () => {

tfjs-data/src/util/test_utils.ts

@@ -20,8 +20,8 @@ import {ALL_ENVS, BROWSER_ENVS, describeWithFlags, NODE_ENVS, registerTestEnv} f
 
 // Provide fake video stream
 export function setupFakeVideoStream() {
-  const width = 500;
-  const height = 500;
+  const width = 100;
+  const height = 200;
   const canvasElement = document.createElement('canvas');
   const ctx = canvasElement.getContext('2d');
   ctx.fillStyle = 'rgb(1,2,3)';
@@ -33,6 +33,22 @@ export function setupFakeVideoStream() {
   };
 }
 
+export async function replaceHTMLVideoElementSource(videoElement:HTMLVideoElement) {
+  const source = document.createElement('source');
+  // tslint:disable:max-line-length
+  source.src = 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAu1tZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE1NSByMjkwMSA3ZDBmZjIyIC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxOCAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTMgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTI4LjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAwZYiEAD//8m+P5OXfBeLGOfKE3xkODvFZuBflHv/+VwJIta6cbpIo4ABLoKBaYTkTAAAC7m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAPoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIYdHJhawAAAFx0a2hkAAAAAwAAAAAAAAAAAAAAAQAAAAAAAAPoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAACgAAAAWgAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAD6AAAAAAAAQAAAAABkG1kaWEAAAAgbWRoZAAAAAAAAAAAAAAAAAAAQAAAAEAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAATttaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAD7c3RibAAAAJdzdHNkAAAAAAAAAAEAAACHYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAACgAFoASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAADFhdmNDAWQACv/hABhnZAAKrNlCjfkhAAADAAEAAAMAAg8SJZYBAAZo6+JLIsAAAAAYc3R0cwAAAAAAAAABAAAAAQAAQAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAC5QAAAAEAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTguMTIuMTAw';
+  source.type = 'video/mp4';
+  videoElement.srcObject=null;
+  videoElement.appendChild(source);
+  videoElement.play();
+
+  if (videoElement.readyState < 2) {
+    await new Promise(resolve => {
+      videoElement.addEventListener('loadeddata', () => resolve());
+    });
+  }
+}
+
 // Register backends.
 registerTestEnv({name: 'cpu', backendName: 'cpu'});
 registerTestEnv({

tfjs-data/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@tensorflow/tfjs-core@1.2.8":
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-core/-/tfjs-core-1.2.8.tgz#d6873b88522f8cf25d34c10afd095866578d7d92"
-  integrity sha512-lWV4vAnXAAmahXpCWBwdGGW9HO6iNw9pUeVYih7pDXeJahMk3OJs6SgjRNhwn+ldsGwRoorR0/RHg0yNLmqWxQ==
+"@tensorflow/tfjs-core@1.2.9":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-core/-/tfjs-core-1.2.9.tgz#125830270a0bdd0e856914778a300c4ad6f51e21"
+  integrity sha512-s0hHZSx6rGTlkkB8u8gs5n7sIPv1GXDNHmISRy+kqGzmlpkfI2kr6WXqOWQy6wFgjzopRD8cJQjBZ9USPZnYTQ==
   dependencies:
     "@types/offscreencanvas" "~2019.3.0"
     "@types/seedrandom" "2.4.27"