Web Testing with mocked media stream and device: Simulate webcam video/audio

Have you ever faced following challenges during web test automation?

• Automate Identify verification such as passport or driving licence.
• It can be difficult to test a web application that needs access to the webcam when there is not a physical device available.

If so, this blog helps you to overcome those challenges.

When writing automated tests for your WebRTC applications, there are useful configurations that can be enabled for browsers that make development and testing easier.

Chrome

When running automated tests on Chrome, the following arguments are useful when launching:

• --allow-file-access-from-files - Allows API access for file:// URLs
• --disable-translate - Disables the translation popup
• --use-fake-ui-for-media-stream - Provide fake media streams. Useful when running on CI servers. Avoids the need to grant camera/microphone permissions.
• --use-file-for-fake-audio-capture=<filename> - Provide a file to use when capturing audio.
• --use-file-for-fake-video-capture=<filename> - Provide a file to use when capturing video.
• --headless - Run in headless mode. Useful when running on CI servers.

Add following code in your playwright test class

test.use({
  launchOptions: {
    headless: true,
      args: [
          '--no-sandbox',
          '--allow-file-access-from-files',
          '--use-fake-ui-for-media-stream',
          '--use-fake-device-for-media-stream',
          '--use-file-for-fake-video-capture=./data/fakeIds/valid-passport.y4m',
      ],
  }
});

Sample Y4M files can be downloaded here: http://media.xiph.org/video/derf/
(Only 420 would work — 422 is _not_ supported).

Notes:

• You can only use a .y4m file or .mjpeg to pass a fake video for your chrome test
• To create Y4M file, use FFmpeg tool.
• Unfortunately, can not use multiple streams at the same time.

Let’s try out in playwright

Download a sample code from here: https://github.com/dilshan5/sample-web-playwright/blob/main/qa-test-app-e2e/specs/example-fake-camera-withPermission.spec.ts

When the test runs you can see that a mock camera output has been displayed in the area where your real webcam output was expected. You can change the stream file to load the video you prefer.

Firefox

When running automated tests on Firefox, we need to provide a set of preference keys that will be used on the launched instance. Below is the configuration used for the WebRTC samples automated tests:

"prefs": {
    "browser.cache.disk.enable": false,
    "browser.cache.disk.capacity": 0,
    "browser.cache.disk.smart_size.enabled": false,
    "browser.cache.disk.smart_size.first_run": false,
    "browser.sessionstore.resume_from_crash": false,
    "browser.startup.page": 0,
    "media.navigator.streams.fake": true,
    "media.navigator.permission.disabled": true,
    "device.storage.enabled": false,
    "media.gstreamer.enabled": false,
    "browser.startup.homepage": "about:blank",
    "browser.startup.firstrunSkipsHomepage": false,
    "extensions.update.enabled": false,
    "app.update.enabled": false,
    "network.http.use-cache": false,
    "browser.shell.checkDefaultBrowser": false
}

Conclusion

When a physical device is not available or need to mock a stream, testing web applications that require access to the webcam might be challenging. To imitate webcam access and test web applications with a mocked media stream and device the modern browsers have their own flags to be set.

References

How to create a .Y4M video file that Chrome can use?

Testing WebRTC applications