De-flake fromPixels test failure

`HTMLVideoElement.requestVideoFrameCallback()` provides a realiable way
to guarantee the readiness of a video frame, whereas the browser may not
update the ready state until a few frames later. In such cases, false
alarms will be raised by the validation in `fromPixels()`.

For where rVFC is unavailable, fallback to the old path based on the
`loadeddata` event. This at least seems better than waiting on nothing.

Fixes #6577

Author: hujiajie

tfjs-backend-webgpu/src/from_pixels_webgpu_test.ts

@@ -56,6 +56,11 @@ describeWebGPU('fromPixels', () => {
        if ('requestVideoFrameCallback' in video) {
          // tslint:disable-next-line:no-any
          await new Promise(go => (video as any).requestVideoFrameCallback(go));
+       } else {
+         // On mobile safari the ready state is ready immediately.
+         if (video.readyState < HTMLVideoElement.prototype.HAVE_CURRENT_DATA) {
+           await new Promise(go => video.addEventListener('loadeddata', go));
+         }
        }
 
        {

tfjs-core/src/ops/browser.ts

@@ -107,16 +107,6 @@ function fromPixels_(
         ` or {data: Uint32Array, width: number, height: number}, ` +
         `but was ${(pixels as {}).constructor.name}`);
   }
-  if (isVideo) {
-    const HAVE_CURRENT_DATA_READY_STATE = 2;
-    if (isVideo &&
-        (pixels as HTMLVideoElement).readyState <
-            HAVE_CURRENT_DATA_READY_STATE) {
-      throw new Error(
-          'The video element has not loaded data yet. Please wait for ' +
-          '`loadeddata` event on the <video> element.');
-    }
-  }
   // If the current backend has 'FromPixels' registered, it has a more
   // efficient way of handling pixel uploads, so we call that.
   const kernel = getKernel(FromPixels, ENGINE.backendName);

tfjs-core/src/ops/from_pixels_test.ts

@@ -233,15 +233,6 @@ describeWithFlags('fromPixels', BROWSER_ENVS, () => {
     document.body.removeChild(video);
   }, 30_000 /* 30 seconds */);
 
-  it('fromPixels for HTMLVideoElement throws without loadeddata', async () => {
-    const video = document.createElement('video');
-    video.width = 1;
-    video.height = 1;
-    video.src = 'data:image/gif;base64' +
-        ',R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
-    expect(() => tf.browser.fromPixels(video)).toThrowError();
-  });
-
   it('throws when passed a primitive number', () => {
     const msg = /pixels passed to tf.browser.fromPixels\(\) must be either/;
     // tslint:disable-next-line:no-any