[Feature] Add support for better testing WebRTC applications with Webkit

[OlgaKuksa]

According to WebRTC testing guide, there is a list of parameters which are recommended to be passed to Chrome or Firefox for testing WebRTC applications. But there is nothing for Safari (Webkit).
Is there a way to make Playwright Webkit engine support flags like Chromium does? That would be nice for testing apps which use WebRTC.
IMHO - same Playwright API across all the browser engines would be great!

UPD: There's an article A Closer Look Into WebRTC. It states that AV capture devices in Webkit can be mocked and camera and microphone policy can be set to allowed state to avoid prompts from getUserMedia.

[R-Bower]

Any progress on this? Webkit WebRTC testing would be a huge boon for a major project I'm working on.

[kirbysayshi]

I was looking into this too (made a discussion/q&a about it here: https://github.com/microsoft/playwright/discussions/6166).

Just to repeat what I found: on a mac target, you can configure the system prefs (defaults) in a similar manner to chrome. But I have not figured out how to do it on linux webkit yet.

Additionally, attempting to grant camera permissions on webkit currently causes playwright to throw, at least in linux.

I know none of this info is a "solve" but just wanted to share what I'd learned in case it helps someone else.

[d4niloArantes]

I think I found here what I have asked in the 2525

[innoist]

did you find anything? we have a large suit of test for our video application --- which is working perfect on chrome with --fake-camera flag. We love to run it on safari, but still struggling.

[Xotabu4]

@kirbysayshi i confirm that it adding permission: ['camera'], also throw on mac os 10.15.7 with playwright 1.10.0

[vpalmisano]

The not-headless webkit version works setting --enable-mock-capture-devices=true option. For the --headless version (using wpe), we need to enable "enable-mock-capture-devices" in the wpe build:
https://wpewebkit.org/reference/wpewebkit/2.23.90/WebKitSettings.html#webkit-settings-set-enable-mock-capture-devices

[vpalmisano]

I've prepared a patch for adding a "enable-mock-capture-devices" command line option to the wpe executable.
I'm no able to update the browser_patches/webkit/patches/bootstrap.diff, I've tried ./browser_patches/export.sh webkit but the script stops at this command git merge-base $REMOTE_BROWSER_UPSTREAM/$BASE_BRANCH $CURRENT_BRANCH.

The patch:

diff --git a/Tools/MiniBrowser/wpe/main.cpp b/Tools/MiniBrowser/wpe/main.cpp
index ff87f17bd3dc..cf6650a4fda1 100644
--- a/Tools/MiniBrowser/wpe/main.cpp
+++ b/Tools/MiniBrowser/wpe/main.cpp
@@ -42,9 +42,6 @@ static gboolean automationMode;
 static gboolean ignoreTLSErrors;
 static gboolean inspectorPipe;
 static gboolean noStartupWindow;
-// Playwright begin
-static gboolean enableMockCaptureDevices;
-// Playwright end
 static const char* userDataDir;
 static const char* contentFilter;
 static const char* cookiesFile;
@@ -72,9 +69,6 @@ static const GOptionEntry commandLineOptions[] =
     { "inspector-pipe", 'v', 0, G_OPTION_ARG_NONE, &inspectorPipe, "Expose remote debugging protocol over pipe", nullptr },
     { "user-data-dir", 0, 0, G_OPTION_ARG_STRING, &userDataDir, "Default profile persistence folder location", "FILE" },
     { "no-startup-window", 0, 0, G_OPTION_ARG_NONE, &noStartupWindow, "Do not open default page", nullptr },
-// Playwright begin
-    { "enable-mock-capture-devices", 0, 0, G_OPTION_ARG_NONE, &enableMockCaptureDevices, "Enable mock capture devices", nullptr },
-// Playwright end
     { G_OPTION_REMAINING, 0, 0, G_OPTION_ARG_FILENAME_ARRAY, &uriArguments, nullptr, "[URL]" },
     { nullptr, 0, 0, G_OPTION_ARG_NONE, nullptr, nullptr, nullptr }
 };
@@ -395,9 +389,6 @@ int main(int argc, char *argv[])
                 return static_cast<WPEToolingBackends::HeadlessViewBackend*>(data)->snapshot();
             });
     }
-    if (enableMockCaptureDevices) {
-        webkit_settings_set_enable_mock_capture_devices(settings, TRUE);
-    }
 // Playwright end
     auto* webView = WEBKIT_WEB_VIEW(g_object_new(WEBKIT_TYPE_WEB_VIEW,
         "backend", viewBackend,

[Palak-Jethwani]

I have recently tried this in webkit headless as well as headed mode . it always shows pop-up message for camera permission (ie. doesn't suppress permission) even with launch option argument provided. Not sure if I am using correct launch options. Here is the snippet of my config and test

`import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {

use: {
    headless: true,
    screenshot: "on",
    trace: "retain-on-failure",
    baseURL: "https://uat.groww.in",        
    acceptDownloads : true,       
},
projects:[
    {
        name:"chrome",
        use:{
            browserName:"chromium",
            permissions:["camera"],
            launchOptions:{
                args:[
                    "--no-sandbox",
                    "--disable-setuid-sandbox",
                    "--use-fake-device-for-media-stream",
                    "--use-fake-ui-for-media-stream",
                    "--use-file-for-fake-video-capture=./data/fakeCameraCapureDP.y4m"
                ]
            }
        }
    },
    {
        name:"firefox",
        use:{
            browserName:"firefox",
            launchOptions:{
                args:[
                    "--quiet",
                    "--use-test-media-devices" 
                ],
                firefoxUserPrefs: { "media.navigator.streams.fake": true, "media.navigator.permission.disabled": true }
            }               
        },
    },
    {
        name:"safari",
        use:{
            browserName:"webkit",
            launchOptions:{
                args:[
                    "--enable-mock-capture-devices=true",
                    "--enable-media-stream=true"
                ]
            }
        }
    }
],
retries: 0,
timeout: 1000000,
reporter: [
    ['line'], 
    ["json", { outputFile: "test-result.json" }],
    ['experimental-allure-playwright']
],
// testDir : 'fixtures',
testDir : 'test',

}
export default config;`

test
`import test, { expect } from "../fixtures/basePages"

let cam_launcher = "//*[text()='Test my cam']";
let stop_webcam = "//button[text()='Stop webcam']"

test.describe('dummy camera test',async()=>{
test('webcam test',async({page,context,browser})=>{
await page.goto('https://webcamtests.com/');
await page.locator(cam_launcher).click();
await page.locator(stop_webcam).waitFor();
await page.locator(stop_webcam).click()
})
})`

note : I created this only to test fake camera.

terminal command: npx playwright test dummy.test --headed --project=safari
attached trace.zip
trace.zip

When can we expect this working ?

[ronit100ms]

Just add
permissions: ['microphone', 'camera']
You will be able to run it locally after this
in Headless mode too

But I am not able to run it on Git Actions
Even after adding

permissions: ['microphone', 'camera'],
use: {
        channel: 'chrome',
        launchOptions:{
          args:[
              "--use-fake-device-for-media-stream",
              "--use-fake-ui-for-media-stream",
          ]
      }
      }

I am getting error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR! 
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Error: Process completed with exit code 1.

[nirazv]

Its been 2year since the feature request was opened and i can see no progress was made by the Playwright team.