Can't fake video for webcam testing

[iuliaib]

Current behavior

Hello! I am new to Cypress and I am trying to send an *.y4m video to the webcam. I have a Typescript project.

I've found this project on github: https://github.com/taylorjg/sudoku-buster-react and here is working to fake the webcam (I've also updated to the latest cypress version and is still working), but if I replace the baseUrl with my project's one, no video is loading. This is what I get:

Does anyone have any idea why the *.y4m video is not played? (I've also tried other extensions as *.mjpeg, but I have the same behaviour)

As the BE & FE projects are on some private repositories, I will send here pieces of code when asked.

Here is the DOM of my webcam-page: dom-page.txt

Desired behavior

I am expecting to see the *.y4m video as per:

• https://medium.com/@rodneyovbiye/cypress-using-fake-video-for-camera-during-test-in-chrome-e223a9de08f5
• https://docs.cypress.io/api/plugins/browser-launch-api

Test code to reproduce

I have also tried to use "cypress-browser-permissions": "^1.1.0", but it didn't make any difference:

// cypress.config.ts

  env: {
    browserPermissions: {
      camera: 'allow',
      image: 'allow'
    }
  },

  e2e: {
    baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',

    setupNodeEvents(on: Cypress.PluginEvents, _config: Cypress.PluginConfigOptions): void {
      on('before:browser:launch', (_browser: Cypress.Browser, launchOptions: Cypress.BeforeBrowserLaunchOptions) => {
        _config = cypressBrowserPermissionsPlugin(on, _config);

        launchOptions.args.push(`--use-fake-ui-for-media-stream`);
        launchOptions.args.push(`--use-fake-device-for-media-stream`);
        launchOptions.args.push('--use-file-for-fake-video-capture=cypress/fixtures/qrCodeTest.y4m');
        return launchOptions;
      });
    }
  }

Chrome: Version 123.0.6312.122 (Official Build) (64-bit)

All the other configurations are in the attached GitHub project

Cypress Version

13.7.3

Node version

v21.6.1

Operating System

Ubuntu 20.04

Debug Logs

No response

Other

No response

[thevladisss]

So what worked for me in this case is that I had to properly format video for ".y4m" format, which I achieved via "ffmpeg -i test.mp4 -pix_fmt yuv420p test.y4m" command. (make sure to install to have ffmpeg installed Also make sure that your browser persmissions plugin enables permissions for camera for Chrome, you can make sure you actually have --use-fake-device-for-media-stream and --use-fake-device-for-media-stream set by logging permissions.