Yavor Atanasov web portfolio

CCiPort

CCiPort is the final project for my MSc Digital Media course. It is a website that offers video on demand and, potentially, other media related opportunities to both staff and students of the Faculty of Creative and Cultural Industries at the University of Portsmouth. It is a web channel for the University TV and also a video showcase for the students from the Creative Technologies school.

The project is completed and installed on a local network within the School of Creative Technologies so it can be tested with students and staff. Its launching online is currently beyond my impact and is subject to organizational discussions within the school.

1. Short Intro

The final project of my MSc Digital Media course, with the title CCiPort, involves the creation of a video on demand website for the School of Creative Technologies at the University of Portsmouth. On the one hand, this website hosts all programs created by the school's TV channel called CCiTV and has the option to stream live over the net.

On the other hand, it is a website, where students from the School of Creative Technologies, after registration, are able to upload their own videos (created either for a class or as a side project). These videos are available to lecturers who are registered on the website. The lecturers are able to view them and choose the best ones and feature them on the public part of the website where they can be viewed by anyone over the web.

This essentially loads CCiPort with two main functions – a web channel for CCiTV and a video showcase for the School of Creative Technologies.

My Dissertation
Screenshot previews (mouse over the images for more info)
left
CCiPort Logo
explanation of the idea for the logo

CCiPort Logo

The logo of the website had to clearly show its connection with the faculty of Creative and Cultural Industries at the University of Portsmouth.

CCiPort Home Page

Home Page

The Home page shows the best videos voted by professors (the so called "Our best bits")

CCiPort Video Search

Video Search

CCiPort provides extensive search options for filtering the video content according to categories, sets and keywords.

CCiPort Upload

Upload Page

The video upload requires thourough description of the video to be entered - title, category, description, keywords. Only registered users can upload videos.

CCiPort Registration

Registration

The registration process is designed in a way that makes it virtually impossible for someone outside the university to register. It uses AJAX to immediatelly check the entered data against the database to prevent errors.

CCiPort Advanced Player

Advanced Player

This is the advanced flash application available only to lecturers. It enables lecturers to interactively create annotations onto the students videos as feedback.

CCiPort Profile Page

Profile Page

The profile page shows the registered user's videos only, including the annotations made by lecturers on those videos. This way they can get immediate and clear feedback from lecturers about the submitted material.

right

2. Project Objectives

The requirements elicitation process starts with capturing the objectives and expectations of the project’s stakeholders. Based on the meetings and conversations with the clients of the current project several objectives were defined. All of those key points were successfully completed in the final result according to clients' final evaluations. Some of the main objectives are as follows:

3. Macro Architecture

An important first step before designing the web application is to create a model of the environment that it is going to run in. This will provide a macro view of the architecture before focusing on the separate elements.

The CCiPort website is designed to make use of three separate server machines. One is the main Web server (running Apache) listening to HTTP requests and essentially hosting the web application including the PHP framework and the MySQL Database Management System. The web application serves content to the client using XHTML 1.1 and CSS 2.1.

Another machine is dedicated to encoding the uploaded videos into the proper format (the encoding software is chosen by the clients’ technical support team and is out of the scope of the current project). The encoding machine receives videos via the File Transfer Protocol (FTP) or HTTP, encodes them, creates thumbnails and transfers the ready videos to the streaming server (again via FTP or HTTP).

The third machine acts as a media streaming server that delivers all video content via the Real Time Messaging Protocol (RTMP). It runs the Flash Media Streaming Server 3.5, which also comes with an Apache server incorporated into the system. This way the third machine can listen to HTTP requests as well (and deliver media via that protocol if it has to). The delivery of the video content requires Flash Player 10 to be installed on the client machine.

CCiPort Macro Architecture

4. PHP Application Architecture

Although the macro model of the entire system gives a hint about the CCiPort architecture, this section zooms onto the core of the application – the server-side scripting organization. On that server-side functional level CCiPort uses an architectural pattern called MVC (Model-View-Controller). The MVC pattern separates the components of the application into three groups – application logic components, data components and presentation components.

CCiPort Micro Architecture

In pure web development sense, the Views are empty HTML/XHTML templates (although they might be views adapted for small PDA screens and mobile devices), the Controllers are the objects that process the client’s input, consult the Model (if they need to) and “insert” the dynamically obtained data into the Views and serve them to the client. Finally, the Model represents the underlying data. The Models are the only objects in the architecture that can access the database.

The CCiPort project utilizes the popular open-source PHP MVC framework called CodeIgniter.

Apart from being extremely light as a framework, CodeIgniter comes with an extensive library of classes that make easier the implementation of form validation, database manipulations, XSS filtering, authentication, sessions etc.

5. Flash Video Player Applications

CCiPort offers three flash applications (or three versions of video players):

CCiPort Basic Flash Player

A general flash video player – this is a “normal” flash video player with basic functionalities including playback controls, progress bar, volume controls, quality controls, etc. It is also able to catch live streams. This version of the video player is embedded on the Home page of the website and also the general video playback page. The anonymous visitors are able to view videos only via this player. This version of the flash video player was based on the Actionscript 3 classes of the default player that comes with the installation of the FMS 3.5

CCiPort Captions reading Flash Player

Annotation-reading video player – this player is essentially an extension to the basic player. It is able to load the annotations made by lecturers on the students’ personal videos. Therefore, this version of the player is only available on the profile page of the logged in users.

CCiPort Advanced Player

Annotation-creating flash video player – this is the video player application available only to lecturers. Using that application the lecturer can interactively create annotations onto the video.

The Captions classes written to extend the basic functionality of the flash video player use an interesting method to transfer and keep the captions data. Instead of using XML (which is the usual way of transferring data when working with Actionscript) those classes use the Action Message Format (AMF) to allow binary serialization of Actionscript 3 native types and objects to be sent to the server side. This way PHP methods and functions can be referenced directly within Actionscript and the data can be stored in the MySQL database. More on this topic can be found here.

6. Final words...

This short overview of the CCiPort project just gives a basic hint of the development process and the used technologies and software. In case you are curious about any of the stages of the project and would like to dig deeper into some of its aspects, please contact me and I'll be more than happy to answer all your questions.