kaltura editor app embed
1.0.0
브라우저 내 비디오 편집 기능으로 앱을 강화하여 애플리케이션 내에서 비디오 생성 및 공유를 쉽고 단순화하세요.
이 저장소는 호스팅 NodeJS 앱에 Kaltura Editor 애플리케이션을 포함하는 방법을 보여주는 참조 NodeJS 앱입니다.
이것은 매우 기본적인 노드 익스프레스 기반 앱입니다(Express Generator를 사용하여 생성됨).
Kaltura Editor 앱 기능은 다음과 같습니다 . 최종 사용자의 비디오 클립 생성 지원, 큐 포인트, 캡션 및 멀티 스트림 콘텐츠 지원, 조용한 영역 감지를 위한 오디오 그래프, 중간에서 잘린 긴 비디오 다듬기, 데스크톱 및 태블릿 브라우저와 호환, 사용하기 쉽고 접근성 고려 , CSS로 사용자 정의 가능, 보안 iframe API를 사용하여 모든 웹 앱에 쉽게 통합, 대화형 인비디오 퀴즈 생성 및 편집, 동적 광고에 대한 큐 포인트 설정에 사용, 액션을 유도하는 핫스팟 오버레이 생성 등. Kaltura Editor 기능에 대해 알아보려면 Kaltura Editor 교육 비디오를 시청하세요.
npm installconfig.template.json config.json 에 복사합니다.config.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를 사용하여 수행됩니다.
이 저장소에서는 완전한 참조 구현 예제도 찾을 수 있습니다(reference-samples 디렉터리, 해당 프로그래밍 언어 디렉터리 아래).
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의 데이터 속성에서 초기화 매개변수를 전달해야 합니다. 다음은 사용 가능한 모든 매개변수에 대한 자세한 검토입니다.
service_url : API 요청(기본 API 엔드포인트)을 생성할 때 사용할 Kaltura 서비스의 URL(일반적으로 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 : 계정이 썸네일 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 - 클릭 유도 문구 핫스팟 탭용입니다. 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 및 edit 권한이 있는 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 항목의 항목 ID가 포함됩니다.
if ( postMessageData . messageType === 'kea-quiz-updated' ) {
// do something (you can also ignore it), you can invalidate cache, etc..
}kea-quiz-created 새 동영상 내 퀴즈 항목이 생성되면 전송됩니다. message.data 생성된 Kaltura 항목의 항목 ID가 포함됩니다.
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. 모든 권리 보유.
이 프로젝트에 사용된 오픈 소스 타사 라이브러리 목록을 검토하세요.
