Загрузить kaltura editor app embed - kaltura editor app embed Загрузка исходного кода

Пример приложения для встраивания Kaltura Editor

Расширьте возможности своих приложений с помощью возможностей редактирования видео в браузере, чтобы упростить и упростить создание и обмен видео внутри ваших приложений.
Этот репозиторий представляет собой эталонное приложение NodeJS, которое демонстрирует, как встроить приложение Kaltura Editor в хост-приложение NodeJS.
Это очень простое приложение на основе экспресс-узла (созданное с помощью Express Generator).

Приложение Kaltura Editor

Возможности приложения Kaltura Editor включают в себя ; Позволяет конечным пользователям создавать видеоклипы. Поддержка ключевых точек, титров и многопоточного контента. Аудиографик для обнаружения тихих зон. Обрезка длинных видеороликов посередине. Совместимость с браузерами настольных компьютеров и планшетов. Простота в использовании и доступность. , Настраивается с помощью CSS, Легко интегрируется в любое веб-приложение с помощью безопасного API iframe, Создавайте и редактируйте интерактивные викторины в видео, Используйте для установки ключевых точек для динамической рекламы, Создавайте наложения горячих точек, которые стимулируют действие и многое другое. Чтобы узнать о возможностях редактора Kaltura, посмотрите обучающие видеоролики по редактору Kaltura.

Чтобы запустить

Оформить заказ/Загрузить файлы
npm install
Скопируйте config.template.json в config.json
Откройте config.json , настройте по инструкции и удалите все комментарии.
Бегать:
- На Mac/Linux — DEBUG=kaltura-editor-app-embed:* npm start
- Windows — set DEBUG=kaltura-editor-app-embed:* & npm start
Загрузите http://localhost:3000/ в свой браузер, чтобы получить доступ к приложению.

Как работает этот код?

экспресс настроен с одним маршрутом: index
после загрузки индекса администратор Kaltura Session (KS) ищет роль редактора kaltura (или создает новую, если она еще не существует)
используя идентификатор роли, создается новый ПОЛЬЗОВАТЕЛЬ KS с определенными разрешениями на видео и редактирование редактируемой записи.
Отрисовывается iframe редактора Kaltura (см. представление index.pug ).
на странице просмотра вы найдете все обработчики JavaScript для загрузки iframe редактора Kaltura и взаимодействия с ним через API postMessage.
Обратитесь к приведенному ниже руководству и встроенным документам (внутри представлений/index.pug) для API-интерфейса iframe и конфигураций приложения-редактора.

Руководство по интеграции приложения Kaltura Editor

Приложение загружается как iframe следующим образом:

<iframe src="//cdnapisec.kaltura.com/apps/kea/[v<kea_version>|latest]/index.html"></iframe>

Замените v<kea_version> на latest , чтобы всегда загружать последнюю готовую к производству [стабильную] версию, или установите конкретную версию (список версий, доступных в рабочей версии, см. в официальном журнале изменений).

Например;

Конкретная версия: <iframe src="//cdnapisec.kaltura.com/apps/kea/v2.28.11/index.html"></iframe>
Последняя стабильная версия: <iframe src="//cdnapisec.kaltura.com/apps/kea/latest/index.html"></iframe>

Важно ! Не загружайте index.html напрямую, его следует загружать только в iFrame.

Основы

Интеграция приложения Kaltura Editor осуществляется путем встраивания iFrame в ваше веб-приложение. Связь с приложением-редактором (вызов действий и реакция на события) осуществляется с помощью API postMessage.

В этом репозитории вы также найдете полные эталонные примеры реализации (в каталоге reference-samples, соответствующем каталоге языка программирования).

Для начала вам понадобится

Учетная запись Kaltura VPaaS (зарегистрируйтесь здесь).
Идентификатор вашей учетной записи Kaltura (он же PartnerID) и секрет администратора API, которые можно найти в KMC в разделе «Настройки» > «Настройки интеграции».
Пример идентификатора записи из одной из записей на вкладке «Содержимое KMC».

Аутентификация

Редактор Kaltura ожидает сеанс Kaltura (KS) в трех событиях postMessage:

На этапе инициализации — используется для загрузки записи, которая будет редактироваться.
После создания новой видеозаписи клипа или викторины — для сброса KS к вновь созданным разрешениям на запись.
Во время предварительного просмотра — для установки разрешений анонимному зрителю с правами доступа.

Инициализация приложения-редактора

В вашем коде, куда встроен редактор iFrame, настройте прослушиватель postMessages для связи с API редактора:

 var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
    var postMessageData ;
    try {
        postMessageData = e . data ;
    }
    catch ( ex ) {
        return ;
    }

postMessageData будет содержать имя события postMessage для обработки ( messageType ) и все соответствующие полезные data .

Когда редактор будет готов, он вызовет событие postMessage kea-bootstrap . Перехватите это событие и в ответ вызовите postMessage kea-config чтобы передать параметры инициализации приложению-редактору:

    if ( postMessageData . messageType === 'kea-bootstrap' ) {
        e . source . postMessage ( {
            'messageType' : 'kea-config' , 
            'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
        } , e . origin )
    }

Поддерживаемые параметры инициализации

В атрибуте данных сообщения kea-config postMessage вам необходимо передать параметры инициализации. Ниже представлен подробный обзор всех доступных параметров.

Обязательные базовые параметры

service_url : URL-адрес службы Kaltura, который будет использоваться при отправке запросов API (базовая конечная точка API), обычно https://www.kaltura.com/ .
partner_id : идентификатор учетной записи Kaltura (он же PartnerId), который нужно использовать.
ks : сгенерированная строка сеанса Kaltura, с помощью которой редактор будет аутентифицироваться.
entry_id : идентификатор видеозаписи, которую нужно отредактировать (обрезать или отредактировать тест) или клонировать (создать новый клип или клонировать для нового теста).
player_uiconf_id : идентификатор uiconf экземпляра Kaltura Player, который будет использоваться для проигрывателя представления редактирования (вы можете найти его на вкладке KMC Studio). Убедитесь, что используемый вами плеер НЕ настроен на автоматическое воспроизведение (убедитесь, что autoPlay=false в конфигурации плеера, или используйте Studio для редактирования плеера и снимите флажок «Автовоспроизведение» в основных настройках).
load_thumbnail_with_ks : логическое значение (по умолчанию — false), указывающее, следует ли добавлять KS к URL-адресу миниатюр в случае, если ваша учетная запись настроена на требование KS для URL-адресов миниатюр (не рекомендуется, поскольку это предотвратит кэширование миниатюр).

Обязательные параметры навигации

tabs : отображаемые вкладки приложения-редактора и соответствующие разрешения, которые можно включить.

Поддерживаемые вкладки

edit — будет ли вкладка «Обрезка и обрезка» видео. Поддерживаемые разрешения: 'clip' (включает «Сохранить как» для создания нового видеоклипа) и 'trim' (включает «Сохранить» для изменения загруженного источника видеозаписи).
quiz — включит вкладку создания/редактирования викторины. Базовая доступная возможность — это тип вопроса «Множественный выбор». Поддерживаемые разрешения: 'quiz' (всегда включайте ее, если хотите включить викторину), 'questions-v2' (типы вопросов «Точка размышления» и «Верно/Ложно»), 'questions-v3' (тип «Открытый вопрос»). )
hotspots — активирует вкладку «горячие точки», позволяющую добавлять на видео наложения с призывом к действию.
advertisements – включит вкладку рекламы в середине ролика.

Примечание. Новая запись теста создается автоматически, когда пользователь нажимает кнопку «Начать» на вкладке создания теста.

В следующем примере показана конфигурация всех доступных вкладок и разрешений (тест, обрезка и обрезка):

 'tabs' : {
  'edit' : {
    name : 'edit' ,
    permissions : [ 'clip' , 'trim' ] ,
    userPermissions : [ 'clip' , 'trim' ] ,
    showOnlyExpandedView : true ,
    showSaveButton : false ,
    showSaveAsButton : false
  } ,
  'quiz' : {
    name : 'quiz' ,
    permissions : [ 'quiz' , 'questions-v2' , 'questions-v3' ] ,
    userPermissions : [ 'quiz' ]
  } ,
  'advertisements' : {
    name : 'advertisements' ,
    permissions : [ 'CUEPOINT_MANAGE' , 'FEATURE_DISABLE_KMC_KDP_ALERTS' ] ,
    showSaveButton : false
  } ,
  'hotspots' : {
    name : 'hotspots' ,
    showSaveButton : false
  }
}

Кнопки «Сохранить» и «Сохранить как»

Редактор позволяет скрывать кнопки «Сохранить» и «Сохранить как», чтобы хост-приложение вместо этого отображало свои собственные кнопки:

Вкладка editor — предоставляет showSaveButton , чтобы скрыть кнопку «Сохранить» (обрезать), и showSaveAsButton , чтобы скрыть кнопку «Сохранить как» (клип).
Вкладки hotspos и advertisements : откройте showSaveButton , чтобы скрыть кнопку «Сохранить» (на этих вкладках не создается новая запись).

Начальная вкладка

Параметр tab : начальная вкладка для запуска текущего сеанса приложения:

editor для вкладки «Видеоклип» или «Обрезка».
quiz для вкладки «Викторина в видео».
advertisements на вкладке «Реклама в середине ролика».
hotspots — для вкладки «Горячие точки призыва к действию».

Параметры настройки

help_link : полный URL-адрес, который будет использоваться для «Перейти к руководству пользователя» в компоненте справки редактора (вы можете использовать руководство по умолчанию в качестве ссылки: https://knowledge.kaltura.com/node/1912 ).
css_url : полный URL-адрес дополнительного файла CSS для переопределения правил стиля.
preview_player_uiconf_id : Экземпляр Kaltura Player, который будет использоваться для предварительного просмотра. Если не пройти, будет использован основной игрок.

Параметры локали языка

Язык выставляется по приоритету:

locale_url — пользовательский файл локали, полный URL-адрес json-файла с переводами.
language_code — код поддерживаемого языка (например, en ).
Английский ( language_code=en ) используется в качестве локали по умолчанию (если больше ничего не настроено).

Новые и предварительные сессии Kaltura

Поскольку создание сеансов должно выполняться только на стороне сервера (чтобы не раскрывать ваши секретные ключи API или учетные данные), мы рекомендуем создать серверную службу, которая будет вызываться, когда редактор запрашивает новый KS и возвращает необходимый KS для каждого события.

postMessageData.data.entryId будет содержать идентификатор вновь созданной записи (передайте его в службу генерации KS и верните KS с привилегиями просмотра и редактирования соответственно).
Получив новый KS из внутренней службы, используйте postMessage с messageType: 'kea-ks' чтобы установить новый KS в редакторе.
Если вы не предоставите KS в ответ на эти события, приложение-редактор продолжит использовать тот же KS, который был предоставлен во время инициализации.

 if ( postMessageData . messageType === 'kea-get-ks' || 
    postMessageData . messageType === 'kea-get-preview-ks' )  
{
    var getKsUrl = 'https://example.com/editor-ks-service/' + '?entryId=' + postMessageData . data . entryId + '&action=' + postMessageData . messageType ;
    $ . getJSON ( getKsUrl , null )
    . done ( function ( responseData ) {
        e . source . postMessage ( {
            messageType : 'kea-ks' ,
            data : responseData . ks
        } , e . origin ) ;
    } )
    . fail ( function ( jqxhr , textStatus , error ) {
        var err = textStatus + ", " + error ;
        console . log ( "Get KS for Edit Request Failed: " + err ) ;
    } ) ;
}

Типы событий обновления KS

kea-get-ks — после создания новой видеозаписи клипа или викторины, чтобы сбросить KS для вновь созданных разрешений на запись.
kea-get-preview-ks — когда пользователь просит просмотреть запись, чтобы установить разрешения для анонимного зрителя, имеющего на это право.

События postMessage активности

Эти события postMessage будут срабатывать в ответ на действия в приложении-редакторе. Обработайте эти события в своем хост-приложении, чтобы продолжить рабочий процесс между редактором и вашим приложением. Например:

Закройте редактор, как только пользователь завершит редактирование).
Представляйте пользователю локализованные сообщения в ответ на его действия внутри редактора.

`kea-trimming-started`

Отправляется при запуске действия обрезки. postMessageData.data.entryId будет содержать идентификатор обрезаемой записи. Ожидаемый ответ: kea-trim-message , где message.data — это (локализованный) текст для отображения.

 if ( postMessageData . messageType === 'kea-trimming-started' ) {
    e . source . postMessage ( {
        messageType : 'kea-trim-message' ,
        data : 'You must approve the media replacement in order to be able to watch the trimmed media'
    } , e . origin )
}

`kea-trimming-done`

Отправляется после завершения действия обрезки. postMessageData.data.entryId будет содержать идентификатор обрезанной записи.

 if ( postMessageData . messageType === 'kea-trimming-done' ) {
    console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}

`kea-clip-created`

Отправляется после создания клипа. Атрибут data содержит исходный идентификатор записи, идентификатор нового клипа и имя новой записи. Ожидаемый ответ: kea-clip-message , где message.data — это (локализованный) текст, который будет отображаться пользователю после создания нового клипа.

 if ( postMessageData . messageType === 'kea-clip-created' ) {
    var message = 'A new video clip named "' + postMessageData . data . newEntryName + '" (id: ' + postMessageData . data . newEntryId + ') was created from ' + postMessageData . data . originalEntryId ;
    e . source . postMessage ( {
        'messageType' : 'kea-clip-message' ,
        'data' : message
    } , e . origin ) ;
}

`kea-quiz-updated`

Отправляется при обновлении записи викторины в видео. message.data будет включать в себя идентификатор записи Kaltura, которая была обновлена.

 if ( postMessageData . messageType === 'kea-quiz-updated' ) {
    // do something (you can also ignore it), you can invalidate cache, etc..
}

`kea-quiz-created`

Отправляется при создании новой записи викторины в видео. message.data будет включать в себя идентификатор созданной записи Kaltura.

 if ( postMessageData . messageType === 'kea-quiz-created' ) {
    // do something (you can also ignore it), you can invalidate cache, etc..
}

`kea-get-display-name`

Запрос на получение отображаемого имени пользователя для владельца загруженной записи. Атрибут data содержит соответствующий идентификатор пользователя. Ожидаемый ответ: kea-display-name , где message.data — отображаемое имя пользователя, которое будет отображаться в приложении-редакторе.

 if ( postMessageData . messageType === 'kea-get-display-name' ) {
    //use the userId to get display name from your service
    var getUserDisplaynameUrl = 'kedit-displayname-service/?userId=' + postMessageData . data . userId ;
    $ . getJSON ( getKsUrl , null )
    . done ( function ( responseData ) {
        e . source . postMessage ( {
            messageType : 'kea-display-name' ,
            data : responseData . displayName
        } , e . origin ) ;
    } )
    . fail ( function ( jqxhr , textStatus , error ) {
        var err = textStatus + ", " + error ;
        console . log ( "Failed to retrieve the user display name: " + err ) ;
        e . source . postMessage ( {
            messageType : 'kea-display-name' ,
            data : postMessageData . data . userId
        } , e . origin ) ;
    } ) ;
}

`kea-go-to-media`

Получается, когда пользователь должен выйти за пределы приложения (например, закончил редактирование). Атрибут data содержит идентификатор записи. Хост-приложение должно перейти на страницу, отображающую отредактированные медиафайлы.

 if ( postMessageData . messageType === 'kea-go-to-media' ) {
    console . log ( "Redirecting to the new media: " + postMessageData . data ) ;
    var videoPath = "https://example.com/video/" ; //replace with your real service path for video playbacl pages
    var redirectUrl = videoPath + "?entryId=" postMessageData . data ;
    $ ( location ) . attr ( 'href' , redirectUrl ) ;
}

`kea-{tab-name}-tab-loaded`

Это сообщение будет вызвано, когда пользователь перейдет на другую вкладку в приложении-редакторе. Это полезно, когда хостинговое приложение должно быть более контекстным. Замените {tab-name} названием интересующей вас вкладки.

Пример:

 window . addEventListener ( 'message' , function ( e ) {
    var postMessageData ;
    try {
        postMessageData = e . data ;
    }
    catch ( ex ) {
        return ;
    }
    // make sure we are in editor tab.
    if ( postMessageData . messageType === 'kea-editor-tab-loaded' ) {
        // do stuff here after tab is loaded
    }
} )

Поддерживаемые события:

kea-quiz-tab-loaded
kea-editor-tab-loaded
kea-advertisements-tab-loaded
kea-hotspots-tab-loaded

`kea-do-save`

Может быть отправлено хост-приложением, когда пользователь хочет открыть диалоговое окно « Сохранить» для пользователя и начать процесс сохранения (поддерживаемые вкладки: «Объявления», «Горячие точки» и «Редактор»). В Редакторе действие «Сохранить» соответствует операции «Обрезка».

Пример:

 // listen to postMessages on the window
window . addEventListener ( 'message' , function ( e ) {
    var postMessageData ;
    try {
        postMessageData = e . data ;
    }
    catch ( ex ) {
        return ;
    }
    // make sure we are in editor tab.
    if ( postMessageData . messageType === 'kea-editor-tab-loaded' ) {
        // attach a click event to a button (id==saveButton) in the hosting app.
        // when the button is clicked, call the editor app's save function
        saveButton . addEventListener ( 'click' , function ( ) {
            e . source . postMessage ( { messageType : 'kea-do-save' } , e . origin ) ;
        } ) ;
    }
} )

`kea-do-save-as`

Может быть отправлено хост-приложением, когда пользователь хочет открыть диалоговое окно « Сохранить как» для пользователя и начать процесс создания нового видеоклипа (поддерживаемая вкладка: «Редактор»). В Редакторе действие «Сохранить» соответствует операции «Вырезка». Это действие также позволяет передать идентификатор ссылки, который будет добавлен к клонированной записи как часть ответа.

Примечание. Для поддержки настройки поля referenceId сеанс Kaltura, используемый приложением-редактором, должен использовать роль пользователя со следующими включенными разрешениями: BASE_USER_SESSION_PERMISSION,CONTENT_INGEST_REFERENCE_MODIFY,CONTENT_INGEST_CLIP_MEDIA

Пример:

 // listen to postMessages on the window
window . addEventListener ( 'message' , function ( e ) {
    var postMessageData ;
    try {
        postMessageData = e . data ;
    }
    catch ( ex ) {
        return ;
    }
    // make sure we are in editor tab.
    if ( postMessageData . messageType === 'kea-editor-tab-loaded' ) {
        // Start the clipping process (will prompt user)
        // And pass optional reference id param to keep reference to the external hosting app entry id.
        // useful for cases where the hosting app was closed while clipping.
        saveButton . addEventListener ( 'click' , function ( ) {
          e . source . postMessage ( {
              messageType : 'kea-do-save-as' , 
              data : { referenceId : referenceId }
            } , e . origin ) ;
        } ) ;
    }
} )

Где получить помощь

Присоединяйтесь к форумам сообщества Kaltura, чтобы задавать вопросы или начинать обсуждения.
Прочтите Кодекс поведения и будьте терпеливы и уважительны.

Свяжитесь с нами

Вы можете узнать больше о Kaltura и начать бесплатную пробную версию на сайте: http://corp.kaltura.com.
Свяжитесь с нами через Twitter @Kaltura или по электронной почте: [email protected]
Мы хотели бы услышать ваше мнение!

Информация о лицензии и авторских правах

Весь код в этом проекте выпущен под лицензией AGPLv3, если в соответствующем пути к библиотеке не указана другая лицензия для конкретной библиотеки.

Библиотеки с открытым исходным кодом

Просмотрите список сторонних библиотек с открытым исходным кодом, используемых в этом проекте.

Расширять

kaltura editor app embed

Пример приложения для встраивания Kaltura Editor

Чтобы запустить

Как работает этот код?

Руководство по интеграции приложения Kaltura Editor

Основы

Для начала вам понадобится

Аутентификация

Рекомендации по привилегиям Kaltura Session:

Редактировать КС:

Предварительный просмотр КС:

Инициализация приложения-редактора

Поддерживаемые параметры инициализации

Обязательные базовые параметры

Обязательные параметры навигации

Поддерживаемые вкладки

Кнопки «Сохранить» и «Сохранить как»

Начальная вкладка

Параметры настройки

Параметры локали языка

Новые и предварительные сессии Kaltura

Типы событий обновления KS

События postMessage активности

kea-trimming-started

kea-trimming-done

kea-clip-created

kea-quiz-updated

kea-quiz-created

kea-get-display-name

kea-go-to-media

kea-{tab-name}-tab-loaded

kea-do-save

kea-do-save-as

Где получить помощь

Свяжитесь с нами

Информация о лицензии и авторских правах

Библиотеки с открытым исходным кодом

`kea-trimming-started`

`kea-trimming-done`

`kea-clip-created`

`kea-quiz-updated`

`kea-quiz-created`

`kea-get-display-name`

`kea-go-to-media`

`kea-{tab-name}-tab-loaded`

`kea-do-save`

`kea-do-save-as`