앱에 Azure AI Video Indexer 위젯 포함

아티클
10/09/2024

이 문서에서는 앱에 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`, `audioEffects`, `labels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`, `ocr`, `speakers`, `scenes`, `spokenLanguage`, `observedPeople`, `namedEntities`, `detectedObjects`입니다.
`controls`	쉼표로 구분된 문자열	렌더링하려는 제어를 제어할 수 있습니다. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download`에서는 검색 옵션 및 다운로드 단추만 렌더링합니다. 사용 가능한 옵션은 `search`, `download`, `presets`, `language`입니다.
`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`	기본 선택 탭	기본적으로 렌더링되는 Insights 탭을 제어합니다. 예: `tab=timeline`에서는 Timeline 탭이 선택된 인사이트를 렌더링합니다.
`search`	문자열	초기 검색어를 제어할 수 있습니다. 예: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure`는 "Azure"라는 단어로 필터링된 인사이트를 렌더링합니다.
`sort`	쉼표로 구분된 문자열	인사이트 정렬을 제어할 수 있습니다. 각 정렬은 '_'로 연결된 위젯 이름, 속성 및 순서의 3가지 값(`sort=name_property_order`)으로 구성됩니다. 사용 가능한 옵션: 위젯은 `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenes`, `namedEntities`, `spokenLanguage`입니다. 속성은 `startTime`, `endTime`, `seenDuration`, `name`, `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 위젯 간의 상호 작용을 수행하는 방법을 보여 주며, 사용자가 앱에서 인사이트 컨트롤을 선택하면 플레이어는 관련 시점으로 이동합니다.

플레이어 위젯 embed 태그를 복사합니다.
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> URL 매개 변수의 값으로 지정하면 됩니다.

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

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

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

iframe 창의 제목도 iframe URL에 &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 플레이어는 비디오의 내용을 바탕으로 선택 자막을 자동으로 생성합니다. 비디오가 업로드될 때 선택한 원본 언어로 비디오에서 대본이 추출됩니다.

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

그러면 포함 URL이 다음과 같습니다.

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

자동 재생

기본적으로 플레이어에서 비디오 재생을 시작합니다. 이전 포함 URL에 &autoplay=false를 전달하면 플레이어에서 비디오 재생을 시작하지 않습니다.

샘플 코드

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

파일/폴더	설명
`control-vi-embedded-player`	VI 플레이어를 포함하고 외부에서 제어합니다.
`custom-index-location`	사용자 지정 외부 위치(고객 Blob 가능)에서 VI 인사이트를 포함합니다.
`embed-both-insights`	플레이어와 인사이트를 모두에 대한 VI 인사이트의 기본 사용입니다.
`customize-the-widgets`	사용자 지정 옵션을 사용하여 VI 위젯을 포함합니다.
`embed-both-widgets`	VI 플레이어와 인사이트를 포함하고 서로 통신하게 합니다.
`url-generator`	사용자가 지정한 옵션을 기준으로 위젯 사용자 지정 포함 URL을 생성합니다.
`html5-player`	기본 HTML5 비디오 플레이어를 사용하여 VI 정보를 포함합니다.

지원되는 브라우저

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

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

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

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

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

또한 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 위젯 포함 및 사용자 지정

관련 콘텐츠

피드백

추가 리소스