การเลือก WebCam บน Google Colab ในกรณีมีมากกว่า 1 ตัว

ปกติ Colab ได้เตรียม Snippet เกี่ยวกับการใช้ WebCam มาให้เราแล้วแค่เลือก Code มาใช้แบบง่าย ๆ เลย

พอดีผมทดสอบ API แล้วใช้ Colab ในการทดสอบ และ แสดงตัวอย่างให้กับ Dev คนอื่น ๆ เลยแก้ไข script นิดหน่อยให้สามารถเลือกกล้องได้ถ้าเราเสียบกล้องมากกว่า 1 ตัว

Code ตัวอย่าง

Google Colaboratory

mrchoke / select_webcam_in_colab

Select WebCam in Google Colab

select_webcam_in_colab

Select WebCam in Google Colab

View on GitHub

JavaScript

จริง ๆ ผมใช้ JavaScript ที่ใช้งานเป็นประจำอยู่แล้ว ซึ่งสามารถนำไปประยุกต์ใช้กับ JavaScript Framework อื่น ๆ ได้ด้วย

ตัวอย่าง

// define variables
let camera_id = ''; // current camera id
let stream = null; // current stream
let devices = []; // all camera
const div = document.createElement('div'); // parent div playground
const camera_list = document.createElement('select'); // camera dropdown
const camera_label = document.createElement('h3'); // current selected camera
const video = document.createElement('video'); // video object

// scan all cameras
async function scan_cameras() {
  let camera_found = false;

  await navigator.mediaDevices
      .enumerateDevices()
      .then((deviceInfos) => {
        deviceInfos.forEach((deviceInfo) => {
           if (deviceInfo.kind === 'videoinput') {
            if(!camera_found) {
              camera_label.textContent = `Camera: ${deviceInfo.label}`;
              camera_id = deviceInfo.deviceId
              camera_found = true
            }
            devices.push(deviceInfo)
          }
        })

      })

  div.appendChild(camera_label);
 }

// change camera by id
async function change_camera(e) {
  camera_id = e.target.value;
  camera_label.textContent = `Camera: ${devices.filter(i => i.deviceId == camera_id)[0].label}`;
  await start_camera();
}

// stop all active camera
async function stop_camera() {
  if(stream){
    await stream.getVideoTracks().forEach(track => track.stop());
  }
}

// start camera by selected id
async function start_camera() {
  await stop_camera();
  stream = await navigator.mediaDevices.getUserMedia({video: {deviceId: {exact: camera_id}, audio: false}});
 video.srcObject = stream;
 await video.play();
  }

// create camera list dropdown
function create_camera_select() {
 camera_list.appendChild(new Option("Select Camera", 0))        

 devices.forEach((device, i) => {
 camera_list.appendChild(new Option(device.label || `Camera ${i + 1}`, device.deviceId));
   })

 div.appendChild(camera_list);
 camera_list.addEventListener("change", change_camera);

}

// take photo
async function takePhoto(quality) {
  await scan_cameras();
  create_camera_select();

  const capture = document.createElement('button');
  capture.textContent = 'Capture';
  div.appendChild(capture);

  video.style.display = 'block';
  document.body.appendChild(div);
  div.appendChild(video);
  await start_camera();

   google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);

  // Wait for Capture to be clicked.
  await new Promise((resolve) => capture.onclick = resolve);

  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  await stop_camera();
  div.remove();
  return canvas.toDataURL('image/jpeg', quality);
  }

ตัวอย่างการเลือกกล้อง WebCam

ลองเอาไปประยุกต์ใช้กันดูนะครับ น่าจะได้กับการเลือกไมค์บันทึกเสียงได้ด้วยแต่ผมไม่เคยลอง คือหลักการเดียวกันเลย

---