EE-Video, Software System Lab, Electrical Engineering - Technion

52
EE-Video, Software System Lab, Electrical Engineering, Technion [200 8] EE-Video EE-Video Project Project Yossi Biton Yossi Biton [email protected] [email protected] 1

Transcript of EE-Video, Software System Lab, Electrical Engineering - Technion

Page 1: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

EE-VideoEE-Video ProjectProject

Yossi BitonYossi [email protected]@gmail.com

Nir YakobovskiNir [email protected]@yakobovski.com

1

Page 2: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

SupervisorSupervisor

Assaf Solomovitch Assaf Solomovitch [email protected]@gmail.com

2

Page 3: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

TABLE OF CONTENTS

Abstract................................................................................................................................4

EE-Vid's Functionality.........................................................................................................5

Design-Overview.................................................................................................................6

Design goals and requirements........................................................................................6

Introductions....................................................................................................................8

Technologies....................................................................................................................9

ASP.NET.....................................................................................................................9

SQL............................................................................................................................13

AJAX.........................................................................................................................13

Flash...........................................................................................................................14

DAL design........................................................................................................................15

Database diagram...........................................................................................................15

Tables description..........................................................................................................16

Tbl_users....................................................................................................................16

Tbl_movies................................................................................................................16

Tbl_comments...........................................................................................................17

Tbl_categories............................................................................................................17

Tbl_tags.....................................................................................................................17

Xsd& stored procedures................................................................................................18

BLL design........................................................................................................................20

Abstract..........................................................................................................................20

3

Page 4: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Class structure................................................................................................................21

Presentation Layer design..................................................................................................22

Abstract..........................................................................................................................22

Features..........................................................................................................................22

homogenous look.......................................................................................................22

Related Videos...........................................................................................................22

PageS.............................................................................................................................23

Master Page...............................................................................................................23

MOVIEs page............................................................................................................24

Player page.................................................................................................................25

Register page.............................................................................................................26

Upload page...............................................................................................................27

SEArch page..............................................................................................................27

User Guide.........................................................................................................................28

Movies webpage............................................................................................................28

player webpage..............................................................................................................29

Register webpage...........................................................................................................30

Upload webpage............................................................................................................30

Installation instructions......................................................................................................31

Requirements for deployment........................................................................................31

Steps that need to be taken.............................................................................................31

Appendix............................................................................................................................33

FLV flash video streaming........................................................................................33

Creating Previews of Videos.....................................................................................34

4

Page 5: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

ABSTRACT

EE-Video web site is based on a cutting-edge technology and provides watching, sharing and influencing videos using an advanced interface regardless of browser selection.

EE-Video website supports the user interaction abilities such as commenting videos, ranking videos and searching abilities by different methods such as categories and tags.

The Project implementation is established on several considerations which influenced every architectural decision made on the project such as multiple simultaneously users and rich user experience.

The work on the project contained a great deal of preliminary definitions such as determine of media formats, development environment selection and code layers segmentation.

5

Page 6: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

EE-VID'S FUNCTIONALITY

Watching Videos

Progressive download of FLV files.

Uploading Videos

Automatic JPG Snapshot from uploaded movie. Description, Tags & category information gathering easily include of format conversion paid add-on

Searching Videos

General search for a video by name, tag and category. Related movies of the current played movie by its category

and tags. movies by specific creator Extensive Search abilities

Managing users

Different tiers of permissions for different levels of users - users with higher level have wider functionality.

Using brand new management module within the SQL Database server for improved abilities.

Register to EE-Video

User profile storage Email password reminder

Ranking a video

Logged in users may rank an existing video Higher ranked movie should be resulting more in searches

6

Page 7: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

DESIGN-OVERVIEW

DESIGN GOALS AND REQUIREMENTS

The Project implementation is established on these several considerations which influenced every architectural decision made on the project:

Multiple simultaneously users

“Disconnected mode” connectivity to the data server –retrieving data by opening a connection for a short periods for avoidance of mutual influence.

Optimization of number Database accesses and the amount of data transference.

Minimization of user’s session data stored in the server’s memory.

Rich user experience

Fast responsiveness of users interaction Simplicity in user interface No need for special installation by users Usage of AJAX technology for improved user interface. Minimal number of different pages for the user interaction. Unified forms visibility using a “Master Page” and navigation

bar. Multiple browser support – implemented by using the

Microsoft .net Framework.

Generic structure and High scalability

Everything is abstracted! Additions can be integrated in parallel to existing functionality

and without making major changes. Database table’s connectivity allows implementing wide

variety of queries.

extendibility and Flexible maintainability

7

Page 8: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Abstracted Objects formed using private methods for a local change of the objects data, and by using public methods that I can be accessed through other layers.

Designated functions separations allows easy perform of local changes and functionality supplementary.

Co-Existence with of offline maintenance scripts

High level of security

Users management is being done using SQL server build in management engine

Usage of .NET generic users profile management objects

The work on the project contained a great deal of preliminary definitions such as:

Determine media formats Selecting development environment and database and web servers Segmenting website layers of code Writing of use-cases for users site usage Defining Database tables and their correlations Usage of offline applications for dealing with media files

8

Page 9: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

INTRODUCTIONS

EE-Video’s architecture is known as the “N- Tier Architecture” and is formed by usage of several layers interfacing between them for transference of “Entities”. These “Entities” are custom objects implemented by classes in C# and contains methods and properties.

The site’s high level of abstraction is therefore reached by designing these “Entities” for containing optimal capacitance for a faster transference and yet suiting different usages.

The fallowing diagram presents the separated layers and their well formed interfaces:

9

Page 10: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

TECHNOLOGIES

ASP.NET

ASP.NET is a programming framework built on the common language runtime that can be used on a server to build powerful Web applications. ASP.NET offers several important advantages over previous Web development models:

Enhanced Performance

10

Page 11: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

ASP.NET is compiled common language runtime code running on the server. Unlike its interpreted predecessors, ASP.NET can take advantage of early binding, just-in-time compilation, native optimization, and caching services right out of the box. This amounts to dramatically better performance before you ever write a line of code.

World-Class Tool Support.

The ASP.NET framework is complemented by a rich toolbox and designer in the Visual Studio integrated development environment. WYSIWYG editing, drag-and-drop server controls and automatic deployment are just a few of the features this powerful tool provides.

Power and Flexibility

Because ASP.NET is based on the common language runtime, the power and flexibility of that entire platform is available to Web application developers.The .NET Framework class library, Messaging, and Data Access solutions are all seamlessly accessible from the Web. ASP.NET is also language-independent, so you can choose the language that best applies to your application or partition your application across many languages. Further, common language runtime interoperability guarantees that your existing investment in COM-based development is preserved when migrating to ASP.NET.

Simplicity

ASP.NET makes it easy to perform common tasks, from simple form submission and client authentication to deployment and site configuration. For example, the ASP.NET page framework allows you to build user interfaces that cleanly separate application logic from presentation code and to handle events in a simple, Visual Basic - like forms processing model. Additionally, the common language runtime simplifies development, with managed code services such as automatic reference counting and garbage collection.

11

Page 12: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Manageability

ASP.NET employs a text-based, hierarchical configuration system, which simplifies applying settings to your server environment and Web applications. Because configuration information is stored as plain text, new settings may be applied without the aid of local administration tools. This "zero local administration" philosophy extends to deploying ASP.NET Framework applications as well. An ASP.NET Framework application is deployed to a server simply by copying the necessary files to the server. No server restart is required, even to deploy or replace running compiled code.

Scalability and Availability

ASP.NET has been designed with scalability in mind, with features specifically tailored to improve performance in clustered and multiprocessor environments. Further, processes are closely monitored and managed by the ASP.NET runtime, so that if one misbehaves (leaks, deadlocks), a new process can be created in its place, which helps keep your application constantly available to handle requests.

12

Page 13: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Customizability and Extensibility

ASP.NET delivers a well-factored architecture that allows developers to "plug-in" their code at the appropriate level. In fact, it is possible to extend or replace any subcomponent of the ASP.NET runtime with your own custom-written component. Implementing custom authentication or state services has never been easier.

User Membership

http://aspnet.4guysfromrolla.com/articles/040506-1.aspxhttp://msdn.microsoft.com/en-us/library/ms998317.aspx

EE-Video security consists on ASP.NET membership module, consolidation of the Membership/Roles Schemas within its SQL Database and management of site’s users Through the ASP.NET Website Administration Tool.Forms authentication with SQL Server is most applicable in situations where users of your application are not part of your Windows domain, and as a result, they do not have Active Directory accounts.

ASP.NET version 2.0 introduces a membership feature that you can use with forms authentication. The membership feature provides an abstraction for the underlying data store used to maintain user credentials such as user names and passwords, and it provides an API that allows you to easily validate user credentials and manage the user database.ASP.NET login controls provide a robust login solution for ASP.NET Web applications by offering login controls that integrate with ASP.NET membership and forms authentication to help automate user authentication for a Web site.

Once we have configured our ASP.NET website to use the membership system, we could manage EE-Video's users through the ASP.NET Website Administration

13

Page 14: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Tool. We can simply go to the Security tab and click on the "Create User" link to create a new user account or "Manage Users" link to edit or delete existing user accounts. we can also active the roles feature from the online Administration Tool, as well as assign users to roles and roles to users. Roles are used in order to group users where the roles a user belongs might specify what web pages they have access to, what information they see on the screen, and whether or not certain regions in a page are editable or view-only. Grouping users into roles and basing functionality and authorization based on a user's role is quite easy in ASP.NET 2.0 thanks to the roles service. Like the membership service, the roles service defines a framework for programmatically creating and deleting roles, assigning and removing roles from users, and determining what users belong to a role, and to what roles a user belongs. The role functionality is currently not widely used within EE-Video but is necessary for such a site as its design determines.

The consolidation of the Membership schemas within the SQL server instead of having the membership schema external to the existing application database is highly importance for such interactive WEB2.0 websites as EE-Video. The importance is due to the necessary database connectivity between the site’s interactive functionality and the users who committed those by foreign keys.for example – logged in users can leave comments for a video and when we include the membership schema in our application's database the Comments database table will simply include a foreign key to the aspnet_Users table to indicate what registered user made the comment.

14

Page 15: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

SQL

EE-Video uses SQL server 2005 as its database server, and its DAL consists on using a Stored-Procedures written in SQL for data retrieving and committing of data transactions.the C# classes uses the abstraction of XSD class which holds the schema of the database tables and exiting stored procedures as methods on the database tables.

AJAX

EE-Video uses AJAX technology for providing advanced GUI (Graphic user interface) where AJAX is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity, speed, functionality, and usability.

The name is an acronym standing for Asynchronous JavaScript and XML. Ajax is asynchronous in that loading does not interfere with normal page loading. JavaScript is the programming language in which Ajax function calls are made. Data retrieved using the technique is commonly formatted using XML, as reflected in the naming of the XMLHttpRequest object from which Ajax is derived.

Ajax is a cross-platform technology usable on many different operating systems, computer architectures, and Web browsers as it is based on open standards such as JavaScript and XML, together with open source implementations of other required technologies.

15

Page 16: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

FLASH

EE-Video selection of video presenting technology based on both player abilities and popularity among internet users (for avoiding additional applications by the clients), and concluded the selection of Flash technology.Adobe Flash, or simply Flash, refers to both the Adobe Flash Player, and to the Adobe Flash Professional multimedia authoring program. The Flash Player, developed and distributed by is a client application Installed on over 850 million Internet-connected desktops and mobile devices (jun08) and is supported by all common web browsers. It features support for vector and raster graphics, a scripting language called ActionScript and bi-directional streaming of audio and video.

16

Page 17: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

DAL DESIGN

DATABASE DIAGRAM

This is a diagram of the DB Tables and the connections between these tables:

17

Page 18: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

TABLES DESCRIPTION

The DB contains 5 different tables, listed below with the columns of each table :

TBL_USERS

(PK) UserID – unique key for the user.

Rank – a rank for the user ( according to popularity of his movies for example).

UserName – the user name in the website.

First Name

Last Name

Birthday

Icq

Movies Added – number of movies added by this user.

Comments Added - number of comments added by this user.

Role

TBL_MOVIES

(PK) key - unique key for the movie.

Name

Description

(FK) Category Name – category of the movie , connected as FK to the categories table.

(FK) UserID – the UserID of the movie creator, connected as FK to the users table.

18

Page 19: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Creation Time

ViewsCount – number of people who watched this movie.

CommentsCount - number of comments about this movie.

Rating

RatingCount – number of people who rated this movie.

Location – the physical location of the movie on the server.

DurationTime

TBL_COMMENTS

(PK) key - unique key for the comment.

Text

(FK) MovieKey - the MovieKey of the movie which this comment is about, connected as FK to the movies table.

(FK) UserID - - the UserID of the creator of this comment, connected as FK to the users table.

CreationTime

TBL_CATEGORIES

(PK) Name

Description

TBL_TAGS

TagName

MovieKey

19

Page 20: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

XSD& STORED PROCEDURES

A diagram of youtube.xsd :

The youtube.xsd file contains a list of SQL queries according to the different tables. These queries used to execute the basic actions on the database such as getting a list of movies,users or categories .

This file generates two classes for each table – the TableAdapter and the DataTable. The TableAdapter represents the connections and commands used to retrieve and save data from the database, while the DataTable used to store this data.

The DAL classes are based on this XSD file, having DAL class for each table in the file : CategoriesDAL class, CommentsDAL class, MoviesDAL class, TagsDAL class and UsersDAL class.

20

Page 21: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

The main purpose of the DAL classes is to call the SQL queries and convert the data returned from these queries to our entities types.

For example , in the XSD file we have a SQL query which returns all the movies from a specific category and the return type is MoviesDataTable – in the MoviesDAL class we have a parallel method which returns the data in a List of our movie class.

21

Page 22: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

BLL DESIGN

ABSTRACT

The project has namespace named BLL, which contains 5 different classes: Tags_bll,Categories_bll, Comments_bll, Movies_bll and Users_bll.

Each of the bll classes has parallel class in the DAL namespace - the DAL classes connect the BLL classes with the SQL DB.

These 4 classes are used in order to mangae the different objects in the website.

The categories class used only to get a list of the existing categories of movies.

The comments class is responsible for managing the users comments about the movies in the website – it has methods which can find all the comments about a specific movie or all the comments written by a specific user. It also has methods for adding or deleting comments.

The movies class has methods for searching movies from a specific category or a specific creator. It also has methods for adding,deleting and updating movie details ( such as number of watches or movie rating).

The users class gather all actions regarding to the users engine in the website. The main methods in this class are a method for adding new user to the website, and a method which search for a user details by getting his user key.

22

Page 23: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

CLASS STRUCTURE

This is a structure of the classes in the website:

In the low level we have the youtube.xsd file , which gathers all the SQL statements for pulling the relevant data from the SQL DB.

These SQL statements are divided into 5 parts – tags,categoories, comments,movies and users.

In the upper level there are the basic entities used in the website. The entities are actually 5 different classes : the category class,tag class,movie class,user class and the comment class. Objects of these classes represents the suitable rows in the SQL tables . For example , a single row from the movies table will be stored in a movie object.

23

Page 24: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Each of these classes also allows to change details of the specific row it represents and save these changes in the data base.

The data which is passed to the presentation layer will always be from the type of these entities. As explained above the DAL namespace contains 5 different classes according to the different types of objects, and the BLL has paralell calssed.

PRESENTATION LAYER DESIGN

ABSTRACT

The presentation layer was built using ASP.NET comprising AJAX objects and a FLASH player.

One of the EE-Video’s design goals is creating a “Rich user experience”, meaning:

Fast responsiveness of users interaction Simplicity in user interface No need for special installation by users Usage of AJAX technology for improved user interface. Minimal number of different pages for the user interaction. Unified forms visibility using a “Master Page” and navigation

bar. Multiple browser support – implemented by using the

Microsoft .net Framework.

FEATURES

HOMOGENOUS LOOK

Improved user experience is reached through simple and homogenous user interface, and therefore EE-Video uses a master-page for uniform view of the header and footer of the site, while various operations can be executed refresh-less using AJAX objects.

RELATED VIDEOS

When a user watch a video in the site he can see at the bottom of the page two different lists of related videos to the current video.

24

Page 25: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

One list includes videos which are from the same category as the current movie, and the second list include videos which were uploaded from the same user as the current movie.

PAGES

MASTER PAGE

This page is a wrapper to the other .aspx files. It contains all the data which is similar to all web pages in the website. For an example, the logo of the website was created only once, in the master page. All the other pages that were created from the master page automatically have it.

The master page was created in order provide a consistent look and displaying general information for all the pages in the website. Another aim of the master page creation is to prevent duplication of code and work.

Hereby the header and the footer of the master page:

The header contains the sites logo and adjusted ASP.NET login controls.

As can be seen in the attached images - The Login control displays a user interface for user authentication. The Login control contains text boxes for the user name and password and a check box that allows users to indicate whether they want the server to store their identity using ASP.NET membership and automatically be authenticated the next time they visit the site.

25

Page 26: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

The left added picture demonstrate logged-in user information. Whereas while the user is not logged-in to the site, a different mode of the log-in object is presented allowing quick login by typing username and password - this log-in mode can be seen on the right picture.

Master page’s header also contains a menu of 3 buttons which is shown at all times allowing a quick access to search page, upload page and player page.

MOVIES PAGE

This the main page of the website. In this page the user should select a category from a drop-down list. The categories available are:

Comedy, Education, Films&Animation, Fun, Music, New & Politics, Science & Technology, Sports, Travel & Events.

After a category is chosen a list of movies from this category is shown in the right side of the page. When aspecific movie is chosen the user is redirected to player page in order to watch this movie.

26

Page 27: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

PLAYER PAGE

The player page contains 4 parts:

Flash Player Information regarding the current played movie Comments Related movies suggestions

27

Page 28: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

The current added picture demonstrates the “player webpage” and includes the flash player itself as can be seen on the upper left side just below the menu.Information regarding the current played movie is shown on the upper right side of the screen, and users’ comments on the selected movie are displayed on the bottom left side. An “Add Comment” button is located near the comments and by pressing it a text input box will pop up right under it allowing the logged it user to add him comment.On the bottom right side of the player page there’s a tabbed menu with list of related movies to the played one. There’s a tab for movies by the same category and by other movies from the same originator.

By pressing of one of the suggested related movie on the list the player page will update to the new played movie showing its information, comments and related movies.

REGISTER PAGE

EE-Video registration page consists on improvements added to

28

Page 29: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

Our website register page is a standard register page.

The submission of the registration request is divided into 2 parts :In the first part the user should enter an user name, password, e-mail, security question & answer. At this point several conditions are checked :

The user name is uniqe

The password is legal

The e-mail addres is valid

If all these checks are true the user is directed to the second part of the registration.

In this part the user should enter few more details, such as his first and last name, his birthday and his ICQ number.

After this part is over the user details are entered into the DB tables and from now on he's a registered user to the website.

29

Page 30: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

UPLOAD PAGE

This page is visible only to a registered user . If an an anonymus user is trying to enter this page he wiil get a messege notificating him that he musr log in to the website first.

In the upper part of the page the user is required to enter the details of the movie he's going to upload: the movie name,a brief description of the movie, the category of the movie (chosen from a DropDown list), and 4 tags for the movie (the tags fields are optional).

Then he should enter the physical location of the movie in his computer (using the browse button).

The movie uploaded should be with an .flv extension and in a size under 4k bytes. If the movie is deal with these limitations it's copied to the website server and the movie details are saved in the DB. The movie name in the server will be given as the movie key from the DB – in this way it's ensured that every movie will have an unique name.

In the upload progress we also used an application called ffmpeg in order to capture a preview image from the movie.

(put the ffmpeg explanation in the end of the book)

SEARCH PAGE

The page will be used in a future implementation , after the search engine will be built.

30

Page 31: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

USER GUIDE

MOVIES WEBPAGE

31

Page 32: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

PLAYER WEBPAGE

The current added picture demonstrates the “player webpage” and includes the player itself as can be seen on the upper left side just below the menu.Information regarding the current played movie is shown on the upper right side of the screen, and users’ comments on the selected movie are displayed on the bottom left side. An “Add Comment” button is located near the comments and by pressing it a text input box will pop up right under it allowing the logged it user to add him comment.

32

Page 33: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

REGISTER WEBPAGE

UPLOAD WEBPAGE

33

Page 34: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

34

Page 35: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

INSTALLATION INSTRUCTIONS

REQUIREMENTS FOR DEPLOYMENT

Pc with windows XP\Vista\Windows server operation system installed

.NET 2.0 (or better) framework installed.

VS 2008

SQL Server 2005

STEPS THAT NEED TO BE TAKEN

1. Install all of the above software components.2. Extract EEvideo.zip to your computer.3. Setup the SQL server :

a. Under the EEvideo directory you will find a directory named ‘SQL’. In this directory there is a file called DBbackup.bak, used for restoring the DB.

b. Create a new database named youtube in the server.c. Restore the DBbackup.bak file into the database you just created.

4. Configure the system:a. Under the root directory of the system you will find the file ‘web.config’.

Open it and search for the following line:<connectionStrings>

<add name="youtubeConnectionString" connectionString="Data Source=SOFTLAB-DEV-WEB\SQL2005;Initial Catalog=youtube;Persist Security Info=True;User ID=youtube;Password=1qaZ2wsX" providerName="System.Data.SqlClient"/>

</connectionStrings>

b. Edit the ‘connectionString' to match the connection string of your SQL server.

35

Page 36: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

5. If running under development mode, use the page ‘populateDB.aspx’ to populate the database with test data (videos, comments etc) in order to test and use the system.

open the web site and run the page ‘main.aspx’. This will give you access to the entire system.

36

Page 37: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

APPENDIX

FLV FLASH VIDEO STREAMING

Our flv player code taken from here. It's a Flash Video player that is able to pseudo-stream FLV-files. The html code for this player :

<object   classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0  width="336"   height="297">      <param name="movie" value="scrubber.swf?file=http://&bufferTime=3&autoStart=false" />      <param name="quality" value="high" />      <embed src="scrubber.swf?file=http://&bufferTime=3&autoStart=false"     quality="high"     pluginspage="http://www.macromedia.com/go/getflashplayer"     type="application/x-shockwave-flash"     width="336"     height="297"></embed>  </object>

The player features :

Lightweight 54kb swf-player

Plays an aspect ratio of 4:3 (or everything else letterboxed)

Shows metadata of video within the contextmenu

Autoplays videos (param.) or wait for user to push the playbutton (default)

Parameterized bufferlength (default: 3s)

Free

37

Page 38: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

The HttpHandler for dealing with .flv files requests is implemented in the FLVstreaming class. It's configured in the web.config file :

    <httpHandlers>                   verb="*" path="*.flv" type="FLVStreaming" />    </httpHandlers>

CREATING PREVIEWS OF VIDEOS

OverviewThe creation of preview images of the uploaded videos is imperative for this website nature. When displaying the videos for the user to choose from, the preview image is an important parameter on deciding which video to choose. We searched for a class of dynamic library to create such preview images from videos and could find one with a simple interface. Finally, we found a command line tool which can do exactly that and support many formats of videos and images. The tool name is ffmpeg.exe. From the developer’s site:

FFmpeg is a complete solution to record, convert and stream audio and video. It includes libavcodec, the leading audio/video codec library. FFmpeg is developed under Linux, but it can compiled under most operating systems, including Windows.

The project is made of several components:

ffmpeg is a command line tool to convert one video file format to another. It also supports grabbing and encoding in real time from a TV card.

ffserver is an HTTP (RTSP is being developped) multimedia streaming server for live broadcasts. Time shifting of live broadcast is also supported.

ffplay is a simple media player based on SDL and on the FFmpeg libraries.

libavcodec is a library containing all the FFmpeg audio/video encoders and decoders. Most codecs were developped from scratch to ensure best performances and high code reusability.

libavformat is a library containing parsers and generators for all common audio/video formats.

More information can be found here.

38

Page 39: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

The code for creating preview images :

try

{

Process p = new Process();

p.StartInfo.UseShellExecute = false;

p.StartInfo.CreateNoWindow = true;

p.StartInfo.RedirectStandardOutput = true;

p.StartInfo.RedirectStandardError = true;

p.StartInfo.FileName = Path.Combine(Server.MapPath("ffmpeg/"),"ffmpeg.exe");

p.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;

string args = "-i \"video_input\" -ss 00:00:10 -vframes 1 -y -s 230x160 \"image_output%d.jpg\"";

args = args.Replace("video_input", srcVideo);

args = args.Replace("image_output", Path.Combine(Server.MapPath("videoCaps/"),dstImage));

p.StartInfo.Arguments = args;

p.Start();

// StreamReader myStreamReader = p.StandardError;

p.WaitForExit();

}

catch (Exception ex)

{

Response.Redirect("Error.aspx?msg=" + Server.UrlEncode("Error. Could not create image from video:"+ex.Message));

}

Some words on the code: Most of the code is just the standard method for executing programs in C#. We create an object of type process, and we supply it the arguments, which tell it what to execute. In this case we

39

Page 40: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

run the following command: ffmpeg.exe -i "video_input" -ss 00:00:10 -vframes 1 -y -s 230x160 "image_output%d.jpg";

-i – the input video to create a preview for

-ss – the frame number to capture-vframes – number of frames. We use just 1.-s – size of the output image.

The default output is in jpg format.

40

Page 41: EE-Video, Software System Lab, Electrical Engineering - Technion

EE-Video, Software System Lab,Electrical Engineering, Technion

[2008]

EE-Video ProjectEE-Video Project

The EndThe End

41