이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

토마스 슈타이너

Shape Detection API란 무엇인가요?

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

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

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

현재 상태

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

Shape Detection API 사용 방법

경고: Chrome 83부터 지금까지 기본적으로 바코드 감지만 사용할 수 있지만 얼굴 및 텍스트 인식은 플래그 뒤에서 사용할 수 있습니다. #enable-experimental-web-platform-features 플래그를 사용 설정하여 언제든지 로컬 실험에 Shape Detection API를 사용할 수 있습니다.

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

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

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

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

핵심사항: ImageBitmapSource의 유효 스크립트 출처가 문서의 유효한 스크립트 출처와 동일하지 않을 경우 detect()를 호출하려고 하면 새 SecurityError DOMException과 함께 실패합니다. 이미지 출처가 CORS를 지원하는 경우 crossorigin 속성을 사용하여 CORS 액세스를 요청할 수 있습니다.

`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에서 예상한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요? 보안 모델에 대한 질문이나 의견이 있으신가요?

Shape Detection API GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가합니다.

구현에 문제가 있나요?

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

https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 간단한 재현 안내를 포함하고 구성요소를 Blink>ImageCapture로 설정하세요. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API를 사용할 계획이신가요?

사이트에서 Shape Detection API를 사용할 계획인가요? 공개 지원은 Google에서 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

사용 계획을 WICG 담화 대화목록에서 공유해 주세요.
해시태그 #ShapeDetection를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.

유용한 링크

공개 설명
API 데모 | API 데모 소스
추적 버그
ChromeStatus.com 항목
깜박임 구성요소: Blink>ImageCapture

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

Shape Detection API란 무엇인가요?

추천 사용 사례

얼굴 인식

바코드 감지

텍스트 인식