kaltura editor app embed
1.0.0
Optimisez vos applications avec des capacités d'édition vidéo intégrées au navigateur pour faciliter et simplifier la création et le partage de vidéos dans vos applications.
Ce référentiel est une application NodeJS de référence qui montre comment intégrer l'application Kaltura Editor dans une application NodeJS d'hébergement.
Il s'agit d'une application très basique basée sur Node Express (générée à l'aide d'Express Generator).
Les fonctionnalités de l'application Kaltura Editor incluent : Permettre aux utilisateurs finaux de créer des clips vidéo, Prise en charge des points de repère, des sous-titres et du contenu multiflux, Graphique audio pour détecter les zones silencieuses, Couper les longues vidéos découpées à partir du milieu, Compatible avec les navigateurs de bureau et de tablette, Facile à utiliser et soucieux de l'accessibilité , Personnalisable avec CSS, Facile à intégrer dans n'importe quelle application Web à l'aide de l'API iframe sécurisée, Créez et modifiez des quiz interactifs en vidéo, Utilisez-le pour définir des points de repère pour les publicités dynamiques, Créez des superpositions de points chauds qui stimulent l'action et plus encore. Pour en savoir plus sur les fonctionnalités de Kaltura Editor, regardez les vidéos de formation de Kaltura Editor.
npm installconfig.template.json dans config.jsonconfig.json , configurez selon les instructions et supprimez tous les commentairesDEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexindex.pug )L'application est chargée en iframe comme ceci :
<iframe src="//cdnapisec.kaltura.com/apps/kea/[v<kea_version>|latest]/index.html"></iframe>
Remplacez
v<kea_version>parlatestpour toujours charger la dernière version [stable] prête pour la production, ou définie sur une version spécifique (reportez-vous au journal des modifications officiel pour la liste des versions disponibles en production).
Par exemple;
<iframe src="//cdnapisec.kaltura.com/apps/kea/v2.28.11/index.html"></iframe><iframe src="//cdnapisec.kaltura.com/apps/kea/latest/index.html"></iframe>Important : Ne chargez pas directement le fichier index.html, il doit uniquement être chargé dans un iFrame.
L'intégration de l'application Kaltura Editor se fait en intégrant un iFrame dans votre application Web. La communication avec l'application d'édition (appel d'actions et réaction aux événements) se fait à l'aide de l'API postMessage.
Dans ce référentiel, vous trouverez également des exemples complets d'implémentation de référence (sous le répertoire reference-samples, répertoire du langage de programmation respectif).
L'éditeur Kaltura attend une session Kaltura (KS) dans 3 événements postMessage :
userId valide qui représentera l' userId correct dans votre système. Cet userId sera propriétaire des entrées nouvellement créées (si vous utilisez Enregistrer sous ou créez un nouveau quiz).sview:<entryId> pour contourner toute limitation spéciale de contrôle d'accès.edit:<entryId> .edit:<entryId> . userId lors de la création de la session, afin de prévisualiser l'entrée modifiée de manière anonyme (cela garantira que lorsque vous répondez à un quiz pendant l'aperçu, il ne s'enregistrera pas en tant qu'utilisateur réel lors des tests d'aperçu).sview:<entryId> pour contourner toute limitation spéciale de contrôle d'accès.disableentitlementforentry:<entryId> pour contourner les paramètres de droits spéciaux pour la session de prévisualisation.setrole:PLAYBACK_BASE_ROLE afin que cette session ne soit pas autorisée à effectuer des actions autres que les actions de lecture nécessaires pour prévisualiser la nouvelle entrée. Dans votre code, où l'éditeur iFrame est intégré, configurez un écouteur sur postMessages pour communiquer avec l'API de l'éditeur :
var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
postMessageDatacontiendra le nom de l'événement postMessage à gérer (messageType) et toutes lesdatautiles pertinentes.
Lorsque l'éditeur sera prêt, il déclenchera l'événement postMessage kea-bootstrap . Attrapez cet événement et, en réponse, appelez le postMessage kea-config pour transmettre les paramètres d'initialisation à l'application d'édition :
if ( postMessageData . messageType === 'kea-bootstrap' ) {
e . source . postMessage ( {
'messageType' : 'kea-config' ,
'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
} , e . origin )
} Dans l'attribut data du postMessage kea-config , vous devrez transmettre les paramètres d'initialisation. Vous trouverez ci-dessous un examen détaillé de tous les paramètres disponibles.
service_url : L'URL du service Kaltura à utiliser lors des requêtes API (point de terminaison de l'API de base), généralement https://www.kaltura.com/ .partner_id : L'identifiant du compte Kaltura (alias PartnerId) à utiliser.ks : La chaîne de session Kaltura générée avec laquelle l'éditeur s'authentifiera.entry_id : L'identifiant de l'entrée vidéo à modifier (Découper ou Modifier un Quiz) ou à cloner (créer un nouveau Clip à partir de ou cloner pour un nouveau Quiz).player_uiconf_id : L'ID uiconf de l'instance de Kaltura Player à utiliser pour le lecteur de vue d'édition (vous pouvez le trouver dans l'onglet KMC Studio). Assurez-vous que le lecteur que vous utilisez n'est PAS configuré pour la lecture automatique (assurez-vous que autoPlay=false dans la configuration du lecteur ou utilisez le Studio pour éditer le lecteur et décochez Auto Play dans les paramètres principaux).load_thumbnail_with_ks : un booléen (la valeur par défaut est false) indiquant s'il faut ajouter un KS à l'URL des miniatures, dans le cas où votre compte est configuré pour exiger un KS pour les URL des miniatures (non recommandé, car cela empêchera la mise en cache des miniatures). tabs : Les onglets de l'application de l'éditeur à afficher et leurs autorisations respectives à activer.
edit - L'onglet Découpage et découpage de la vidéo apparaîtra-t-il. Les autorisations prises en charge sont : 'clip' (active "Enregistrer sous" pour créer un nouveau clip vidéo) et 'trim' (active "Enregistrer" pour modifier la saveur de la source d'entrée vidéo chargée).quiz - Activera l'onglet de création/édition de quiz. La capacité activée de base est du type de question « à choix multiples ». Autorisations prises en charge : 'quiz' (incluez toujours ceci si vous souhaitez activer le quiz), 'questions-v2' (types de questions "Point de réflexion" et "Vrai/Faux"), 'questions-v3' (type "Question ouverte"). )hotspots - Activera l'onglet hotspots, qui permet d'ajouter des superpositions d'appel à l'action sur la vidéoadvertisements - Activera l'onglet Annonces mid-rollRemarque : Une nouvelle entrée de quiz est créée automatiquement lorsque l'utilisateur clique sur le bouton "Démarrer" dans l'onglet de création de quiz.
L'exemple suivant montre une configuration d'onglets de tous les onglets et autorisations disponibles (Quiz, Clipping et 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
}
} L'éditeur permet de masquer les boutons Enregistrer et Enregistrer sous pour permettre à l'application d'hébergement d'exposer ses propres boutons à la place :
editor - expose showSaveButton pour masquer le bouton "Enregistrer" (Trim) et showSaveAsButton pour masquer le bouton "Enregistrer sous" (Clip)hotspos et advertisements - exposent showSaveButton pour masquer le bouton "Enregistrer" (ces onglets ne créent pas de nouvelle entrée Le paramètre tab : L'onglet initial sur lequel démarrer la session d'application en cours sur :
editor pour l'onglet Clip vidéo ou Trim.quiz pour l'onglet In-Video-Quiz.advertisements pour l'onglet Annonces mid-roll.hotspots - pour l'onglet Hotspots d'appel à l'action. help_link : Une URL complète à utiliser pour "Aller au manuel de l'utilisateur" dans le composant d'aide de l'éditeur (vous pouvez utiliser le guide par défaut comme référence : https://knowledge.kaltura.com/node/1912 ).css_url : Une URL complète vers un fichier CSS supplémentaire pour remplacer les règles de style.preview_player_uiconf_id : L'instance de Kaltura Player à utiliser pour l'aperçu. S'il n'est pas réussi, le joueur principal sera utilisé. La langue est définie par priorité :
locale_url - Fichier de paramètres régionaux personnalisé, URL complète vers un fichier json avec traductions.language_code - Code de langue pris en charge (par exemple en ).language_code=en ) est utilisé comme paramètres régionaux par défaut (si rien d'autre n'est configuré). Étant donné que la génération de sessions ne doit être effectuée que côté serveur (pour ne pas exposer vos clés API secrètes ou vos informations d'identification), nous vous recommandons de créer un service backend qui sera appelé lorsque l'éditeur demandera un nouveau KS et retournera le KS nécessaire pour chaque événement.
postMessageData.data.entryId contiendra l'ID de l'entrée nouvellement créée (transmettez-le à votre service de génération KS et renvoyez un KS avec les privilèges d'affichage et de modification en conséquence).messageType: 'kea-ks' pour définir le nouveau KS sur l'éditeur. 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 - Après la création d'une nouvelle entrée vidéo Clip ou Quiz, afin de réinitialiser le KS aux autorisations d'entrée nouvellement créées.kea-get-preview-ks - Lorsque l'utilisateur demande un aperçu de l'entrée, pour définir les autorisations sur un spectateur anonyme autorisé. Ces événements postMessage se déclencheront en réponse à l'utilisation d'actions dans l'application d'édition. Gérez ces événements dans votre application d'hébergement pour poursuivre le flux de travail entre l'éditeur et votre application. Par exemple:
kea-trimming-started Envoyé lors du lancement d’une action Trim. postMessageData.data.entryId contiendra l'ID de l'entrée en cours de suppression. Réponse attendue : un kea-trim-message où message.data est le texte (localisé) à afficher.
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 Envoyé lorsqu’une action Trim est terminée. postMessageData.data.entryId contiendra l'ID de l'entrée qui a été supprimée.
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}kea-clip-created Envoyé lors de la création du clip. L'attribut data contient l'ID d'entrée d'origine, l'ID du nouveau clip et le nom de la nouvelle entrée. Réponse attendue : un kea-clip-message où message.data est le texte (localisé) à afficher à l'utilisateur après la création du nouveau 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 Envoyé lors de la mise à jour d’une entrée de quiz vidéo. message.data inclura l'entryId de l'entrée Kaltura qui a été mise à jour.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created Envoyé lorsqu'une nouvelle entrée de quiz vidéo a été créée. message.data inclura l'entryId de l'entrée Kaltura qui a été créée.
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name Demande d'obtenir le nom d'affichage de l'utilisateur pour le propriétaire de l'entrée chargée. L'attribut data contient l'identifiant utilisateur correspondant. Réponse attendue : un kea-display-name où message.data est le nom d'affichage de l'utilisateur à afficher dans l'application d'édition.
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 Reçu lorsque l'utilisateur doit naviguer en dehors de l'application (par exemple, édition terminée). L'attribut data contient l'ID d'entrée. L'application hôte doit accéder à une page affichant le média modifié.
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 Ce message sera appelé lorsque l'utilisateur basculera vers un autre onglet dans l'application d'édition. Ceci est utile lorsque l’hébergement d’une application doit être plus contextuel. Remplacez {tab-name} par le nom de l'onglet qui vous intéresse.
Exemple:
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
}
} )Événements pris en charge :
kea-quiz-tab-loadedkea-editor-tab-loadedkea-advertisements-tab-loadedkea-hotspots-tab-loadedkea-do-savePeut être envoyé par l'application d'hébergement lorsque l'on souhaite lancer une boîte de dialogue Enregistrer à l'utilisateur et démarrer le processus d'enregistrement (onglets pris en charge : Annonces, Hotspots et Éditeur). Dans l'Editeur l'action Enregistrer correspond à l'opération Découpage.
Exemple:
// 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-asPeut être envoyé par l'application d'hébergement lorsque l'on souhaite lancer une boîte de dialogue Enregistrer sous à l'utilisateur et démarrer le processus du nouveau clip vidéo (onglet pris en charge : Éditeur). Dans l'Editeur l'action Enregistrer correspond à l'opération Détourage. Cette action permet également de transmettre un ID de référence qui sera ajouté à l'entrée clonée dans le cadre de la réponse.
Remarque : pour prendre en charge la définition du champ referenceId, la session Kaltura utilisée par l'application Editor doit utiliser un rôle d'utilisateur avec les autorisations suivantes activées :
BASE_USER_SESSION_PERMISSION,CONTENT_INGEST_REFERENCE_MODIFY,CONTENT_INGEST_CLIP_MEDIA
Exemple:
// 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 ) ;
} ) ;
}
} ) Vous pouvez en savoir plus sur Kaltura et démarrer un essai gratuit sur : http://corp.kaltura.com
Contactez-nous via Twitter @Kaltura ou par e-mail : [email protected]
Nous aimerions avoir de vos nouvelles !
Tout le code de ce projet est publié sous la licence AGPLv3, sauf si une licence différente pour une bibliothèque particulière est spécifiée dans le chemin d'accès à la bibliothèque applicable.
Copyright © Kaltura Inc. Tous droits réservés.
Consultez la liste des bibliothèques tierces Open Source utilisées dans ce projet.
