قم بتزويد تطبيقاتك بإمكانيات تحرير الفيديو داخل المتصفح لتسهيل وتبسيط عملية إنشاء الفيديو ومشاركته داخل تطبيقاتك.
هذا الريبو هو تطبيق NodeJS مرجعي يوضح كيفية تضمين تطبيق Kaltura Editor في تطبيق NodeJS المستضيف.
هذا تطبيق أساسي للغاية يعتمد على العقدة السريعة (تم إنشاؤه باستخدام Express Generator).
تتضمن ميزات تطبيق Kaltura Editor ؛ تمكين المستخدمين النهائيين من إنشاء مقاطع فيديو، ودعم النقاط الإرشادية، والتسميات التوضيحية، والمحتوى متعدد الدفق، ورسم بياني صوتي لاكتشاف المناطق الصامتة، وقص مقاطع الفيديو الطويلة من المنتصف، ومتوافق مع متصفحات سطح المكتب والأجهزة اللوحية، وسهل الاستخدام وإمكانية الوصول ، قابلة للتخصيص باستخدام CSS، سهلة التكامل في أي تطبيق ويب باستخدام واجهة برمجة تطبيقات iframe الآمنة، إنشاء وتحرير اختبارات تفاعلية داخل الفيديو، تستخدم لتعيين نقاط إشارة للإعلانات الديناميكية، إنشاء تراكبات نقاط فعالة قيادة العمل وأكثر من ذلك. للتعرف على إمكانيات محرر Kaltura، شاهد مقاطع الفيديو التدريبية لمحرر Kaltura.
npm install
config.template.json
إلى config.json
config.json
وقم بالتكوين وفقًا للتعليمات وقم بإزالة جميع التعليقاتDEBUG=kaltura-editor-app-embed:* npm start
set DEBUG=kaltura-editor-app-embed:* & npm start
index
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 Editor عن طريق تضمين iFrame داخل تطبيق الويب الخاص بك. يتم التواصل مع تطبيق المحرر (استدعاء الإجراءات والرد على الأحداث) باستخدام واجهة برمجة تطبيقات postMessage.
ستجد في هذا المستودع أيضًا أمثلة تنفيذ مرجعية كاملة (تحت دليل العينات المرجعية، ودليل لغة البرمجة المعني).
يتوقع محرر Kaltura جلسة Kaltura (KS) في 3 أحداث ما بعد الرسالة:
userId
صالح يمثل userId
الصحيح في نظامك. سيمتلك userId
هذا الإدخالات التي تم إنشاؤها حديثًا (في حالة استخدام حفظ باسم أو إنشاء اختبار جديد).sview:<entryId>
لتجاوز أي قيود خاصة للتحكم في الوصول.edit:<entryId>
.edit:<entryId>
. userId
عند إنشاء الجلسة، من أجل معاينة الإدخال المحرر بشكل مجهول (سيضمن هذا أنه عند الإجابة على اختبار أثناء المعاينة، لن يتم تسجيله كمستخدم حقيقي أثناء اختبارات المعاينة).sview:<entryId>
لتجاوز أي قيود خاصة للتحكم في الوصول.disableentitlementforentry:<entryId>
لتجاوز إعدادات الاستحقاق الخاصة لجلسة المعاينة.setrole:PLAYBACK_BASE_ROLE
حتى لا يُسمح لهذه الجلسة بتنفيذ إجراءات بخلاف إجراءات التشغيل اللازمة لمعاينة الإدخال الجديد. في التعليمات البرمجية الخاصة بك، حيث تم تضمين محرر iFrame، قم بإعداد مستمع لـ 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، ستحتاج إلى تمرير معلمات التهيئة. فيما يلي مراجعة مفصلة لجميع المعلمات المتاحة.
service_url
: عنوان URL لخدمة Kaltura الذي سيتم استخدامه عند تقديم طلبات واجهة برمجة التطبيقات (نقطة نهاية واجهة برمجة التطبيقات الأساسية)، عادةً https://www.kaltura.com/
.partner_id
: معرف حساب Kaltura (المعروف أيضًا باسم PartnerId) المراد استخدامه.ks
: سلسلة جلسة Kaltura التي تم إنشاؤها والتي سيقوم المحرر بالمصادقة عليها.entry_id
: معرف إدخال الفيديو المراد تحريره (قص أو تحرير اختبار) أو استنساخه (إنشاء مقطع جديد منه أو استنساخه في اختبار جديد).player_uiconf_id
: معرف uiconf لمثيل Kaltura Player الذي سيتم استخدامه لمشغل عرض التحرير (يمكنك العثور عليه في علامة التبويب KMC Studio). تأكد من عدم تكوين المشغل الذي تستخدمه على التشغيل التلقائي (تأكد من أن autoPlay=false
في تكوين المشغل أو استخدم الاستوديو لتحرير المشغل وإلغاء تحديد التشغيل التلقائي في الإعدادات الرئيسية).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
) كلغة افتراضية (إذا لم يتم تكوين أي شيء آخر). نظرًا لأن إنشاء الجلسات يجب أن يتم فقط من جانب الخادم (لعدم الكشف عن مفاتيح واجهة برمجة التطبيقات أو بيانات الاعتماد السرية الخاصة بك) - نوصي بإنشاء خدمة خلفية سيتم استدعاؤها عندما يطلب المحرر KS جديد ويعيد KS المطلوب لكل حدث.
postMessageData.data.entryId
على معرف الإدخال الذي تم إنشاؤه حديثًا (قم بتمريره إلى خدمة إنشاء 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
بمعرف الإدخال الذي يتم قطعه. الاستجابة المتوقعة: 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
بمعرف الإدخال الذي تم اقتطاعه.
if ( postMessageData . messageType === 'kea-trimming-done' ) {
console . log ( 'processing of entry with id ' + message . data . entryId + ' is complete' ) ;
}
kea-clip-created
تم الإرسال عند إنشاء المقطع. تحتوي سمة data
على معرف الإدخال الأصلي ومعرف المقطع الجديد واسم الإدخال الجديد. الاستجابة المتوقعة: 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 الذي تم تحديثه.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}
kea-quiz-created
يتم إرساله عند إنشاء إدخال اختبار جديد ضمن الفيديو. ستتضمن message.data
معرف الإدخال لإدخال 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
معرف الإدخال. يجب أن ينتقل التطبيق المضيف إلى صفحة تعرض الوسائط المحررة.
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-loaded
kea-editor-tab-loaded
kea-advertisements-tab-loaded
kea-hotspots-tab-loaded
kea-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
يمكن إرسالها بواسطة تطبيق الاستضافة عندما يريد المرء بدء مربع حوار "حفظ باسم" للمستخدم وبدء عملية مقطع الفيديو الجديد (علامة التبويب المدعومة: المحرر). في المحرر، يتوافق إجراء الحفظ مع عملية القطع. يسمح هذا الإجراء أيضًا بتمرير معرف مرجعي سيتم إضافته إلى الإدخال المستنسخ كجزء من الاستجابة.
ملاحظة لدعم إعداد حقل المعرف المرجعي، يجب أن تستخدم جلسة 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
اتصل بنا عبر TwitterKaltura أو البريد الإلكتروني: [email protected]
نحن نحب أن نسمع منك!
يتم إصدار كافة التعليمات البرمجية في هذا المشروع بموجب ترخيص AGPLv3 ما لم يتم تحديد ترخيص مختلف لمكتبة معينة في مسار المكتبة المعمول به.
حقوق الطبع والنشر © شركة كالتورا. جميع الحقوق محفوظة.
قم بمراجعة قائمة مكتبات الطرف الثالث مفتوحة المصدر المستخدمة في هذا المشروع.