kaltura editor app embed
1.0.0
Perkuat aplikasi Anda dengan kemampuan pengeditan video dalam browser untuk memudahkan dan menyederhanakan pembuatan dan berbagi video di dalam aplikasi Anda.
Repo ini adalah referensi aplikasi NodeJS yang mendemonstrasikan cara menyematkan aplikasi Kaltura Editor di aplikasi hosting NodeJS.
Ini adalah aplikasi berbasis simpul ekspres yang sangat mendasar (dihasilkan menggunakan Express Generator).
Fitur Aplikasi Editor Kaltura meliputi ; Memungkinkan pengguna akhir untuk membuat klip video, Dukungan untuk titik isyarat, teks dan konten multi-aliran, Grafik audio untuk mendeteksi area senyap, Memangkas potongan video panjang dari tengah, Kompatibel dengan browser desktop dan tablet, Mudah digunakan dan mempertimbangkan aksesibilitas , Dapat disesuaikan dengan CSS, Mudah diintegrasikan ke dalam aplikasi web apa pun menggunakan API iframe yang aman, Membuat dan mengedit Kuis Dalam-Video Interaktif, Gunakan untuk menetapkan titik isyarat untuk iklan dinamis, Membuat hamparan hotspot yang mendorong tindakan, dan banyak lagi. Untuk mempelajari kemampuan Editor Kaltura, tonton video pelatihan Editor Kaltura.
npm installconfig.template.json ke config.jsonconfig.json , konfigurasikan sesuai instruksi dan hapus semua komentarDEBUG=kaltura-editor-app-embed:* npm startset DEBUG=kaltura-editor-app-embed:* & npm startindexindex.pug )Aplikasi dimuat sebagai iframe seperti:
<iframe src="//cdnapisec.kaltura.com/apps/kea/[v<kea_version>|latest]/index.html"></iframe>
Ganti
v<kea_version>denganlatestuntuk selalu memuat versi [stabil] siap produksi terbaru, atau atur ke versi tertentu (Rujuk ke log perubahan resmi untuk daftar versi yang tersedia di produksi).
Misalnya;
<iframe src="//cdnapisec.kaltura.com/apps/kea/v2.28.11/index.html"></iframe><iframe src="//cdnapisec.kaltura.com/apps/kea/latest/index.html"></iframe>Penting : Jangan memuat index.html secara langsung, sebaiknya hanya dimuat di iFrame.
Integrasi Aplikasi Kaltura Editor dilakukan dengan menyematkan iFrame di dalam aplikasi web Anda. Komunikasi dengan aplikasi editor (memanggil tindakan dan bereaksi terhadap peristiwa) dilakukan dengan menggunakan API postMessage.
Dalam repositori ini Anda juga akan menemukan contoh implementasi referensi lengkap (di bawah direktori sampel referensi, masing-masing direktori bahasa pemrograman).
Redaksi Kaltura mengharapkan Sidang Kaltura (KS) di 3 acara postMessage:
userId valid yang akan mewakili userId yang benar di sistem Anda. userId ini akan menjadi pemilik entri yang baru dibuat (jika menggunakan Simpan Sebagai atau membuat Kuis baru).sview:<entryId> untuk melewati batasan Kontrol Akses khusus.edit:<entryId> .edit:<entryId> . userId saat membuat sesi, untuk melihat pratinjau entri yang diedit secara anonim (ini akan memastikan bahwa saat menjawab kuis selama pratinjau, entri tersebut tidak akan terdaftar sebagai pengguna sebenarnya selama tes pratinjau).sview:<entryId> untuk melewati batasan Kontrol Akses khusus.disableentitlementforentry:<entryId> untuk melewati pengaturan hak khusus untuk sesi pratinjau.setrole:PLAYBACK_BASE_ROLE sehingga sesi ini tidak diizinkan untuk melakukan tindakan selain tindakan pemutaran yang diperlukan untuk melihat pratinjau entri baru. Dalam kode Anda, tempat editor iFrame tertanam, siapkan pendengar postMessages untuk berkomunikasi dengan API editor:
var initParamsListener = window . addEventListener ( 'message' , function ( e ) {
var postMessageData ;
try {
postMessageData = e . data ;
}
catch ( ex ) {
return ;
}
postMessageDataakan berisi nama kejadian postMessage yang akan ditangani (messageType) dandatamuatan apa pun yang relevan .
Ketika editor sudah siap, itu akan memicu acara kea-bootstrap postMessage. Tangkap peristiwa itu, dan sebagai respons, panggil kea-config postMessage untuk meneruskan Param Inisialisasi ke aplikasi editor:
if ( postMessageData . messageType === 'kea-bootstrap' ) {
e . source . postMessage ( {
'messageType' : 'kea-config' ,
'data' : { /* ADD HERE ALL THE EDITOR INITIALIZATION PARAMS */ }
} , e . origin )
} Dalam atribut data kea-config postMessage, Anda harus meneruskan parameter inisialisasi. Di bawah ini adalah tinjauan rinci dari semua parameter yang tersedia.
service_url : URL layanan Kaltura yang akan digunakan saat membuat permintaan API (titik akhir API dasar), biasanya https://www.kaltura.com/ .partner_id : ID akun Kaltura (alias partnerId) yang akan digunakan.ks : String Sesi Kaltura yang dihasilkan yang akan diautentikasi oleh editor.entry_id : Id entri video yang akan diedit (Potong atau Edit Kuis) atau kloning (buat Klip baru dari atau kloning untuk Kuis baru).player_uiconf_id : ID uiconf instance Kaltura Player yang akan digunakan untuk pemutar tampilan pengeditan (Anda dapat menemukannya di tab KMC Studio). Pastikan pemutar yang Anda gunakan TIDAK dikonfigurasi ke Putar Otomatis (pastikan autoPlay=false di konfigurasi pemutar atau gunakan Studio untuk mengedit pemutar dan hapus centang Putar Otomatis di pengaturan utama).load_thumbnail_with_ks : Boolean (default adalah false) yang menunjukkan apakah akan menambahkan KS ke url thumbnail, jika akun Anda dikonfigurasi untuk memerlukan KS untuk URL thumbnail (tidak disarankan, karena ini akan mencegah cache thumbnail). tabs : Tab aplikasi editor yang akan ditampilkan dan izin masing-masing untuk diaktifkan.
edit - Akankah tab Pemangkasan dan Kliping video. Izin yang didukung adalah: 'clip' (mengaktifkan "Simpan Sebagai" untuk membuat klip video baru) dan 'trim' (mengaktifkan "Simpan" untuk mengubah ragam sumber entri video yang dimuat).quiz - Akan mengaktifkan tab pembuatan/pengeditan Kuis. Kemampuan dasar yang diaktifkan adalah jenis pertanyaan "Pilihan Ganda". Izin yang didukung: 'quiz' (selalu sertakan ini jika Anda ingin mengaktifkan kuis), 'questions-v2' (jenis pertanyaan "Titik Refleksi" dan "Benar/Salah"), 'questions-v3' (jenis pertanyaan "Terbuka" )hotspots - Akan mengaktifkan tab hotspot, yang memungkinkan penambahan hamparan Ajakan Bertindak pada videoadvertisements - Akan mengaktifkan tab iklan paruh-putarCatatan: Entri Kuis baru dibuat secara otomatis ketika pengguna mengklik tombol "Mulai" di tab pembuatan kuis.
Contoh berikut menunjukkan konfigurasi tab dari semua tab dan izin yang tersedia (Kuis, Kliping, dan Pemangkasan):
'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 mengizinkan penyembunyian tombol Simpan dan Simpan Sebagai untuk memungkinkan aplikasi hosting menampilkan tombolnya sendiri:
editor - memperlihatkan showSaveButton untuk menyembunyikan tombol "Simpan" (Potong) dan showSaveAsButton untuk menyembunyikan tombol "Simpan Sebagai" (Klip)hotspos dan advertisements - tampilkan showSaveButton untuk menyembunyikan tombol "Simpan" (tab ini tidak membuat entri baru Parameter tab : Tab awal untuk memulai sesi aplikasi saat ini pada:
editor untuk tab Klip atau Pangkas video.quiz untuk tab Kuis Dalam Video.advertisements untuk tab iklan paruh-putar.hotspots - untuk tab hotspot Ajakan Bertindak. help_link : URL lengkap yang akan digunakan untuk "Buka Panduan Pengguna" di komponen bantuan editor (Anda dapat menggunakan panduan default sebagai referensi: https://knowledge.kaltura.com/node/1912 ).css_url : URL lengkap ke file CSS tambahan untuk mengesampingkan aturan gaya.preview_player_uiconf_id : Contoh Kaltura Player yang akan digunakan untuk pratinjau. Jika tidak lolos maka pemain utama yang akan digunakan. Bahasa diatur berdasarkan prioritas:
locale_url - File lokal khusus, url lengkap ke file json dengan terjemahan.language_code - Kode bahasa yang didukung (misalnya en ).language_code=en ) digunakan sebagai lokal default (jika tidak ada konfigurasi lain). Karena pembuatan sesi hanya boleh dilakukan di sisi server (untuk tidak mengekspos kunci atau kredensial API rahasia Anda) - kami menyarankan untuk membuat layanan backend yang akan dipanggil ketika editor meminta KS baru dan mengembalikan KS yang diperlukan untuk setiap peristiwa.
postMessageData.data.entryId akan berisi ID entri yang baru dibuat (meneruskan ke layanan pembuatan KS Anda, dan mengembalikan KS dengan hak lihat dan edit yang sesuai).messageType: 'kea-ks' untuk menyetel KS baru ke 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 - Setelah entri video Klip atau Kuis baru dibuat, untuk mengatur ulang KS ke izin entri yang baru dibuat.kea-get-preview-ks - Saat pengguna meminta untuk melihat pratinjau entri, untuk mengatur izin ke penampil anonim yang berhak. Peristiwa postMessage ini akan diaktifkan sebagai respons terhadap tindakan penggunaan di aplikasi editor. Tangani peristiwa ini di aplikasi hosting Anda untuk melanjutkan alur kerja antara editor dan aplikasi Anda. Misalnya:
kea-trimming-started Dikirim saat memulai tindakan Pangkas. postMessageData.data.entryId akan menyimpan ID entri yang dipangkas. Respons yang diharapkan: kea-trim-message di mana message.data adalah teks (yang dilokalkan) untuk ditampilkan.
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 Dikirim ketika tindakan Pangkas selesai. postMessageData.data.entryId akan menyimpan ID entri yang telah dipangkas.
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}kea-clip-created Dikirim setelah pembuatan klip. Atribut data menyimpan ID Entri asli, ID klip baru, dan nama entri baru. Respons yang diharapkan: kea-clip-message di mana message.data adalah teks (yang dilokalkan) untuk ditampilkan kepada pengguna setelah klip baru dibuat.
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 Dikirim ketika entri Kuis Dalam Video diperbarui. message.data akan menyertakan entryId dari Entri Kaltura yang telah diperbarui.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created Dikirim ketika entri Kuis Dalam Video baru dibuat. message.data akan menyertakan entryId dari Entri Kaltura yang telah dibuat.
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name Permintaan untuk mendapatkan nama tampilan pengguna untuk pemilik entri yang dimuat. Atribut data menyimpan id pengguna yang relevan. Respons yang diharapkan: kea-display-name dengan message.data adalah nama tampilan pengguna untuk ditampilkan di aplikasi editor.
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 Diterima ketika pengguna akan bernavigasi di luar aplikasinya (misalnya selesai mengedit). Atribut data menyimpan ID entri. Aplikasi host harus menavigasi ke halaman yang menampilkan media yang diedit.
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 Pesan ini akan dipanggil ketika pengguna beralih ke tab lain di aplikasi editor. Ini berguna ketika aplikasi hosting harus lebih kontekstual. Ganti {tab-name} dengan nama tab yang Anda minati.
Contoh:
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
}
} )Acara yang didukung:
kea-quiz-tab-loadedkea-editor-tab-loadedkea-advertisements-tab-loadedkea-hotspots-tab-loadedkea-do-saveDapat dikirim oleh aplikasi hosting ketika seseorang ingin memulai dialog Simpan kepada pengguna dan memulai proses penyimpanan (tab yang didukung: Iklan, Hotspot, dan Editor). Di Editor, tindakan Simpan berkaitan dengan operasi Pemangkasan.
Contoh:
// 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-asDapat dikirim oleh aplikasi hosting ketika seseorang ingin memulai dialog Simpan Sebagai kepada pengguna dan memulai proses klip video baru (tab yang didukung: Editor). Di Editor, tindakan Simpan berhubungan dengan operasi Kliping. Tindakan ini juga memungkinkan meneruskan ID referensi yang akan ditambahkan ke entri kloning sebagai bagian dari respons.
Catatan untuk mendukung pengaturan bidang referenceId, Sesi Kaltura yang digunakan oleh Aplikasi Editor harus menggunakan peran pengguna dengan izin berikut diaktifkan:
BASE_USER_SESSION_PERMISSION,CONTENT_INGEST_REFERENCE_MODIFY,CONTENT_INGEST_CLIP_MEDIA
Contoh:
// 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 ) ;
} ) ;
}
} ) Anda dapat mempelajari lebih lanjut tentang Kaltura dan memulai uji coba gratis di: http://corp.kaltura.com
Hubungi kami melalui Twitter @Kaltura atau email: [email protected]
Kami ingin mendengar pendapat Anda!
Semua kode dalam proyek ini dirilis di bawah lisensi AGPLv3 kecuali lisensi berbeda untuk perpustakaan tertentu ditentukan di jalur perpustakaan yang berlaku.
Hak Cipta © Kaltura Inc. Semua hak dilindungi undang-undang.
Tinjau daftar perpustakaan pihak ketiga Open Source yang digunakan dalam proyek ini.
