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

Published in

NECTEC

2 min readFeb 20, 2022

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

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

Code ตัวอย่าง

Google Colaboratory

Use and Select WebCam in Google Colabcolab.research.google.com

GitHub - mrchoke/select_webcam_in_colab: Select WebCam in Google Colab

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

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);
  }

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