เทส Webcam ด้วย Playwright ยังไงดี

June 12, 2022

1680

จะเห็นว่าการยืนยันตัวตนเริ่มมีการใช้งานร่วมกับ Web Cam มากขึ้น ไม่ว่าจะเป็น Scan บัตรประชาชน หรือ Face scan ซึ่งก็ทำให้การทำเทสยากขึ้นเป็นเท่าตัว ในกรณีนี้แนะนำว่าให้ลองคุณกับ Developer ให้ทำ By pass ไว้ให้ใช้ เช่นมีปุ่ม By pass หรือดักจากเลขบัตรที่กรอกก็ได้ แต่ถ้าจำเป็นจะต้องเทสจริงๆ การเทส webcam ด้วย Playwright ทำยังไงมาดูกันเลย

เตรียม File Video

Chrome จะลองรับไฟล์ Video ประเภทพ y4m เท่านั้น โดยเราจำเป็นต้องทำการแปลงจากไฟล์ที่เราเตรียมมาก่อนนั่นเอง

สามารถแปลง file mp4 เป็น y4m โดยใช้ Tool https://ffmpeg.org/ หลังจากติดตั้งเสร็จแล้วเราสามารถใช้คำสั่งตามด้านล่างเพื่อ convert mp4 เป็น y4m ได้เลย

ffmpeg -i demo-video.mp4  demo.y4m

เปิดใช้ Fake Webcam

เราสามารถเปิดใช้ Fake Webcam ได้จาก Global Playwright config file หรือไฟล์ playwright.config.ts

  use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
    headless: false,
    permissions: ['camera'],
    channel: 'chromium',
    ...devices['Desktop Chrome'],
    launchOptions: {
      args: [
        '--allow-file-access-from-files', // allows getUserMedia() to be called from file:// URLs
        '--use-fake-ui-for-media-stream', // flag avoids grant the camera
        '--use-fake-device-for-media-stream', // flag allow fake media stream
        `--use-file-for-fake-video-capture=${path.join(__dirname, 'resources', 'demo.y4m')}`,
      ],
    },
  },

สิ่งที่เราจำเป็นต้องเพิ่มคือ launchOptions 4 อย่างด้านล่างนี้

–allow-file-access-from-files
–use-fake-ui-for-media-stream
–use-fake-device-for-media-stream
–use-file-for-fake-video-capture=${path.join(__dirname, ‘resources’, ‘demo.y4m’)}

โดยให้เราระบุ Path ที่เก็บ file video ให้ถูกต้อง

มาทดสอบ Fake Webcam กัน

เราสามารถลองเทส Fake Webcam ได้ที่เว็บนี้เลย https://davidwalsh.name/demo/camera.php

import { test, expect, Page } from '@playwright/test';

test('able to use fake web cam', async ({ page }) => {
  await page.goto('https://davidwalsh.name/demo/camera.php');
  await page.pause();
});

โดยถ้าทุกอย่างถูกต้อง Fake Webcam ก็จะทำการแทนที่ Webcam ของเราอัตโนมัตินั่นเอง