개요

파노라마 사진은 넓은 화각을 가진 사진으로, 여러 장의 사진을 이어붙여 한 장의 이미지로 만들어냅니다. 이러한 파노라마 사진을 웹 브라우저에서 캡처할 수 있다면 사용자들은 로컬에서 파노라마 사진을 쉽게 만들 수 있을 것입니다. 이를 가능하게 해주는 것이 바로 MediaStream API입니다. MediaStream API는 웹 브라우저에서 사용자의 카메라와 마이크에 접근할 수 있도록 도와주는 API로, 웹 기반의 비디오 및 오디오 캡처 기능을 제공합니다.

MediaStream API를 사용한 파노라마 사진 캡처 방법

1. navigator.MediaDevices.getUserMedia() 함수를 사용하여 사용자의 카메라에 접근합니다. 이 함수는 프로미스를 반환하므로, then() 메소드를 사용하여 카메라 스트림을 성공적으로 가져온 후에 다음 단계를 실행하도록 합니다.

   navigator.MediaDevices.getUserMedia({video: true})
     .then(function(stream) {
    // 카메라 스트림을 가져온 후의 작업
     })
     .catch(function(err) {
    console.log("카메라에 접근할 수 없습니다: ", err);
     });
   

2. MediaStream 객체를 생성한 후, ImageCapture 인터페이스를 사용하여 파노라마 사진을 캡처합니다. 이를 위해 ImageCapture.getVideoTracks() 메소드를 사용하여 비디오 트랙을 가져온 후에, ImageCapture(grabFrame()) 메소드를 사용하여 각 프레임을 캡처합니다.

   navigator.MediaDevices.getUserMedia({video: true})
     .then(function(stream) {
    const mediaStream = new MediaStream(stream.getVideoTracks());
    const imageCapture = new ImageCapture(mediaStream.getVideoTracks()[0]);
       
    // 프레임 캡처 및 파노라마 이미지 생성
    imageCapture.grabFrame()
      .then(function(imageBitmap) {
        // 파노라마 이미지 생성 후의 작업
      })
      .catch(function(error) {
        console.log("이미지를 캡처할 수 없습니다: ", error);
      });
     })
     .catch(function(err) {
    console.log("카메라에 접근할 수 없습니다: ", err);
     });
   

3. 캡처된 각 프레임을 이용하여 파노라마 이미지를 생성합니다. 프레임은 ImageCapture.grabFrame() 메소드에 의해 반환된 ImageBitmap 객체로 제공됩니다. 이렇게 얻은 프레임을 적절한 알고리즘을 사용하여 이어붙이고, 최종적으로 하나의 파노라마 이미지를 생성할 수 있습니다.

참고 자료

MediaStream API - MDN Web Docs