Kastio is an interactive webcasting platform developed for business and training events. It's advanced toolset allows the presenter to create visually rich webcasts with additional graphics and videos. While speaking, they can simultaneously monitor the engagement and activity of the webcast audience with the live-stats feedback that is provided. Presenters are also able to communicate with viewers via surveys.
The purpose of the Kastio webcast platform is to provide feature-rich content along with valuable stats, that help the presenter tailor the message, and that are useful for product marketing. One technical challenge to be overcome in the building of this app was that the content stream, enriched with extra material such as surveys, presentation slides, additional pictures and video, must reach the audience in a synchronised manner.
Since the app audience use various devices, and are spread across the globe, connection quality varies from place to place. This indicates a clear need for an elastic and customizable, embeddable player that allows content-creators to keep the viewing that takes place at their own websites.
Since Kastio retains full control over the content of each webcast, it is also functionally possible and desirable for the app to build up a market database, including all audience locations and demographics, factors which are vital for adopting effective sales strategies and are also important in terms of the need to know and monitor audience’s behavior patterns. Clearly, this sort of knowledge helps users to build stronger content.
The biggest challenge for backend developers was to ensure the syncing of the webcast stream, including all the components used by the presenter, both during the broadcast and playback. What the speaker is saying simply has to correspond with the surveys or slides used in the speaker's presentation.
Furthermore, synchronization can not only depend on the viewer having a good internet connection, in fact, regardless of how good their connection is, the viewer expects a perfectly synced stream, both during live broadcast and VOD playback.
Łukasz Wnęk
tech-lead of the project, explains the process of real-time synchronization between the video stream and other components
To reach this ambitious goal, we crafted a sophisticated solution completely from scratch. To deliver the highly anticipated features, we integrgated a Wowza Streaming Engine, a JW Player and a custom-made Flash object. We also pushed our boundaries in terms of the technology stack, since by using the Wowza's API server, we also managed to extend its core functionality. In addition, with a pack of Java plugins we handle authentication and count the play duration of webcast streams. This solution has turned out to be elastic enough to also allow for syncing during VOD replays, without our needing to change even a single line of code.
Secondly, we were concerned to efficiently track user engagement. This we accomplished by introducing a real-time analytics platform, tracking user activity during each webcast.
The analytics platform uses Redis for storage and WebSockets for communication. These allow the moderator to get instant feedback about user engagement, thus enabling moderators to take informed and appropriate action to maximize the quality of audience UX and participation in webcasts.
Meanwhile, front-end developers worked hard to create a lightweight player that would be easily embeddable. They also needed a player offering full screen mode on every site for streams of all possible aspect ratios. In addition, the player also had to be able to match the various customized styles of the host websites. Sophisticated enough to not display content on unauthorised websites, the player needed an uncluttered and informative interface, all while optimizing UX.
Krzysztof Jung
head of front-end team, explains the challenges
For simplicity of use, the webcast widget is just a single snippet of dedicated script link that needs to be placed on a user website. The linked script creates autonomous space withing the host page environment via an HTML Iframe element, that runs the client’s webcast application.
Thanks to HTML5 postMessage, the API and the widget's wrapping layer, webcast content can switch between multiple view modes: embedded player, cinema-like modal and full-browser viewport, all without interfering with the host website. Moreover, all rich webcast content such as video, pictures or text, are fully responsive, so there is no restriction for player size.
The real-time aspect of videocast and viewer engagement is especially evident in the live previews of poll results, or in the sending of questions during a presentation. Both these functions are handled by combined WebSockets and Pub/Sub solutions.
Additional setup allows for a security mode. In this case, the use of the webcast widget is limited to authorised domains only. Both server and player adapt to these restrictions. While Cross-Origin Resource Sharing (CORS) takes care of authorizing the server side of webcasts, and an OTP token is used in the process of bootstrapping the webcast player inside of Iframe.
Monterail UX and UI design and development has transformed what was initially a plain webcast tool into a state-of-the-art, feature-rich webcasting platform that allows for the creation of collections of interactive and content-rich presentations, packed with supportive user features, including real-time data on the location and activity of the end user audience.
Błażej Chwoła
User Experience designer
Krzysztof Jung
Front-end developer
Patryk Peas
Front-end developer
Marzena Kawa
User Interface designer
They also took part in Kastio project:
You are now safe