kaltura editor app embed
1.0.0
ขับเคลื่อนแอปของคุณด้วยความสามารถในการตัดต่อวิดีโอในเบราว์เซอร์ เพื่อทำให้การสร้างและการแชร์วิดีโอภายในแอปพลิเคชันของคุณง่ายดายและลดความซับซ้อน
repo นี้เป็นแอป NodeJS อ้างอิงที่สาธิตวิธีการฝังแอปพลิเคชัน Kaltura Editor ในแอป NodeJS ที่โฮสต์
นี่เป็นแอปที่ใช้โหนดเอ็กซ์เพรสขั้นพื้นฐาน (สร้างโดยใช้ Express Generator)
คุณสมบัติของแอป Kaltura Editor ประกอบด้วย ; ช่วยให้ผู้ใช้สามารถสร้างคลิปวิดีโอได้ รองรับจุดคิว คำบรรยาย และเนื้อหาแบบมัลติสตรีม กราฟเสียงสำหรับตรวจจับพื้นที่เงียบ ตัดวิดีโอขนาดยาวที่ตัดจากตรงกลาง เข้ากันได้กับเบราว์เซอร์เดสก์ท็อปและแท็บเล็ต ใช้งานง่ายและใส่ใจในการเข้าถึง , ปรับแต่งได้ด้วย CSS, ผสานรวมเข้ากับเว็บแอปได้อย่างง่ายดายโดยใช้ iframe API ที่ปลอดภัย, สร้างและแก้ไขแบบทดสอบในวิดีโอเชิงโต้ตอบ, ใช้เพื่อกำหนดจุดเริ่มโฆษณาสำหรับโฆษณาแบบไดนามิก, สร้างการซ้อนทับฮอตสปอตที่กระตุ้นการดำเนินการ และอื่นๆ หากต้องการเรียนรู้เกี่ยวกับความสามารถของ Kaltura Editor โปรดดูวิดีโอการฝึกอบรม Kaltura Editor
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 เท่านั้น
การรวมแอปพลิเคชัน Kaltura Editor ทำได้โดยการฝัง iFrame ไว้ในเว็บแอปพลิเคชันของคุณ การสื่อสารกับแอปตัวแก้ไข (การเรียกใช้การดำเนินการและการตอบสนองต่อเหตุการณ์) ทำได้โดยใช้ postMessage API
ในพื้นที่เก็บข้อมูลนี้ คุณยังจะพบตัวอย่างการใช้งานอ้างอิงที่สมบูรณ์ (ภายใต้ไดเร็กทอรีตัวอย่างอ้างอิง ไดเร็กทอรีภาษาการเขียนโปรแกรมที่เกี่ยวข้อง)
Kaltura Editor คาดว่าจะมีเซสชัน Kaltura (KS) ใน 3 เหตุการณ์ postMessage:
userId ที่ถูกต้องซึ่งจะแสดง userId ที่ถูกต้องในระบบของคุณ userId นี้จะเป็นเจ้าของรายการที่สร้างขึ้นใหม่ (หากใช้บันทึกเป็นหรือสร้างแบบทดสอบใหม่)sview:<entryId> เพื่อข้ามข้อจำกัดการควบคุมการเข้าถึงพิเศษใดๆedit:<entryId>edit:<entryId> userId เมื่อสร้างเซสชัน เพื่อดูตัวอย่างรายการที่แก้ไขโดยไม่ระบุชื่อ (ซึ่งจะทำให้แน่ใจได้ว่าเมื่อตอบคำถามระหว่างการแสดงตัวอย่าง จะไม่ลงทะเบียนเป็นผู้ใช้จริงในระหว่างการทดสอบตัวอย่าง)sview:<entryId> เพื่อข้ามข้อจำกัดการควบคุมการเข้าถึงพิเศษใดๆdisableentitlementforentry:<entryId> เพื่อข้ามการตั้งค่าการให้สิทธิ์พิเศษสำหรับเซสชันแสดงตัวอย่างsetrole:PLAYBACK_BASE_ROLE เพื่อให้เซสชันนี้ไม่ได้รับอนุญาตให้ดำเนินการอื่นนอกเหนือจากการเล่นที่จำเป็นในการดูตัวอย่างรายการใหม่ ในโค้ดของคุณซึ่งมีการฝังตัวแก้ไข iFrame ให้ตั้งค่า Listener เพื่อ postMessages เพื่อสื่อสารกับ Editor 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 คุณจะต้องผ่านพารามิเตอร์การเริ่มต้น ด้านล่างนี้คือการตรวจสอบโดยละเอียดของพารามิเตอร์ที่มีอยู่ทั้งหมด
service_url : URL ของบริการ Kaltura ที่จะใช้เมื่อทำการร้องขอ API (จุดสิ้นสุด API พื้นฐาน) โดยทั่วไปคือ https://www.kaltura.com/partner_id : รหัสบัญชี Kaltura (หรือที่เรียกว่า PartnerId) ที่จะใช้ks : สตริงเซสชัน Kaltura ที่สร้างขึ้นซึ่งตัวแก้ไขจะตรวจสอบสิทธิ์ด้วยentry_id : รหัสของรายการวิดีโอที่จะแก้ไข (ตัดหรือแก้ไขแบบทดสอบ) หรือโคลน (สร้างคลิปใหม่จากหรือโคลนสำหรับแบบทดสอบใหม่)player_uiconf_id : ID uiconf อินสแตนซ์ Kaltura Player ที่จะใช้สำหรับโปรแกรมเล่นมุมมองการแก้ไข (คุณสามารถดูได้ในแท็บ KMC Studio) ตรวจสอบให้แน่ใจว่าเครื่องเล่นที่คุณใช้ ไม่ได้ กำหนดค่าเป็นเล่นอัตโนมัติ (ตรวจสอบให้แน่ใจว่า autoPlay=false ในการกำหนดค่าเครื่องเล่น หรือใช้ Studio เพื่อแก้ไขเครื่องเล่น และยกเลิกการเลือกเล่นอัตโนมัติในการตั้งค่าหลัก)load_thumbnail_with_ks : บูลีน (ค่าเริ่มต้นคือเท็จ) ระบุว่าจะเพิ่ม KS ต่อท้าย URL ของภาพขนาดย่อหรือไม่ ในกรณีที่บัญชีของคุณได้รับการกำหนดค่าให้ต้องใช้ 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://knowledge.kaltura.com/node/1912 )css_url : URL แบบเต็มไปยังไฟล์ CSS เพิ่มเติมเพื่อแทนที่กฎสไตล์preview_player_uiconf_id : อินสแตนซ์ Kaltura Player ที่จะใช้สำหรับการดูตัวอย่าง ถ้าไม่ผ่านก็จะใช้ผู้เล่นหลัก ภาษาถูกกำหนดตามลำดับความสำคัญ:
locale_url - ไฟล์โลแคลที่กำหนดเอง URL แบบเต็มไปยังไฟล์ json พร้อมคำแปลlanguage_code - รหัสภาษาที่รองรับ (เช่น en )language_code=en ) ถูกใช้เป็นสถานที่เริ่มต้น (หากไม่มีการกำหนดค่าอื่นใด) เนื่องจากการสร้างเซสชันควรทำบนฝั่งเซิร์ฟเวอร์เท่านั้น (เพื่อไม่ให้เปิดเผยคีย์ API หรือข้อมูลรับรองลับของคุณ) - เราขอแนะนำให้สร้างบริการแบ็กเอนด์ที่จะถูกเรียกเมื่อผู้แก้ไขร้องขอ KS ใหม่ และส่งคืน KS ที่จำเป็นสำหรับแต่ละเหตุการณ์
postMessageData.data.entryId จะมี ID ของรายการที่สร้างขึ้นใหม่ (ส่งต่อไปยังบริการการสร้าง KS ของคุณ และส่งคืน KS พร้อมสิทธิ์ดูและแก้ไขตามลำดับ)messageType: 'kea-ks' เพื่อตั้งค่า 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 จะรวม entryId ของรายการ Kaltura ที่ได้รับการอัปเดต
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created ส่งเมื่อมีการสร้างรายการทดสอบในวิดีโอใหม่ message.data จะรวม entryId ของรายการ Kaltura ที่สร้างขึ้น
if ( postMessageData . messageType === 'kea-quiz-created' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-get-display-name คำขอรับชื่อที่แสดงของผู้ใช้สำหรับเจ้าของรายการที่โหลด คุณลักษณะ data เก็บรหัสผู้ใช้ที่เกี่ยวข้อง การตอบสนองที่คาดหวัง: 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แอปพลิเคชันโฮสต์สามารถส่งได้เมื่อต้องการเริ่มกล่อง โต้ตอบบันทึกเป็น ให้กับผู้ใช้ และเริ่มกระบวนการคลิปวิดีโอใหม่ (แท็บที่รองรับ: ตัวแก้ไข) ในตัวแก้ไข การดำเนินการบันทึกจะสอดคล้องกับการดำเนินการคลิป การดำเนินการนี้ยังอนุญาตให้ส่งรหัสอ้างอิงที่จะถูกเพิ่มไปยังรายการที่ลอกแบบมาซึ่งเป็นส่วนหนึ่งของการตอบกลับ
หมายเหตุ เพื่อรองรับการตั้งค่าฟิลด์ ReferenceId เซสชัน Kaltura ที่ใช้โดยแอป Editor ต้องใช้บทบาทของผู้ใช้โดยเปิดใช้งานการอนุญาตต่อไปนี้:
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. สงวนลิขสิทธิ์
ตรวจสอบรายการไลบรารีบุคคลที่สามของ Open Source ที่ใช้ในโปรเจ็กต์นี้
