웹 설정 가이드

이 페이지에서는 MediaPipe를 사용하도록 개발 환경을 설정하는 방법을 설명합니다. JavaScript 웹 애플리케이션의 작업입니다.

지원되는 플랫폼 및 버전

개발 환경에서 MediaPipe Tasks로 웹 애플리케이션을 만들기 위해 에는 다음이 필요합니다.

Chrome 또는 Safari 브라우저
Node.js 및 NPM을 사용하는 웹 애플리케이션 또는 콘텐츠 전송 네트워크를 통해 MediaPipe 작업에 액세스하는 스크립트 태그 (CDN)를 제공합니다.

MediaPipe Tasks는 비전, 텍스트, 오디오를 위해 사전 빌드된 세 가지 라이브러리를 제공합니다. 앱에서 사용하는 MediaPipe 작업에 따라 비전, 텍스트 또는 오디오 라이브러리를 추가해야 합니다.

MediaPipe 태스크 생성형 AI 모듈에는 이미지 또는 있습니다. MediaPipe Tasks 생성형 AI 라이브러리를 가져오려면 다음을 가져옵니다. 다음과 같은 종속 항목을 개발 프로젝트에 추가합니다.

MediaPipe LLM 추론 작업은 tasks-genai 라이브러리에 포함되어 있습니다.

npm install @mediapipe/tasks-genai

서버에 배포하려면 콘텐츠 전송 네트워크 (CDN)를 사용하면 됩니다. jsDelivr과 같은 서비스를 사용하여 HTML 페이지에 삽입해야 합니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

MediaPipe 태스크 비전 모듈에는 이미지 또는 동영상을 처리하는 태스크가 포함되어 있습니다. 인코더-디코더입니다 MediaPipe Tasks 비전 라이브러리를 가져오려면 다음을 가져옵니다. 추가해야 합니다

npm install @mediapipe/tasks-vision

서버에 배포하려면 콘텐츠 전송 네트워크 (CDN)를 사용하면 됩니다. jsDelivr과 같은 서비스를 사용하여 HTML 페이지에 삽입해야 합니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

MediaPipe Tasks 텍스트 모듈에는 문자열 입력을 처리하는 작업이 포함되어 있습니다. 받는사람 MediaPipe Tasks 텍스트 라이브러리를 가져오고, 다음 종속 항목을 가져올 수 있습니다

npm install @mediapipe/tasks-text

서버에 배포하려면 콘텐츠 전송 네트워크 (CDN)를 사용하면 됩니다. jsDelivr과 같은 서비스를 사용하여 HTML 페이지에 삽입해야 합니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/text_bundle.js"
    crossorigin="anonymous"></script>
</head>

MediaPipe Tasks 오디오 모듈에는 사운드 입력을 처리하는 작업이 포함되어 있습니다. 받는사람 MediaPipe Tasks 오디오 라이브러리를 가져오고 다음 종속 항목을 가져올 수 있습니다

npm install @mediapipe/tasks-audio

서버에 배포하려면 콘텐츠 전송 네트워크 (CDN)를 사용하면 됩니다. jsDelivr과 같은 서비스를 사용하여 HTML 페이지에 삽입해야 합니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/audio_bundle.js"
    crossorigin="anonymous"></script>
</head>

BaseOptions는 MediaPipe Task API의 일반적인 구성을 허용합니다.

옵션 이름	설명	허용 값
`modelAssetBuffer`	`Uint8Array` 유형의 배열인 모델 애셋 파일 콘텐츠.	`Uint8Array`
`modelAssetPath`	열어 메모리에 매핑할 모델 애셋의 경로입니다.	`TrustedResourceUrl`
`Delegate`	기기 대리자를 통해 하드웨어 가속을 사용 설정하여 MediaPipe 파이프라인을 실행합니다. 기본값은 `CPU`입니다.	[`CPU`, `GPU`]

MediaPipe와 관련된 기술적 질문에 대한 도움말은 토론을 참조하세요. 그룹 또는 스택 다음에서 지원받을 수 있는 오버플로우 알게 되었습니다. 버그를 신고하거나 기능을 요청하려면 다음에서 문제를 제출하세요. GitHub를 참고하세요.