앱에 Azure AI Video Indexer 위젯 포함

아티클
03/01/2024

Important

Azure Media Services 사용 중지 발표로 인해 Azure AI Video Indexer는 Azure AI Video Indexer 기능 조정을 발표합니다. AZURE AI Video Indexer 계정에 대한 의미를 이해하려면 AMS(Azure Media Service) 사용 중지와 관련된 변경 내용을 참조하세요. AMS 사용 중지 준비: VI 업데이트 및 마이그레이션 가이드를 참조하세요.

이 문서에서는 앱에 Azure AI Video Indexer 위젯을 포함하는 방법을 보여 줍니다. Azure AI Video Indexer는 앱에 인사이트, 플레이어 및 편집기의 세 가지 유형의 위젯을 포함하도록 지원합니다.

Insights 위젯에는 비디오 인덱싱 프로세스에서 추출된 모든 시각적 인사이트가 포함됩니다. Insights 위젯은 다음과 같은 선택적 URL 매개 변수를 지원합니다.

이름	정의	설명
`widgets`	쉼표로 구분된 문자열	렌더링하려는 인사이트를 제어할 수 있습니다. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords`에서는 사용자 및 키워드 UI 인사이트만 렌더링합니다. 사용 가능한 옵션: `people`, `keywords`,, `audioEffectslabels`, `sentiments`,`emotions`, `topics`, `transcriptkeyframes`, `ocrspeakers`, `namedEntitiesscenesspokenLanguageobservedPeopledetectedObjects`, .
`controls`	쉼표로 구분된 문자열	렌더링하려는 컨트롤을 제어할 수 있습니다. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` 검색 옵션 및 다운로드 단추만 렌더링합니다. 사용 가능한 옵션: `search`, `download`, `languagepresets`.
`language`	짧은 언어 코드(언어 이름)	인사이트 언어를 제어합니다. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` 또는 `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	짧은 언어 코드	UI의 언어를 제어합니다. 기본값은 `en`입니다. 예: `locale=de`
`tab`	기본 선택 탭	기본적으로 렌더링되는 인사이트 탭을 제어합니다. 예: `tab=timeline` 타임라인 탭이 선택된 상태에서 인사이트를 렌더링합니다.
`search`	문자열	초기 검색어를 제어할 수 있습니다. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure`는 "Azure"라는 단어로 필터링된 인사이트를 렌더링합니다.
`sort`	쉼표로 구분된 문자열	인사이트 정렬을 제어할 수 있습니다. 각 정렬은 '_'로 연결된 위젯 이름, 속성 및 순서의 3가지 값(`sort=name_property_order`)으로 구성됩니다. 사용 가능한 옵션: 위젯: `keywords`, ,`audioEffects`, `labelssentiments`, `emotions`, `namedEntitieskeyframesscenes`및 .`spokenLanguage` property: `startTime`, `endTime`, `seenDurationname` 및 `ID`. 순서: asc 및 desc. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc`는 ID로 정렬된 레이블을 오름차순으로 렌더링하고 이름으로 정렬된 키워드를 내림차순으로 렌더링합니다.
`location`		매개 변수는 `location` 포함된 링크에 포함되어야 합니다. 해당 지역의 이름을 가져오는 방법을 참조하세요. 계정이 미리 보기 상태인 `trial` 경우 위치 값에 사용해야 합니다. `trial`은 `location` 매개 변수의 기본값입니다.

플레이어 위젯을 사용하여 적응 비트 전송률을 사용하여 비디오를 스트리밍할 수 있습니다. 플레이어 위젯은 다음과 같은 선택적 URL 매개 변수를 지원합니다.

이름	정의	설명
`t`	시작 후 경과한 시간(초)	플레이어가 지정된 시간 지점에서 재생을 시작하게 합니다. 예: `t=60`
`captions`	언어 코드/언어 코드 배열	캡션 메뉴에서 사용할 수 있도록 위젯 로드 중에 지정된 언어로 캡션 가져옵니다. 예: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	부울 값	캡션 이미 사용하도록 설정된 상태로 플레이어 로드를 만듭니다. 예: `showCaptions=true`
`type`		오디오 플레이어 스킨을 활성화합니다(비디오 부분이 제거됨). 예: `type=audio`
`autoplay`	부울 값	플레이어가 로드될 때 비디오 재생을 시작해야 하는지를 나타냅니다. 기본값은 `true`입니다. 예: `autoplay=false`
`language`/`locale`	언어 코드	플레이어 언어를 제어합니다. 기본값은 `en-US`입니다. 예: `language=de-DE`
`location`		매개 변수는 `location` 포함된 링크에 포함되어야 합니다. 해당 지역의 이름을 가져오는 방법을 참조하세요. 계정이 미리 보기 상태인 `trial` 경우 위치 값에 사용해야 합니다. `trial`은 `location` 매개 변수의 기본값입니다.
`boundingBoxes`	경계 상자의 배열입니다. 옵션: 사람(얼굴), 관찰된 사람 및 감지된 개체입니다. 값은 쉼표(",")로 구분해야 합니다.	플레이어를 포함할 때 경계 상자를 설정/해제하는 옵션을 제어합니다. 언급된 모든 옵션이 켜집니다. 예: `boundingBoxes=observedPeople,people,detectedObjects` 기본값은 `boundingBoxes=observedPeople,detectedObjects` 관찰된 사용자 및 검색된 개체 경계 상자만 켜짐)입니다.

편집기 위젯을 사용하여 새 프로젝트를 만들고 비디오의 인사이트를 관리할 수 있습니다. 편집기 위젯은 다음과 같은 선택적 URL 매개 변수를 지원합니다.

이름	정의	설명
`accessToken`^*	문자열	위젯을 포함하는 데 사용되는 계정에만 있는 비디오에 대한 액세스를 제공합니다. 편집기 위젯에는 `accessToken` 매개 변수가 필요합니다.
`language`	언어 코드	플레이어 언어를 제어합니다. 기본값은 `en-US`입니다. 예: `language=de-DE`
`locale`	짧은 언어 코드	인사이트 언어를 제어합니다. 기본값은 `en`입니다. 예: `language=de`
`location`		매개 변수는 `location` 포함된 링크에 포함되어야 합니다. 해당 지역의 이름을 가져오는 방법을 참조하세요. 계정이 미리 보기 상태인 `trial` 경우 위치 값에 사용해야 합니다. `trial`은 `location` 매개 변수의 기본값입니다.

^*소유자는 accessToken을 신중하게 제공해야 합니다.

비디오 포함

이 섹션에서는 웹 사이트를 사용하거나 URL을 앱에 수동으로 어셈블하여 비디오를 포함하는 방법을 설명합니다.

매개 변수는 location 포함된 링크에 포함되어야 합니다. 해당 지역의 이름을 가져오는 방법을 참조하세요. 계정이 미리 보기 상태인 trial 경우 위치 값에 사용해야 합니다. trial은 location 매개 변수의 기본값입니다. 예: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial

웹 사이트 환경

비디오를 포함하려면 아래 설명에 따라 웹 사이트를 사용하세요.

Azure AI Video Indexer 웹 사이트에 로그인합니다.
작업할 비디오를 선택하고 재생을 누릅니다.
원하는 위젯 유형(인사이트, 플레이어 또는 편집기)을 선택합니다.
</> 포함을 클릭합니다.
포함 코드를 복사합니다(공유 및 포함 대화 상자에서 포함된 코드 복사에 표시됨).
코드를 앱에 추가합니다.

참고 항목

플레이어 또는 인사이트 위젯에 대한 링크를 공유하면 액세스 토큰이 포함되고 계정에 읽기 전용 권한이 부여됩니다.

URL을 수동으로 어셈블

공개 비디오

다음과 같이 URL을 어셈블하는 공용 비디오를 포함할 수 있습니다.

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>

비공개 비디오

비공개 비디오를 포함하려면 액세스 토큰을 전달해야 합니다(iframe의 src 특성에 있는 비디오 액세스 토큰 얻기 사용).

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>/?accessToken=<accessToken>

편집 인사이트 기능 제공

포함된 위젯에서 편집 인사이트 기능을 제공하려면 편집 권한이 포함된 액세스 토큰을 전달해야 합니다. 비디오 액세스 토큰 얻기를 &allowEdit=true 상태로 사용하세요.

위젯 상호 작용

Insights 위젯은 앱의 비디오와 상호 작용할 수 있습니다. 이 섹션에서는 이러한 상호 작용을 수행하는 방법을 보여 줍니다.

흐름 개요

대본을 편집하면 다음 흐름이 발생합니다.

타임라인 대본을 편집합니다.
Azure AI Video Indexer는 이러한 업데이트를 가져오고 언어 모델의 대본 편집에서 저장 합니다 .
자막이 업데이트됩니다.
- Azure AI Video Indexer의 플레이어 위젯을 사용하는 경우 자동으로 업데이트됩니다.
- 외부 플레이어를 사용하는 경우 새 캡션 파일 사용자에게 비디오 캡션 가져오기 호출을 받습니다.

원본 간 통신

Azure AI Video Indexer 위젯이 다른 구성 요소와 통신하도록 하려면 다음을 수행합니다.

원본 간 통신 HTML5 메서드를 postMessage사용합니다.
VideoIndexer.ai 원본에서 메시지의 유효성을 검사합니다.

고유한 플레이어 코드를 구현하고 Insights 위젯과 통합하는 경우 VideoIndexer.ai 제공된 메시지의 출처를 확인하는 것은 사용자의 책임입니다.

앱 또는 블로그에 위젯 포함(권장)

이 섹션에서는 사용자가 앱에서 인사이트 컨트롤을 선택하면 플레이어가 관련 순간으로 이동하도록 두 Azure AI Video Indexer 위젯 간의 상호 작용을 달성하는 방법을 보여 줍니다.

플레이어 위젯 포함 코드를 복사합니다.
Insights 포함 코드를 복사합니다.
두 위젯 간의 통신을 처리하는 중재자 파일을 추가합니다.
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

이제 사용자가 앱에서 인사이트 컨트롤을 클릭하면 플레이어는 관련 시점으로 이동합니다.

자세한 내용은 Azure AI Video Indexer - 두 위젯 데모 포함을 참조하세요.

Video Indexer Player 이외의 비디오 플레이어를 사용하는 경우 통신을 위해 비디오 플레이어를 수동으로 조작해야 합니다.

비디오 플레이어를 삽입합니다.

예를 들어 표준 HTML5 플레이어는 다음과 같습니다.

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//breakdown.blob.core.windows.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Insights 위젯을 포함합니다.

"메시지" 이벤트를 수신 대기하여 플레이어에 대한 통신을 구현합니다. 예시:

<script>

    (function(){
    // Reference your player instance.
    var playerInstance = document.getElementById('vid1');

    function jumpTo(evt) {
      var origin = evt.origin || evt.originalEvent.origin;

      // Validate that the event comes from the videoindexer domain.
      if ((origin === "https://www.videoindexer.ai") && evt.data.time !== undefined){

        // Call your player's "jumpTo" implementation.
        playerInstance.currentTime = evt.data.time;

        // Confirm the arrival to us.
        if ('postMessage' in window) {
          evt.source.postMessage({confirm: true, time: evt.data.time}, origin);
        }
      }
    }

    // Listen to the message event.
    window.addEventListener("message", jumpTo, false);

    }())    

</script>

자세한 내용은 Video Indexer Player + VI Insights 데모를 참조하세요.

포함 가능 위젯 사용자 지정

원하는 인사이트 유형을 선택할 수 있습니다. 이렇게 하려면 API 또는 Azure AI Video Indexer 웹 사이트에서 &widgets=<list of wanted widgets>가져오는 embed 코드에 추가되는 다음 URL 매개 변수의 값으로 지정합니다.

가능한 값은 여기에 나열되어 있습니다.

예를 들어 사용자 및 키워드(keyword) 인사이트만 포함하는 위젯을 포함하려는 경우 iframe 포함 URL은 다음과 같습니다.

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords

iframe URL을 제공하여 iframe 창의 제목을 &title=<YourTitle> 사용자 지정할 수도 있습니다. (HTML <title> 값을 사용자 지정합니다).

예를 들어 iframe 창에 제목 "MyInsights"를 지정하려는 경우 URL은 다음과 같습니다.

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?title=MyInsights

이 옵션은 새 창에서 인사이트를 열어야 하는 경우에만 관련이 있습니다.

Azure AI Video Indexer 플레이어를 포함하는 경우 iframe의 크기를 지정하여 플레이어의 크기를 선택할 수 있습니다.

예시:

> [!VIDEO https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/]>/<videoId>/" frameborder="0" allowfullscreen />

기본적으로 Azure AI Video Indexer 플레이어는 비디오의 대본을 기반으로 하는 닫힌 캡션 자동으로 생성됩니다. 대본은 비디오가 업로드될 때 선택된 원본 언어로 비디오에서 추출됩니다.

다른 언어로 포함하려는 경우 포함 플레이어 URL에 추가할 &captions=<Language Code> 수 있습니다. 기본적으로 캡션 표시하려면 &showCaptions=true를 전달할 수 있습니다.

그러면 포함 URL은 다음과 같이 표시됩니다.

https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/?captions=en-us

자동 재생

기본적으로 플레이어에서 비디오 재생을 시작합니다. 위의 embed URL로 전달 &autoplay=false 하지 않도록 선택할 수 있습니다.

코드 샘플

Azure AI Video Indexer API 및 위젯에 대한 샘플이 포함된 코드 샘플 리포지토리를 참조하세요.

파일/폴더	설명
`control-vi-embedded-player`	VI Player를 포함하고 외부에서 제어합니다.
`custom-index-location`	사용자 지정 외부 위치에서 VI Insights를 포함합니다(고객 Blob일 수 있음).
`embed-both-insights`	플레이어 및 인사이트 모두 VI Insights의 기본 사용.
`customize-the-widgets`	사용자 지정된 옵션을 사용하여 VI 위젯을 포함합니다.
`embed-both-widgets`	VI Player와 Insights를 포함하고 이들 간에 통신합니다.
`url-generator`	사용자 지정 옵션에 따라 위젯 사용자 지정 포함 URL을 생성합니다.
`html5-player`	기본 HTML5 비디오 플레이어와 함께 VI Insights를 포함합니다.

지원되는 브라우저

자세한 내용은 지원되는 브라우저를 참조 하세요.

npmjs 패키지를 사용하여 앱에 Azure AI Video Indexer 위젯 포함 및 사용자 지정

@azure/video-analyzer-for-media-widgets 패키지를 사용하여 앱에 인사이트 위젯을 추가하고 필요에 따라 사용자 지정할 수 있습니다.

이 새 패키지를 사용하여 인사이트 위젯을 포함할 iframe 요소를 추가하는 대신 위젯 간에 쉽게 포함 및 통신할 수 있습니다. 위젯 사용자 지정은 이 패키지에서만 지원되며, 모두 한 위치에서 수행됩니다.

자세한 내용은 공식 GitHub를 참조하세요.

Azure AI Video Indexer 인사이트를 보고 편집하는 방법에 대한 자세한 내용은 Azure AI Video Indexer 인사이트 보기 및 편집을 참조 하세요.

또한 Azure AI Video Indexer CodePen을 검사.

앱에 Azure AI Video Indexer 위젯 포함

위젯 형식

인사이트 위젯

플레이어 위젯

편집기 위젯

비디오 포함

웹 사이트 환경

URL을 수동으로 어셈블

공개 비디오

비공개 비디오

편집 인사이트 기능 제공

위젯 상호 작용

흐름 개요

원본 간 통신

앱 또는 블로그에 위젯 포함(권장)

Azure AI Video Indexer Insights 위젯 포함 및 다른 비디오 플레이어 사용

포함 가능 위젯 사용자 지정

인사이트 위젯

플레이어 위젯

자동 재생

코드 샘플

지원되는 브라우저

npmjs 패키지를 사용하여 앱에 Azure AI Video Indexer 위젯 포함 및 사용자 지정

피드백

피드백

추가 리소스

앱에 Azure AI Video Indexer 위젯 포함

위젯 형식

인사이트 위젯

플레이어 위젯

편집기 위젯

비디오 포함

웹 사이트 환경

URL을 수동으로 어셈블

공개 비디오

비공개 비디오

편집 인사이트 기능 제공

위젯 상호 작용

흐름 개요

원본 간 통신

앱 또는 블로그에 위젯 포함(권장)

Azure AI Video Indexer Insights 위젯 포함 및 다른 비디오 플레이어 사용

포함 가능 위젯 사용자 지정

인사이트 위젯

플레이어 위젯

자동 재생

코드 샘플

지원되는 브라우저

npmjs 패키지를 사용하여 앱에 Azure AI Video Indexer 위젯 포함 및 사용자 지정

관련 콘텐츠

피드백

피드백

추가 리소스