Shape Detection API: 사진 한 장이 천 마디의 단어, 얼굴, 바코드보다 낫습니다.

Shape Detection API는 이미지에서 얼굴, 바코드, 텍스트를 감지합니다.

Thomas Steiner

Shape Detection API란 무엇인가요?

navigator.mediaDevices.getUserMedia와 같은 API와 Android용 Chrome 사진 선택 도구를 사용하면 기기 카메라에서 이미지나 실시간 동영상 데이터를 캡처하거나 로컬 이미지를 업로드하는 것이 매우 쉬워졌습니다. 지금까지는 페이지의 정적 이미지와 마찬가지로 이 동적 이미지 데이터에 코드로 액세스할 수 없었습니다. 하지만 이미지에 얼굴, 바코드, 텍스트와 같은 흥미로운 기능이 많이 포함되어 있을 수 있습니다.

예를 들어 이전에는 개발자가 클라이언트에서 이러한 기능을 추출하여 QR 코드 리더를 빌드하려면 외부 JavaScript 라이브러리를 사용해야 했습니다. 이는 성능 관점에서 비용이 많이 들고 전반적인 페이지 크기가 늘어날 수 있습니다. 반면 Android, iOS, macOS를 비롯한 운영체제와 카메라 모듈에 있는 하드웨어 칩에는 일반적으로 Android FaceDetector 또는 iOS 일반 기능 감지기 CIDetector와 같이 성능이 우수하고 고도로 최적화된 기능 감지기가 이미 있습니다.

Shape Detection API는 일련의 JavaScript 인터페이스를 통해 이러한 구현을 노출합니다. 현재 지원되는 기능은 FaceDetector 인터페이스를 통한 얼굴 감지, BarcodeDetector 인터페이스를 통한 바코드 감지, TextDetector 인터페이스를 통한 텍스트 감지 (광학 문자 인식(OCR))입니다.

추천 사용 사례

위에 설명된 대로 Shape Detection API는 현재 얼굴, 바코드, 텍스트 감지를 지원합니다. 다음 글머리기호 목록에는 세 가지 기능의 사용 사례 예시가 포함되어 있습니다.

얼굴 인식

  • 온라인 소셜 네트워킹 또는 사진 공유 사이트에서는 일반적으로 사용자가 이미지에 사람을 주석할 수 있습니다. 감지된 얼굴의 경계를 강조 표시하면 이 작업이 용이해집니다.
  • 콘텐츠 사이트는 다른 휴리스틱을 사용하는 대신 감지될 가능성이 있는 얼굴을 기반으로 이미지를 동적으로 자르거나 스토리 형식의 켄 번즈와 같은 화면 이동 및 확대/축소 효과로 감지된 얼굴을 강조 표시할 수 있습니다.
  • 멀티미디어 메시지 사이트에서는 사용자가 감지된 얼굴 지형지물에 선글라스나 수염과 같은 재미있는 물체를 오버레이할 수 있습니다.

바코드 감지

  • QR 코드를 읽는 웹 애플리케이션은 온라인 결제나 웹 탐색과 같은 흥미로운 사용 사례를 활용하거나 메신저 애플리케이션에서 소셜 연결을 설정하기 위해 바코드를 사용할 수 있습니다.
  • 쇼핑 앱을 사용하면 사용자가 오프라인 매장에서 상품의 EAN 또는 UPC 바코드를 스캔하여 온라인에서 가격을 비교할 수 있습니다.
  • 공항은 승객이 탑승권의 Aztec 코드를 스캔하여 항공편과 관련된 맞춤 정보를 표시할 수 있는 웹 키오스크를 제공할 수 있습니다.

텍스트 인식

  • 온라인 소셜 네트워킹 사이트는 다른 설명이 제공되지 않은 경우 감지된 텍스트를 <img> 태그의 alt 속성으로 추가하여 사용자 제작 이미지 콘텐츠의 접근성을 개선할 수 있습니다.
  • 콘텐츠 사이트는 텍스트 감지를 사용하여 텍스트가 포함된 대표 이미지 위에 제목을 배치하지 않을 수 있습니다.
  • 웹 애플리케이션은 텍스트 감지를 사용하여 식당 메뉴와 같은 텍스트를 번역할 수 있습니다.

현재 상태

단계 상태
1. 설명 동영상 만들기 완전함
2. 사양의 초안 작성 완전함
3. 의견 수집 및 디자인 반복 진행 중
4. 오리진 트라이얼 완전함
5. 실행 바코드 감지 완료
얼굴 인식 진행 중
텍스트 감지 진행 중

Shape Detection API 사용 방법

로컬에서 Shape Detection API를 실험하려면 about://flags에서 #enable-experimental-web-platform-features 플래그를 사용 설정하세요.

세 가지 감지기(FaceDetector, BarcodeDetector, TextDetector)의 인터페이스는 모두 비슷합니다. 모두 ImageBitmapSource (CanvasImageSource, Blob 또는 ImageData)를 입력으로 사용하는 단일 비동기 메서드 detect()를 제공합니다.

FaceDetector 및 BarcodeDetector의 경우 선택적 매개변수를 감지기의 생성자에 전달하여 기본 감지기에 힌트를 제공할 수 있습니다.

설명의 지원 매트릭스에서 다양한 플랫폼에 관한 개요를 자세히 확인하세요.

BarcodeDetector 사용

BarcodeDetector는 ImageBitmapSource 및 경계 상자에서 찾은 바코드 원시 값과 감지된 바코드의 형식과 같은 기타 정보를 반환합니다.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

FaceDetector 사용

FaceDetector는 항상 ImageBitmapSource에서 감지한 얼굴의 경계 상자를 반환합니다. 플랫폼에 따라 눈, 코, 입과 같은 얼굴 랜드마크에 관한 추가 정보가 제공될 수 있습니다. 이 API는 얼굴만 감지한다는 점에 유의하세요. 얼굴이 누구의 얼굴인지 식별하지는 않습니다.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

TextDetector 사용

TextDetector는 항상 감지된 텍스트의 경계 상자를 반환하며 일부 플랫폼에서는 인식된 문자를 반환합니다.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

기능 감지

Shape Detection API를 기능 감지하기 위해 생성자의 존재만 확인하는 것으로는 충분하지 않습니다. 인터페이스가 있다고 해서 기본 플랫폼에서 기능을 지원하는지 알 수 있는 것은 아닙니다. 이는 의도한 대로 작동하는 것입니다. 따라서 다음과 같이 기능 감지를 실행하는 방어적 프로그래밍 접근 방식을 사용하는 것이 좋습니다.

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

BarcodeDetector 인터페이스가 getSupportedFormats() 메서드를 포함하도록 업데이트되었으며 이와 유사한 인터페이스가 FaceDetector 및 TextDetector에 제안되었습니다.

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

이렇게 하면 QR 코드 스캔과 같은 필요한 특정 기능을 감지할 수 있습니다.

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

이는 인터페이스를 숨기는 것보다 낫습니다. 플랫폼 간에 기능이 다를 수 있으므로 개발자는 필요한 기능(예: 특정 바코드 형식 또는 얼굴 지형지물)을 정확하게 확인해야 합니다.

운영체제 지원

바코드 감지는 macOS, ChromeOS, Android에서 사용할 수 있습니다. Android에서는 Google Play 서비스가 필요합니다.

권장사항

모든 감지기는 비동기식으로 작동합니다. 즉, 기본 스레드를 차단하지 않습니다. 따라서 실시간 감지에 의존하지 말고 감지기가 작동할 시간을 기다리세요.

웹 워커를 좋아한다면 감지기도 여기에 노출된다는 점을 알면 좋습니다. 감지 결과는 직렬화할 수 있으므로 postMessage()를 통해 작업자에서 기본 앱으로 전달할 수 있습니다. 데모에서 이를 확인할 수 있습니다.

일부 플랫폼 구현은 일부 기능만 지원하므로 지원 상황을 신중하게 확인하고 API를 점진적 개선으로 사용하세요. 예를 들어 일부 플랫폼은 얼굴 감지는 지원하지만 얼굴 지형지물 감지 (눈, 코, 입 등)는 지원하지 않을 수 있습니다. 또는 텍스트의 존재와 위치는 인식되지만 텍스트 내용은 인식되지 않을 수 있습니다.

의견

Chrome팀과 웹 표준 커뮤니티는 Shape Detection API 사용 경험에 관한 의견을 기다리고 있습니다.

API 설계 설명

API에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 관해 질문이나 의견이 있으신가요?

구현에 문제가 있나요?

Chrome 구현에서 버그를 발견했나요? 아니면 구현이 사양과 다른가요?

  • https://new.crbug.com에서 버그를 신고합니다. 최대한 자세한 내용과 재현을 위한 간단한 안내를 포함하고 구성요소를 Blink>ImageCapture로 설정합니다. Glitch는 빠르고 간편한 재현을 공유하는 데 적합합니다.

API를 사용하려면 어떻게 해야 하나요?

사이트에서 Shape Detection API를 사용하려면 어떻게 해야 하나요? 공개적으로 지원해 주시면 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에게 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

유용한 링크