kaltura editor app embed
1.0.0
ブラウザ内ビデオ編集機能をアプリに搭載し、アプリケーション内でのビデオの作成と共有を容易にし、簡素化します。
このリポジトリは、ホスティング NodeJS アプリに Kaltura エディター アプリケーションを埋め込む方法を示すリファレンス NodeJS アプリです。
これは、非常に基本的なノード Express ベースのアプリ (Express Generator を使用して生成) です。
Kaltura エディター アプリの機能には次のものがあります。エンドユーザーによるビデオクリップの作成を可能にする、キューポイント、キャプション、マルチストリームコンテンツのサポート、無音領域を検出するためのオーディオグラフ、長いビデオの切り抜きを途中からトリミング、デスクトップおよびタブレットのブラウザと互換性があり、使いやすさとアクセシビリティを重視、CSS でカスタマイズ可能、安全な iframe API を使用してあらゆる Web アプリに簡単に統合、インタラクティブなビデオ内クイズの作成と編集、動的広告のキュー ポイントの設定に使用、アクションを促進するホットスポット オーバーレイの作成などなど。 Kaltura エディターの機能について詳しくは、Kaltura エディターのトレーニング ビデオをご覧ください。
npm installconfig.template.json config.jsonにコピーしますconfig.jsonを開き、指示に従って設定し、すべてのコメントを削除します。DEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexで構成されていますindex.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 にのみロードする必要があります。
Kaltura エディタ アプリケーションの統合は、Web アプリケーション内に iFrame を埋め込むことで行われます。エディター アプリとの通信 (アクションの呼び出しとイベントへの反応) は、postMessage API を使用して行われます。
このリポジトリには、完全なリファレンス実装例も含まれています (reference-sample ディレクトリの各プログラミング言語ディレクトリの下にあります)。
Kaltura エディターは、3 つの postMessage イベントで Kaltura セッション (KS) を期待します。
userId表す有効なuserId渡すようにしてください。このuserId新しく作成されたエントリを所有します (名前を付けて保存を使用する場合、または新しいクイズを作成する場合)。sview:<entryId>権限を含めます。edit:<entryId>権限を追加します。edit:<entryId>権限を追加しないでください。 userIdとして空の文字列を渡します (これにより、プレビュー中にクイズに回答するときに、プレビュー テスト中に実際のユーザーとして登録されなくなります)。sview:<entryId>権限を含めます。disableentitlementforentry:<entryId>を含めます。setrole:PLAYBACK_BASE_ROLE権限を含めて、このセッションが新しいエントリのプレビューに必要な再生アクション以外のアクションを実行できないようにします。 エディターの iFrame が埋め込まれているコードで、エディター API と通信するために postMessages へのリスナーを設定します。
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 リクエスト (ベース API エンドポイント) を行うときに使用する Kaltura サービスの URL (通常はhttps://www.kaltura.com/ )。partner_id : 使用する Kaltura アカウント ID (別名 PartnerId)。ks : エディターが認証するために生成された Kaltura セッション文字列。entry_id : 編集 (クイズのトリミングまたは編集) またはクローン (新しいクイズの新しいクリップの作成またはクローン) を行うビデオ エントリの ID。player_uiconf_id : 編集ビュー プレーヤーに使用される Kaltura プレーヤー インスタンスの uiconf ID ([KMC Studio] タブで確認できます)。使用しているプレーヤーが自動再生に設定されていないことを確認してください (プレーヤー設定でautoPlay=falseであることを確認するか、Studio を使用してプレーヤーを編集し、メイン設定で自動再生のチェックを外してください)。load_thumbnail_with_ks : サムネイル URL に KS を要求するようにアカウントが設定されている場合に、サムネイル URL に KS を追加するかどうかを示すブール値 (デフォルトは false) (サムネイルのキャッシュが妨げられるため、お勧めしません)。 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 - [Call To Action] ホットスポット タブ用。 help_link : エディターのヘルプ コンポーネントの「ユーザー マニュアルに移動」に使用される完全な URL (デフォルトのガイドを参照として使用できます: 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 生成サービスに渡し、それに応じて sview および編集権限を持つ 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 Trim アクションを開始するときに送信されます。 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 を渡すこともできます。
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 ライセンスに基づいてリリースされます。
Copyright © Kaltura Inc. 無断複写・転載を禁じます。
このプロジェクトで使用されているオープンソースのサードパーティ ライブラリのリストを確認してください。
