CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 동일 출처 정책(Same-Origin Policy)에 의해 제한되는 보안 상의 제약을 우회하기 위한 메커니즘입니다. CORS를 사용하면 다른 도메인의 자원에 접근할 수 있으며, 이를 통해 웹캠과 같은 디바이스에 접근하는 것도 가능해집니다.

다른 도메인의 웹캠에 접근하기 위해서는 먼저 웹캠에 접근할 수 있는 권한을 얻어야 합니다. 이를 위해 다음의 단계를 따라갈 수 있습니다.

1. HTML에서 video 요소를 추가하여 웹캠을 보여줄 영역을 지정합니다.

<video id="webcam"></video>

1. 자바스크립트에서 웹캠에 접근하고 동영상을 보여주는 코드를 작성합니다. 이 때, CORS를 해결하기 위해 getUserMedia 메소드 대신 navigator.mediaDevices.getUserMedia 메소드를 사용합니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const webcam = document.getElementById('webcam');
    webcam.srcObject = stream;
    webcam.play();
  })
  .catch(error => {
    console.error('웹캠 접근 실패:', error);
  });

1. CORS 에러가 발생하는 경우, 서버 측에서 CORS 헤더를 설정해야 합니다. 다음은 Node.js와 Express를 사용하여 서버에서 CORS 헤더를 설정하는 예시입니다.

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 서버에서 웹캠 스트림 관련 로직 작성

app.listen(3000, () => {
  console.log('서버가 3000 포트에서 실행 중입니다.');
});

위의 예제 코드는 Express를 사용하여 사용자의 요청에 대해 CORS 헤더를 추가하고, 웹캠 스트림 관련 로직을 작성하는 방법을 보여줍니다.

CORS를 사용하여 다른 도메인의 웹캠을 사용하는 방법에 대해 알아보았습니다. 기존의 동일 출처 정책에 의해 제한되는 접근을 허용함으로써 더 다양한 웹 애플리케이션을 개발할 수 있습니다.