A proof of concept that overlays a teleprompter on top of the Kaltura Express Recorder. The Kaltura Editor is then implemented to allow recordings to be trimmed.
https://kaltura-teleprompter.herokuapp.com/
http://www.kaltura.com/tiny/qag4h
- Copy env.template to .env and fill in your information
- Run: npm install
- For developement run: npm run dev
- Or, for production run: npm start
Kaltura Teleprompter is built on Node.js and development began by forking the Kaltura Node.js Template
Essentially, the teleprompter recording UI is a mashup of two projects, the javascript based Kaltura Express Recorder API and https://github.com/manifestinteractive/teleprompter. Event listeners from the Express Recorder are used to synchronize the start time of the teleprompter and the recorder.
The second part of the application is an implementation of the javascript Kaltura Editor API, and its event listeners are used to provide reliable download links and a confusion-free user experience.
When you first record a video with the javascript Express Recorder, it is saved to the Kaltura Cloud as a MediaEntry which you can access as a developer from the KMC once recording is finished. Each MediaEntry has an entryId which is a unique identifier for that video. The entryId is returned to the Express Recorder javascript object, and the browser is simply redirected to the editor routes/edit.js with the entryID in the url. There is also an option to download the video at this point, which is a built-in feature of the Express Recorder
When first loading the teleprompter, execution begins in routes/index.js and a Kaltura session is created via
var adminks = await KalturaClientFactory.getKS('', { type: kaltura.enums.SessionType.ADMIN });The session string is then passed to the UI
res.render('index', {
title: 'Kaltura Teleprompter',
ks:adminks
});And execution proceeds to views/index.ejs
The teleprompter has no knowledge of the recorder and it exists as an <iframe> positioned above the the Express Recorder's UI on the page. The source code for the teleprompter lives in /public/teleprompter-master
When starting and stopping the recorder its event listeners are triggered and then make javascript calls into the iframe. For example, in views/index.ejs start_teleprompter() is called when the recordingStarted of Express Recorder is triggered and stop_teleprompter() is called on recordingEnded
expRec.instance.addEventListener("recordingStarted", function () {
console.log("STARTED");
setTimeout(function () {
if (!cancelled) {
//call into the iframe of the teleprompter and start it
//when the Express Recorder has started
document.getElementById("teleframe").contentWindow.start_teleprompter();
} else {
cancelled = false;
}
}, 3000);
});
expRec.instance.addEventListener("recordingEnded", function () {
console.log("ENDED");
//call into the iframe of the teleprompter and stop it
//when the Express Recorder has started
document.getElementById("teleframe").contentWindow.stop_teleprompter();
});As you can see from this example, by taking advantage of Kaltura Express Recorder's event API you can create powerful, seamless integrations with the recorder as this project demonstrates.
When the user is satisfied with their recording, they press the "Upload" button on the UI which will upload their video to the Kaltura Cloud as a MediaEntry. Finally, the upload event is triggered in the UI:
//when upload of video is complete, redirect user to share
expRec.instance.addEventListener("mediaUploadEnded", function(event) {
window.onbeforeunload = null;
window.location = "/share?entryId="+event.detail.entryId;
});And it is the mediaUploadEnded listener that actually triggers the browser to redirect to the share page. Remember, you can access the uploaded MediaEntry from the KMC once it is uploaded.
The sharing page is based off https://developer.kaltura.com/player. But before the player is shown, the video must be ready for sharing.
function poll() {
$.getJSON("/status?entryId=<%=entryId%>", function (data) {
if (data['ready']) {
//show player
} else {
setTimeout(poll, 3000);
}
}
}
poll();the /status method in routes/index.js is polled recursively every 3 seconds until the video is ready.
And when the video is ready, it is displayed:
if (data['ready']) {
$("#spinner").hide();
try {
var player = KalturaPlayer.setup({
targetId: "kaltura-player",
provider: {
partnerId: <%= process.env.KALTURA_PARTNER_ID %>,
uiConfId: <%= process.env.KALTURA_RECPLAYER_ID %>
}
});
//load first entry in player
player.loadMedia({ entryId: '<%= entryId%>' });Thank you for helping Kaltura grow! If you'd like to contribute please follow these steps:
- Use the repository issues tracker to report bugs or feature requests
- Read Contributing Code to the Kaltura Platform
- Sign the Kaltura Contributor License Agreement
- Join the Kaltura Community Forums to ask questions or start discussions
- Read the Code of conduct and be patient and respectful
You can learn more about Kaltura and start a free trial at: http://corp.kaltura.com
Contact us via Twitter @Kaltura or email: [email protected]
We'd love to hear from you!
All code in this project is released under the AGPLv3 license unless a different license for a particular library is specified in the applicable library path.
Copyright © Kaltura Inc. All rights reserved.
Authors and contributors: See GitHub contributors list.
https://github.com/manifestinteractive/teleprompter MIT License