kaltura editor app embed
1.0.0
为您的应用程序提供浏览器内视频编辑功能，以轻松和简化应用程序内视频的创建和共享。
此存储库是一个参考 NodeJS 应用程序，演示了如何将 Kaltura Editor 应用程序嵌入托管 NodeJS 应用程序中。
这是一个非常基本的基于 Node Express 的应用程序（使用 Express Generator 生成）。
Kaltura 编辑器应用程序功能包括；使最终用户能够创建视频剪辑，支持提示点、字幕和多流内容，用于检测无声区域的音频图，从中间修剪长视频剪辑，与台式机和平板电脑浏览器兼容，易于使用且具有可访问性，可使用 CSS 进行自定义，使用安全的 iframe API 轻松集成到任何网络应用程序中，创建和编辑交互式视频内测验，用于为动态广告设置提示点，创建驱动操作的热点叠加层等。要了解 Kaltura 编辑器功能，请观看 Kaltura 编辑器培训视频。
npm installconfig.template.json复制到config.jsonconfig.json ，按照说明进行配置，去掉所有注释DEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexindex.pug视图）该应用程序作为 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 中。
通过在 Web 应用程序中嵌入 iFrame 来集成 Kaltura 编辑器应用程序。与编辑器应用程序的通信（调用操作并对事件做出反应）是通过使用 postMessage API 完成的。
在此存储库中，您还可以找到完整的参考实现示例（在参考样本目录下，相应的编程语言目录下）。
Kaltura 编辑器期望在 3 个 postMessage 事件中进行 Kaltura 会话 (KS)：
userId ，它将代表系统中正确的userId 。该userId将拥有新创建的条目（如果使用“另存为”或创建新的测验）。sview:<entryId>权限以绕过任何特殊的访问控制限制。edit:<entryId>权限。edit:<entryId>权限。 userId ，以便匿名预览编辑的条目（这将确保在预览期间回答测验时不会在预览测试期间注册为真实用户）。sview:<entryId>权限以绕过任何特殊的访问控制限制。disableentitlementforentry:<entryId>以绕过预览会话的特殊权利设置。setrole:PLAYBACK_BASE_ROLE权限，以便该会话将不允许执行除预览新条目所需的播放操作之外的操作。 在嵌入编辑器 iFrame 的代码中，设置一个 postMessages 侦听器以与编辑器 API 进行通信：
var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
postMessageData将包含要处理的 postMessage 事件名称 (messageType) 以及任何相关的负载data。
当编辑器准备好时，它将触发kea-bootstrap postMessage 事件。捕获该事件，并作为响应，调用kea-config postMessage 将初始化参数传递给编辑器应用程序：
if ( postMessageData . messageType === 'kea-bootstrap' ) {
e . source . postMessage ( {
'messageType' : 'kea-config' ,
'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
} , e . origin )
}在kea-config postMessage 的 data 属性中，您需要传递初始化参数。以下是所有可用参数的详细审查。
service_url ：发出 API 请求时使用的 Kaltura 服务的 URL（基本 API 端点），通常为https://www.kaltura.com/ 。partner_id ：要使用的 Kaltura 帐户 ID（又名partnerId）。ks ：生成的 Kaltura 会话字符串，编辑器将使用该字符串进行身份验证。entry_id ：要编辑（修剪或编辑测验）或克隆（从中创建新剪辑或克隆新测验）的视频条目的 ID。player_uiconf_id ：用于编辑视图播放器的 Kaltura Player 实例 uiconf ID（您可以在 KMC Studio 选项卡中找到它）。确保您使用的播放器未配置为自动播放（确保播放器配置中的autoPlay=false或使用 Studio 编辑播放器并在主设置中取消选中自动播放）。load_thumbnail_with_ks ：一个布尔值（默认为 false），表示如果您的帐户配置为缩略图 URL 需要 KS，是否将 KS 附加到缩略图 URL（不推荐，因为这会阻止缩略图缓存）。 tabs ：要显示的编辑器应用程序选项卡及其各自要启用的权限。
edit - 将视频修剪和剪辑选项卡。支持的权限包括： 'clip' （启用“另存为”以创建新视频剪辑）和'trim' （启用“保存”以修改加载的视频条目源风格）。quiz - 将启用测验创建/编辑选项卡。基本启用功能是“多项选择”问题类型。支持的权限： 'quiz' （如果您希望启用测验，请始终包含此权限）、 'questions-v2' （“Reflection Point”和“True/False”问题类型）、 '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: https://knowledge.kaltura.com/node/1912 ）。css_url ：附加 CSS 文件的完整 URL，用于覆盖样式规则。preview_player_uiconf_id ：用于预览的 Kaltura Player 实例。如果没有通过，就会使用主力球员。 语言按优先级设置：
locale_url - 自定义区域设置文件，带有翻译的 json 文件的完整 url。language_code - 支持的语言代码（例如en ）。language_code=en ) 用作默认区域设置（如果未配置其他任何内容）。 由于生成会话只能在服务器端完成（以免暴露您的秘密 API 密钥或凭据） - 我们建议创建一个后端服务，当编辑器请求新的 KS 并返回每个事件所需的 KS 时将调用该服务。
postMessageData.data.entryId将包含新创建条目的 ID（将其传递给您的 KS 生成服务，并相应地返回具有查看和编辑权限的 KS）。messageType: 'kea-ks'的 postMessage 将新的 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 ) ;
} ) ;
}kea-get-ks - 创建新的剪辑或测验视频条目后，为了将 KS 重置为新创建的条目权限。kea-get-preview-ks - 当用户要求预览条目时，为授权的匿名查看者设置权限。 这些 postMessage 事件将作为对编辑器应用程序中使用操作的响应而触发。在托管应用程序中处理这些事件以继续编辑器和应用程序之间的工作流程。例如：
kea-trimming-started启动修剪操作时发送。 postMessageData.data.entryId将保存正在修剪的条目的 ID。预期响应： 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将保存被修剪的条目的 ID。
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}kea-clip-created创建剪辑时发送。 data属性保存原始条目ID、新剪辑的ID和新条目的名称。预期响应： 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 条目的entryId。
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created创建新的视频内测验条目时发送。 message.data将包含已创建的 Kaltura 条目的entryId。
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name请求获取已加载条目所有者的用户显示名称。 data属性保存相关的用户 ID。预期响应： 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属性保存条目ID。主机应用程序应导航到显示已编辑媒体的页面。
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-loadedkea-editor-tab-loadedkea-advertisements-tab-loadedkea-hotspots-tab-loadedkea-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当想要向用户启动“另存为”对话框并开始新的视频剪辑过程时，可以由托管应用程序发送（支持的选项卡：编辑器）。在编辑器中，“保存”操作对应于“剪切”操作。此操作还允许传递参考 ID，该 ID 将作为响应的一部分添加到克隆条目中。
请注意，为了支持设置 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 的更多信息并开始免费试用：http://corp.kaltura.com
通过 Twitter @Kaltura 或电子邮件联系我们：[email protected]
我们很乐意听取您的意见！
该项目中的所有代码均根据 AGPLv3 许可证发布，除非在适用的库路径中指定了特定库的不同许可证。
版权所有 © Kaltura Inc. 保留所有权利。
查看此项目中使用的开源第 3 方库的列表。
