kaltura editor app embed
1.0.0
Potencialize seus aplicativos com recursos de edição de vídeo no navegador para facilitar e simplificar a criação e o compartilhamento de vídeo dentro de seus aplicativos.
Este repositório é um aplicativo NodeJS de referência que demonstra como incorporar o aplicativo Kaltura Editor em um aplicativo NodeJS de hospedagem.
Este é um aplicativo baseado em Node Express muito básico (gerado usando Express Generator).
Os recursos do aplicativo Kaltura Editor incluem ; Permite que os usuários finais criem videoclipes, Suporte para cue-points, legendas e conteúdo multi-stream, Gráfico de áudio para detectar áreas silenciosas, Corte de vídeos longos a partir do meio, Compatível com navegadores de desktop e tablet, Fácil de usar e voltado para acessibilidade , Personalizável com CSS, Fácil de integrar em qualquer aplicativo da web usando API iframe segura, Criar e editar questionários interativos em vídeo, Use para definir pontos de sinalização para anúncios dinâmicos, Criar sobreposições de pontos de acesso que impulsionam a ação e muito mais. Para saber mais sobre os recursos do Kaltura Editor, assista aos vídeos de treinamento do Kaltura Editor.
npm installconfig.template.json para config.jsonconfig.json , configure de acordo com as instruções e remova todos os comentáriosDEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexindex.pug )O aplicativo é carregado como um iframe assim:
<iframe src="//cdnapisec.kaltura.com/apps/kea/[v<kea_version>|latest]/index.html"></iframe>
Substitua
v<kea_version>porlatestpara sempre carregar a versão mais recente pronta para produção [estável] ou defina para uma versão específica (consulte o changelog oficial para obter a lista de versões disponíveis em produção).
Por exemplo;
<iframe src="//cdnapisec.kaltura.com/apps/kea/v2.28.11/index.html"></iframe><iframe src="//cdnapisec.kaltura.com/apps/kea/latest/index.html"></iframe>Importante : Não carregue o index.html diretamente, ele só deve ser carregado em um iFrame.
A integração do aplicativo Kaltura Editor é feita incorporando um iFrame dentro de seu aplicativo web. A comunicação com o aplicativo editor (chamando ações e reagindo a eventos) é feita usando a API postMessage.
Neste repositório você também encontrará exemplos completos de implementação de referência (no diretório reference-samples, respectivo diretório de linguagem de programação).
O Editor Kaltura espera uma Sessão Kaltura (KS) em 3 eventos postMessage:
userId válido que representará o userId correto em seu sistema. Este userId será o proprietário das entradas recém-criadas (se estiver usando Salvar como ou criando um novo questionário).sview:<entryId> para ignorar quaisquer limitações especiais de controle de acesso.edit:<entryId> .edit:<entryId> . userId ao criar a sessão, para visualizar a entrada editada anonimamente (isso garantirá que, ao responder um questionário durante a visualização, ele não se registrará como um usuário real durante os testes de visualização).sview:<entryId> para ignorar quaisquer limitações especiais de controle de acesso.disableentitlementforentry:<entryId> para ignorar configurações de direitos especiais para a sessão de visualização.setrole:PLAYBACK_BASE_ROLE para que esta sessão não tenha permissão para executar ações diferentes das ações de reprodução necessárias para visualizar a nova entrada. No seu código, onde o editor iFrame está incorporado, configure um ouvinte para postMessages para se comunicar com a API do editor:
var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
postMessageDataconterá o nome do evento postMessage a ser tratado (messageType) e quaisquerdatade carga útil relevantes.
Quando o editor estiver pronto, ele acionará o evento kea-bootstrap postMessage. Capture esse evento e, em resposta, chame kea-config postMessage para passar os parâmetros de inicialização para o aplicativo editor:
if ( postMessageData . messageType === 'kea-bootstrap' ) {
e . source . postMessage ( {
'messageType' : 'kea-config' ,
'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
} , e . origin )
} No atributo data do postMessage kea-config , você precisará passar os parâmetros de inicialização. Abaixo está uma revisão detalhada de todos os parâmetros disponíveis.
service_url : o URL do serviço Kaltura a ser usado ao fazer solicitações de API (endpoint base da API), normalmente https://www.kaltura.com/ .partner_id : O ID da conta Kaltura (também conhecido como PartnerId) a ser usado.ks : A string da Sessão Kaltura gerada com a qual o editor irá autenticar.entry_id : o ID da entrada de vídeo a ser editada (cortar ou editar um questionário) ou clonar (criar um novo clipe ou clonar um novo questionário).player_uiconf_id : O ID uiconf da instância do Kaltura Player a ser usado para o player de visualização de edição (você pode encontrá-lo na guia KMC Studio). Certifique-se de que o player que você está usando NÃO esteja configurado para Auto Play (certifique-se de que autoPlay=false na configuração do player ou use o Studio para editar o player e desmarque Auto Play nas configurações principais).load_thumbnail_with_ks : um booleano (o padrão é false) indicando se um KS deve ser anexado ao URL das miniaturas, caso sua conta esteja configurada para exigir um KS para URLs de miniaturas (não recomendado, pois isso impedirá o cache de miniaturas). tabs : as guias do aplicativo editor a serem exibidas e suas respectivas permissões para ativar.
edit - Será a guia Corte e Recorte do vídeo. As permissões suportadas são: 'clip' (permite "Salvar como" para criar um novo videoclipe) e 'trim' (permite "Salvar" para modificar o tipo de fonte de entrada de vídeo carregado).quiz - Ativará a aba de criação/edição de quiz. O recurso básico habilitado é do tipo de pergunta "Múltipla Escolha". Permissões suportadas: 'quiz' (sempre inclua isso se desejar ativar o quiz), 'questions-v2' (tipos de perguntas "Ponto de reflexão" e "Verdadeiro/Falso"), 'questions-v3' (tipo "pergunta aberta" )hotspots - Ativará a guia hotspots, que permite adicionar sobreposições de call to action no vídeoadvertisements - ativará a guia de anúncios intermediáriosNota: Uma nova entrada de questionário é criada automaticamente quando o usuário clica no botão "Iniciar" na guia de criação de questionário.
O exemplo a seguir mostra uma configuração de todas as guias e permissões disponíveis (Quiz, Clipping e Trimming):
'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
}
} O editor permite ocultar os botões Salvar e Salvar como para permitir que o aplicativo de hospedagem exponha seus próprios botões:
editor - expõe showSaveButton para ocultar o botão "Salvar" (Cortar) e showSaveAsButton para ocultar o botão "Salvar como" (Clip)hotspos e advertisements - exponha showSaveButton para ocultar o botão "Salvar" (essas guias não criam uma nova entrada O parâmetro tab : A guia inicial para iniciar a sessão atual do aplicativo:
editor para o videoclipe ou guia Trim.quiz para a guia In-Video-Quiz.advertisements para a guia de anúncios intermediários.hotspots - para a guia de pontos de acesso da Call To Action. help_link : Uma URL completa a ser usada para "Ir para o Manual do Usuário" no componente de ajuda do editor (você pode usar o guia padrão como referência: https://knowledge.kaltura.com/node/1912 ).css_url : um URL completo para um arquivo CSS adicional para substituir regras de estilo.preview_player_uiconf_id : A instância do Kaltura Player a ser usada para visualização. Se não for aprovado, o jogador principal será usado. O idioma é definido por prioridade:
locale_url - Arquivo de localidade personalizado, url completo para um arquivo json com traduções.language_code - Código do idioma suportado (por exemplo, en ).language_code=en ) é usado como localidade padrão (se nada mais estiver configurado). Como a geração de sessões só deve ser feita no lado do servidor (para não expor suas chaves ou credenciais secretas de API), recomendamos a criação de um serviço backend que será chamado quando o editor solicitar um novo KS e retornar o KS necessário para cada evento.
postMessageData.data.entryId conterá o ID da entrada recém-criada (passe-o para o serviço de geração de KS e retorne um KS com privilégios de visualização e edição de acordo).messageType: 'kea-ks' para definir o novo KS para o editor. 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 ) ;
} ) ;
}kea-get-ks - Após a criação de uma nova entrada de vídeo de clipe ou questionário, para redefinir o KS para as permissões de entrada recém-criadas.kea-get-preview-ks - Quando o usuário pede para visualizar a entrada, para definir as permissões para um visualizador anônimo autorizado. Esses eventos postMessage serão acionados como resposta às ações de uso no aplicativo editor. Processe esses eventos em seu aplicativo de hospedagem para continuar o fluxo de trabalho entre o editor e seu aplicativo. Por exemplo:
kea-trimming-started Enviado ao iniciar uma ação Trim. postMessageData.data.entryId manterá o ID da entrada que está sendo cortada. Resposta esperada: uma kea-trim-message onde message.data é o texto (localizado) a ser exibido.
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 Enviado quando uma ação de corte é concluída. postMessageData.data.entryId manterá o ID da entrada que foi cortada.
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}kea-clip-created Enviado após a criação do clipe. O atributo data contém o ID da entrada original, o ID do novo clipe e o nome da nova entrada. Resposta esperada: uma kea-clip-message onde message.data é o texto (localizado) a ser exibido ao usuário após a criação do novo clipe.
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 Enviado quando uma entrada do Questionário In-Video foi atualizada. message.data incluirá o entryId da entrada Kaltura que foi atualizada.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created Enviado quando uma nova entrada do Questionário In-Video foi criada. message.data incluirá o entryId da entrada Kaltura que foi criada.
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name Solicitação para obter o nome de exibição do usuário para o proprietário da entrada carregada. O atributo data contém o ID do usuário relevante. Resposta esperada: um kea-display-name onde message.data é o nome de exibição do usuário a ser mostrado no aplicativo editor.
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 Recebido quando o usuário deve ser navegado fora do aplicativo (por exemplo, edição concluída). O atributo data contém o ID da entrada. O aplicativo host deve navegar até uma página que exibe a mídia editada.
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 Esta mensagem será chamada quando o usuário alternar para uma guia diferente no aplicativo editor. Isso é útil quando o aplicativo de hospedagem precisa ser mais contextual. Substitua {tab-name} pelo nome da guia de seu interesse.
Exemplo:
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
}
} )Eventos suportados:
kea-quiz-tab-loadedkea-editor-tab-loadedkea-advertisements-tab-loadedkea-hotspots-tab-loadedkea-do-savePode ser enviado pelo aplicativo de hospedagem quando se deseja iniciar uma caixa de diálogo Salvar para o usuário e iniciar o processo de salvamento (abas suportadas: Anúncios, Hotspots e Editor). No Editor a ação Salvar corresponde à operação Recortar.
Exemplo:
// 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-asPode ser enviado pelo aplicativo de hospedagem quando se deseja iniciar uma caixa de diálogo Salvar como para o usuário e iniciar o novo processo de videoclipe (guia suportada: Editor). No Editor a ação Salvar corresponde à operação Recortar. Esta ação também permite passar um ID de referência que será adicionado à entrada clonada como parte da resposta.
Observação para oferecer suporte à configuração do campo referenceId, a sessão Kaltura usada pelo aplicativo Editor deve usar uma função de usuário com as seguintes permissões habilitadas:
BASE_USER_SESSION_PERMISSION,CONTENT_INGEST_REFERENCE_MODIFY,CONTENT_INGEST_CLIP_MEDIA
Exemplo:
// 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 ) ;
} ) ;
}
} ) Você pode aprender mais sobre Kaltura e iniciar um teste gratuito em: http://corp.kaltura.com
Contate-nos via Twitter @Kaltura ou e-mail: [email protected]
Adoraríamos ouvir de você!
Todo o código neste projeto é lançado sob a licença AGPLv3, a menos que uma licença diferente para uma biblioteca específica seja especificada no caminho da biblioteca aplicável.
Copyright © Kaltura Inc. Todos os direitos reservados.
Revise a lista de bibliotecas de terceiros de código aberto usadas neste projeto.
