Bard 와 Bing 의 차이

모바일 브라우저에서 카메라 디바이스로 사진을 찍고 파일을 저장해 서버에 전송하는 기능을 구현하고 싶었다.
먼저 카메라를 제어하는 api 가 궁금해서 bard 에게 'javascript 에서 카메라를 제어하는 api는 무엇이 있지?' 라고 물어보았다.
그리고 bard는 MediaDevices API 와 WebRTC API 에 대해 설명하는데
MediaDevices API는 모든 종류의 미디어 장치를 제어하는 데 사용할 수 있는 범용 API 이고
WebRTC API는 실시간으로 통신하는 데 사용할 수 있는 API 라고 샘플 코드도 친절히 알려주었다.

그래서 이번엔 "javascript 로 카메라에서 사진을 찍어 브라우저에 출력 예제 알려줘" 라고 물어봤다.

그리고 bard의 답변은 navigator.mediaDevices 를 이용하여 MediaStreamTrack 의 takePicture() 함수를 호출하는 예제를 알려줬다.

<button id="cameraButton">사진 찍기</button>
<div id="cameraOutput"></div>
// 카메라 버튼
const cameraButton = document.getElementById("cameraButton");

// 카메라 캡처 성공 콜백
const onCaptureSuccess = (blob) => {
  // 사진을 저장합니다.
  const fileName = new Date().getTime() + ".jpg";
  const file = new File([blob], fileName, { type: "image/jpeg" });
  saveAs(file, fileName);
};

// 카메라 캡처 취소 콜백
const onCaptureCancel = () => {
  alert("사진 캡처를 취소하였습니다.");
};

cameraButton.addEventListener("click", () => {
  // 카메라를 실행합니다.
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      facingMode: "environment",
    },
  }).then((stream) => {
    // 카메라에서 비디오 트랙을 가져옵니다.
    const videoTrack = stream.getVideoTracks()[0];

    // 사진을 찍습니다.
    videoTrack.takePicture().then(onCaptureSuccess).catch(onCaptureCancel);
  });
});

하지만 샘플을 실행해보니 'videoTrack.takePicture is not a function' 이라는 오류 메세지가 출력 되어버린다.

그래서 위와 같은 오류가 발생하는데 어떻게 해야하냐고 다시 질문하니 이번엔 다른 코드를 사용하는 예제를 알려준다.

// 카메라 버튼
const cameraButton = document.getElementById("cameraButton");

// 카메라 캡처 성공 콜백
const onCaptureSuccess = (blob) => {
  // 사진을 출력합니다.
  const canvas = document.createElement("canvas");
  canvas.width = blob.width;
  canvas.height = blob.height;
  const context = canvas.getContext("2d");
  context.drawImage(blob, 0, 0);

  // 사진을 캔버스에 출력합니다.
  const element = document.getElementById("cameraOutput");
  element.appendChild(canvas);
};

// 카메라 캡처 취소 콜백
const onCaptureCancel = () => {
  alert("사진 캡처를 취소하였습니다.");
};

cameraButton.addEventListener("click", () => {
  // 카메라를 실행합니다.
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      facingMode: "environment",
      width: 640,
      height: 480,
    },
  }).then((stream) => {
    // 카메라에서 비디오 트랙을 가져옵니다.
    const videoTrack = stream.getVideoTracks()[0];

    // 사진을 찍습니다.
    videoTrack.capture().then(onCaptureSuccess).catch(onCaptureCancel);
  });
});

videoTrack.takePicture() 은 WebRTC API 의 일부이며 모든 브라우저에서는 실행되지 않으니 
navigator.mediaDevices.getUserMedia() 메서드의 video 속성에 width와 height 프로퍼티를 설정하면
브라우저에서 videoTrack.takePicture() 메서드를 대신하여 videoTrack.capture() 메서드를 사용할 수 있게 된다고 한다.
그래서 videoTrack.capture() 를 사용하도록 코드를 수정해 실행해보니 이번엔 'videoTrack.capture() is not a function' 라는 오류만 출력될 뿐이다.

혹시나 내가 모바일 환경임을 알려주지 않아서 그랬나? 싶어서
'javascript 로 모바일 카메라에서 사진을 찍어 브라우저에 출력' 이라고 명확하게 질문하니
다시 처음의 답변인 'videoTrack.takePicture()' 코드를 이용하라는 답변이 나온다.
그래서 bard 를 포기하고 bing 으로 넘어가 동일한 질문을 던져봤다.

bing 은 나에게 

input tag 하나만 달랑 던져주더라...
그리고 성공했다 ㅎㅎㅎ