kaltura editor app embed
1.0.0
Potencia tus aplicaciones con capacidades de edición de video en el navegador para facilitar y simplificar la creación y el intercambio de videos dentro de tus aplicaciones.
Este repositorio es una aplicación NodeJS de referencia que demuestra cómo integrar la aplicación Kaltura Editor en una aplicación NodeJS de alojamiento.
Esta es una aplicación muy básica basada en Node Express (generada usando Express Generator).
Las características de la aplicación Kaltura Editor incluyen ; Permite a los usuarios finales crear clips de vídeo, compatibilidad con puntos de referencia, subtítulos y contenido de transmisión múltiple, gráfico de audio para detectar áreas silenciosas, recorte de videos largos desde el medio, compatible con navegadores de escritorio y tabletas, fácil de usar y accesible , Personalizable con CSS, Fácil de integrar en cualquier aplicación web mediante API iframe segura, Cree y edite cuestionarios interactivos en video, Úselo para establecer puntos de referencia para anuncios dinámicos, Cree superposiciones de puntos de acceso que impulsen la acción y más. Para conocer las capacidades de Kaltura Editor, mire los videos de capacitación de Kaltura Editor.
npm installconfig.template.json a config.jsonconfig.json , configúrelo según las instrucciones y elimine todos los comentarios.DEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexindex.pug )La aplicación se carga como un iframe así:
<iframe src="//cdnapisec.kaltura.com/apps/kea/[v<kea_version>|latest]/index.html"></iframe>
Reemplace
v<kea_version>conlatestpara cargar siempre la última versión [estable] lista para producción, o configúrela en una versión específica (consulte el registro de cambios oficial para obtener la lista de versiones disponibles en producción).
Por ejemplo;
<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 : No cargue el index.html directamente, solo debe cargarse en un iFrame.
La integración de la aplicación Kaltura Editor se realiza incorporando un iFrame dentro de su aplicación web. La comunicación con la aplicación del editor (llamar a acciones y reaccionar a eventos) se realiza mediante la API postMessage.
En este repositorio también encontrará ejemplos completos de implementación de referencia (en el directorio de muestras de referencia, directorio del lenguaje de programación respectivo).
El editor de Kaltura espera una sesión de Kaltura (KS) en 3 eventos posteriores al mensaje:
userId válido que represente el userId correcto en su sistema. Este userId será el propietario de las entradas recién creadas (si usa Guardar como o crea una nueva prueba).sview:<entryId> para evitar cualquier limitación especial de control de acceso.edit:<entryId> .edit:<entryId> . userId al crear la sesión, para obtener una vista previa de la entrada editada de forma anónima (esto garantizará que al responder un cuestionario durante la vista previa no se registre como un usuario real durante las pruebas de vista previa).sview:<entryId> para evitar cualquier limitación especial de control de acceso.disableentitlementforentry:<entryId> para omitir la configuración de derechos especiales para la sesión de vista previa.setrole:PLAYBACK_BASE_ROLE para que esta sesión no pueda realizar acciones distintas a las acciones de reproducción necesarias para obtener una vista previa de la nueva entrada. En su código, donde está integrado el iFrame del editor, configure un oyente para postMessages para comunicarse con la API del editor:
var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
postMessageDatacontendrá el nombre del evento postMessage a manejar (messageType) y cualquierdatade carga útil relevante.
Cuando el editor esté listo, activará el evento postMessage kea-bootstrap . Capte ese evento y, en respuesta, llame a kea-config postMessage para pasar los parámetros de inicialización a la aplicación del editor:
if ( postMessageData . messageType === 'kea-bootstrap' ) {
e . source . postMessage ( {
'messageType' : 'kea-config' ,
'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
} , e . origin )
} En el atributo de datos de postMessage kea-config , deberá pasar los parámetros de inicialización. A continuación se muestra una revisión detallada de todos los parámetros disponibles.
service_url : la URL del servicio Kaltura que se utilizará al realizar solicitudes de API (punto final de API base), generalmente https://www.kaltura.com/ .partner_id : El ID de cuenta de Kaltura (también conocido como socioId) que se utilizará.ks : la cadena de sesión de Kaltura generada con la que se autenticará el editor.entry_id : La identificación de la entrada de video para editar (Recortar o Editar un cuestionario) o clonar (crear un nuevo clip o clonar para un nuevo cuestionario).player_uiconf_id : El ID de uiconf de la instancia de Kaltura Player que se utilizará para el reproductor de vista de edición (puede encontrarlo en la pestaña KMC Studio). Asegúrate de que el reproductor que estás usando NO esté configurado para reproducción automática (asegúrate de que autoPlay=false en la configuración del reproductor o usa Studio para editar el reproductor y desmarca la reproducción automática en la configuración principal).load_thumbnail_with_ks : un valor booleano (el valor predeterminado es falso) que indica si se debe agregar una KS a la URL de miniaturas, en caso de que su cuenta esté configurada para requerir una KS para las URL de miniaturas (no recomendado, ya que esto evitará el almacenamiento en caché de miniaturas). tabs : las pestañas de la aplicación del editor que se mostrarán y sus respectivos permisos para habilitar.
edit : aparecerá la pestaña Recortar y recortar el video. Los permisos admitidos son: 'clip' (habilita "Guardar como" para crear un nuevo clip de vídeo) y 'trim' (habilita "Guardar" para modificar el tipo de fuente de entrada de vídeo cargado).quiz : habilitará la pestaña de creación/edición de cuestionarios. La capacidad básica habilitada es el tipo de pregunta de "opción múltiple". Permisos admitidos: 'quiz' (siempre incluya esto si desea habilitar el cuestionario), 'questions-v2' (tipos de preguntas "Punto de reflexión" y "Verdadero/Falso"), 'questions-v3' (tipo "Pregunta abierta" )hotspots : habilitará la pestaña de puntos de acceso, que permite agregar superposiciones de llamado a la acción en el video.advertisements : habilitará la pestaña de anuncios mid-rollNota: Se crea automáticamente una nueva entrada de prueba cuando el usuario hace clic en el botón "Iniciar" en la pestaña de creación de prueba.
El siguiente ejemplo muestra una configuración de pestañas de todas las pestañas y permisos disponibles (Prueba, Recorte y Recorte):
'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
}
} El editor permite ocultar los botones Guardar y Guardar como para permitir que la aplicación de alojamiento exponga sus propios botones:
editor : expone showSaveButton para ocultar el botón "Guardar" (Recortar) y showSaveAsButton para ocultar el botón "Guardar como" (Clip)hotspos y advertisements : exponen showSaveButton para ocultar el botón "Guardar" (estas pestañas no crean una nueva entrada). El parámetro tab : La pestaña inicial para iniciar la sesión de aplicación actual en:
editor para la pestaña Clip de vídeo o Recortar.quiz para la pestaña Prueba en video.advertisements para la pestaña de anuncios mid-roll.hotspots : para la pestaña Hotspots de llamado a la acción. help_link : una URL completa que se utilizará para "Ir al manual del usuario" en el componente de ayuda del editor (puede utilizar la guía predeterminada como referencia: https://knowledge.kaltura.com/node/1912 ).css_url : una URL completa a un archivo CSS adicional para anular las reglas de estilo.preview_player_uiconf_id : la instancia de Kaltura Player que se utilizará para la vista previa. Si no se aprueba, se utilizará el jugador principal. El idioma se establece por prioridad:
locale_url : archivo de configuración regional personalizado, URL completa a un archivo json con traducciones.language_code : código de idioma admitido (por ejemplo, en ).language_code=en ) se utiliza como configuración regional predeterminada (si no hay nada más configurado). Dado que la generación de sesiones solo debe realizarse en el lado del servidor (para no exponer sus claves o credenciales API secretas), recomendamos crear un servicio backend al que se llamará cuando el editor solicite un nuevo KS y devuelva el KS necesario para cada evento.
postMessageData.data.entryId contendrá el ID de la entrada recién creada (páselo a su servicio de generación de KS y devolverá un KS con los privilegios de visualización y edición correspondientes).messageType: 'kea-ks' para configurar el nuevo KS en el 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 : después de crear una nueva entrada de video de clip o prueba, para restablecer el KS a los permisos de entrada recién creados.kea-get-preview-ks : cuando el usuario solicita obtener una vista previa de la entrada, establecer los permisos para un espectador anónimo autorizado. Estos eventos postMessage se activarán como respuesta al uso de acciones en la aplicación del editor. Maneje estos eventos en su aplicación de alojamiento para continuar el flujo de trabajo entre el editor y su aplicación. Por ejemplo:
kea-trimming-started Enviado al iniciar una acción de Recortar. postMessageData.data.entryId contendrá el ID de la entrada que se está recortando. Respuesta esperada: un kea-trim-message donde message.data es el texto (localizado) que se mostrará.
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 cuando se completa una acción de Recortar. postMessageData.data.entryId contendrá el ID de la entrada que se recortó.
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}kea-clip-created Enviado al crear el clip. El atributo data contiene el ID de entrada original, el ID del nuevo clip y el nombre de la nueva entrada. Respuesta esperada: un kea-clip-message donde message.data es el texto (localizado) que se mostrará al usuario después de crear el nuevo clip.
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 cuando se actualizó una entrada del cuestionario en video. message.data incluirá el ID de entrada de la entrada de Kaltura que se actualizó.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created Enviado cuando se creó una nueva entrada del cuestionario en video. message.data incluirá el ID de entrada de la entrada Kaltura que se creó.
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name Solicite obtener el nombre para mostrar del usuario del propietario de la entrada cargada. El atributo data contiene la identificación de usuario relevante. Respuesta esperada: un kea-display-name donde message.data es el nombre para mostrar del usuario que se mostrará en la aplicación de edición.
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 Se recibe cuando el usuario debe navegar fuera de la aplicación (por ejemplo, cuando se termina la edición). El atributo data contiene el ID de entrada. La aplicación host debe navegar a una página que muestra los medios editados.
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 Este mensaje aparecerá cuando el usuario cambie a una pestaña diferente en la aplicación del editor. Esto es útil cuando la aplicación de alojamiento necesita ser más contextual. Reemplace {tab-name} con el nombre de la pestaña que le interese.
Ejemplo:
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 soportados:
kea-quiz-tab-loadedkea-editor-tab-loadedkea-advertisements-tab-loadedkea-hotspots-tab-loadedkea-do-savePuede ser enviado por la aplicación de alojamiento cuando se desea iniciar un cuadro de diálogo Guardar para el usuario e iniciar el proceso de guardado (pestañas admitidas: Anuncios, Zonas activas y Editor). En el Editor, la acción Guardar corresponde a la operación Recortar.
Ejemplo:
// 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-asPuede ser enviado por la aplicación de alojamiento cuando se desea iniciar un cuadro de diálogo Guardar como para el usuario e iniciar el proceso del nuevo videoclip (pestaña compatible: Editor). En el Editor, la acción Guardar corresponde a la operación Recortar. Esta acción también permite pasar una ID de referencia que se agregará a la entrada clonada como parte de la respuesta.
Tenga en cuenta que para admitir la configuración del campo referenceId, la sesión de Kaltura utilizada por la aplicación Editor debe utilizar un rol de usuario con los siguientes permisos habilitados:
BASE_USER_SESSION_PERMISSION,CONTENT_INGEST_REFERENCE_MODIFY,CONTENT_INGEST_CLIP_MEDIA
Ejemplo:
// 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 ) ;
} ) ;
}
} ) Puede obtener más información sobre Kaltura e iniciar una prueba gratuita en: http://corp.kaltura.com
Contáctenos a través de Twitter @Kaltura o correo electrónico: [email protected]
¡Nos encantaría saber de usted!
Todo el código de este proyecto se publica bajo la licencia AGPLv3 a menos que se especifique una licencia diferente para una biblioteca en particular en la ruta de la biblioteca correspondiente.
Copyright © Kaltura Inc. Todos los derechos reservados.
Revise la lista de bibliotecas de terceros de código abierto utilizadas en este proyecto.
