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

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

navigator.mediaDevices.getUserMedia 등의 API 사용 Android용 Chrome은 사진 선택 도구, 기기에서 이미지 또는 라이브 동영상 데이터를 캡처하기가 상당히 쉬워졌습니다. 로컬 이미지를 업로드할 수 있습니다. 지금까지 이러한 동적 이미지 데이터와 정적인 이미지(예: 이미지, 오디오, 동영상, 오디오, 동영상 등)를 이미지에는 실제로 얼굴, 이미지, 바로 사용할 수 있습니다.

예를 들어 과거에 개발자가 데이터에서 이러한 특성을 추출하고자 한다면 QR 코드 리더를 만들려면 외부 자바스크립트 라이브러리를 사용하는 것이 좋습니다 이 것은 비용이 많이 들 수 있고 전반적인 페이지 크기를 늘릴 수 있습니다. 다른 한쪽에는 운영 체제뿐만 아니라 하드웨어도 카메라 모듈에서 발견된 칩은 일반적으로 이미 성능이 뛰어나고 최적화된 특성 감지기(예: Android) FaceDetector 드림 iOS 일반 기능 감지기를 생성할 때 CIDetector

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

추천 사용 사례

위에서 설명한 것처럼 Shape Detection API는 현재 얼굴, 바코드, 텍스트가 있습니다. 다음 글머리기호 목록에는 사용 사례를 살펴보겠습니다

얼굴 인식

  • 온라인 소셜 네트워크나 사진 공유 사이트는 일반적으로 사용자가 이미지 속 사람들에게 주석을 다는 것입니다. 인식된 얼굴의 경계를 강조표시하면 이 작업을 쉽게 수행할 수 있습니다
  • 콘텐츠 사이트에서는 감지되었을 수 있는 이미지를 기반으로 이미지를 동적으로 자를 수 있습니다. 인식된 얼굴을 강조 표시하거나 Ken Burns와 같은 아티스트와 유사하며 화면 이동 및 확대/축소 효과를 사용할 수 있습니다.
  • 멀티미디어 메시지 사이트에서는 사용자가 선글라스나 콧수염 모델을 학습시킵니다.

바코드 감지

  • QR 코드를 읽는 웹 애플리케이션은 다음과 같은 흥미로운 사용 사례를 활용할 수 있습니다. 웹 탐색을 용이하게 하거나, 바코드를 이용해 메신저 애플리케이션에서 연결을 할 수 있습니다.
  • 쇼핑 앱에서 사용자가 스캔하도록 허용할 수 있음 EAN 또는 UPC 바코드 온라인 가격을 비교할 수 있습니다.
  • 공항에서 승객이 탑승권을 스캔할 수 있는 웹 키오스크를 제공할 수 있습니다. 패스 표시할 Aztec 코드 항공편 관련 맞춤 정보를 제공합니다.

텍스트 인식

  • 온라인 소셜 네트워킹 사이트를 이용하면 감지된 텍스트를 alt 속성으로 추가하여 사용자 제작 이미지 콘텐츠입니다. (다른 설명이 제공되지 않은 경우 <img> 태그의 <ph type="x-smartling-void-element"><br /></ph>)
  • 콘텐츠 사이트에서는 텍스트 감지 기능을 사용하여 텍스트가 포함된 히어로 이미지
  • 웹 애플리케이션은 텍스트 감지 기능을 사용하여 음식점 메뉴를 예로 들 수 있습니다

현재 상태

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

Shape Detection API 사용 방법

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

세 가지 감지기(FaceDetector, BarcodeDetector, TextDetector도 비슷합니다. 모두 단일 비동기 메서드를 제공하며 detect()라는 ImageBitmapSource 입력 (즉, CanvasImageSource, Blob 또는 ImageData)

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

다음 페이지에서 지원 매트릭스를 주의 깊게 확인하세요. 설명서를 다양한 플랫폼에 대한 개요를 제공합니다.

BarcodeDetector 사용

BarcodeDetectorImageBitmapSource, 경계 상자, 감지된 바코드의 형식입니다.

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))();

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

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에서 사용할 수 있습니다. Google Play 서비스 필수 속성입니다.

권장사항

모든 감지기는 비동기식으로 작동합니다. 즉, 기본 스레드가 필요합니다. 따라서 실시간 감지에 의존하지 말고, 오히려 감지기가 작동하는 데 걸리는 시간입니다.

다음 항목을 좋아한다면 웹 작업자 감지기도 여기에 노출된다는 사실을 알게 될 것입니다. 감지 결과는 직렬화가 가능하므로 작업자로부터 전달될 수 있음 postMessage()를 통해 기본 앱으로 이전합니다. 데모에서 이를 실제로 보여줍니다.

일부 플랫폼 구현은 일부 기능을 지원하지 않으므로 신중하게 지원 상황을 파악하고 API를 점진적인 있습니다. 예를 들어 일부 플랫폼에서 얼굴 인식 기능을 지원할 수 있습니다. 얼굴 특징 감지 (눈, 코, 입 등)는 포함되지 않습니다. 또는 텍스트의 위치는 인식할 수 있지만 텍스트 콘텐츠는 인식되지 않습니다.

의견

Chrome팀과 웹 표준 커뮤니티가 Shape Detection API를 사용할 수 있습니다.

API 설계에 대해 알려주세요.

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 API를 구현하는 데 필요한 메서드 또는 속성이 무엇인가요? 보안 모델에 대한 질문이나 의견이 있습니까?

구현에 문제가 있습니까?

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 어떻게 해야 할까요?

  • https://new.crbug.com에서 버그를 신고합니다. 다음과 같이 포함해야 합니다. 재현을 위한 간단한 안내와 구성요소Blink>ImageCapture로 설정합니다. 글리치 쉽고 빠르게 재현할 수 있습니다.

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

사이트에서 Shape Detection API를 사용할 계획이신가요? 공익 활동 기능의 우선순위를 정하는 데 도움이 되며, 다른 브라우저 공급업체에 지원하는 것이 매우 중요합니다

유용한 링크