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' （“反思點”和“對/錯”問題類型）、 '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 方庫的清單。
