Vclass Presentation Component Kanchana Kanchanasut, DEC Director Dr. Akavute Sujare, DEC Consultant Mr. Chaiwarat Chaiyapotpanit, Project Manager Distance.

Vclass Presentation Component

Kanchana Kanchanasut, DEC Director

Dr. Akavute Sujare, DEC Consultant

Mr. Chaiwarat Chaiyapotpanit, Project Manager

Distance Education Center (DEC)

Asian Institute of Technology (AIT)

Introduction

Introduction

• Vclass Presentation Componet was developed by Distance Education Center (DEC) in Asian Institute of Technology.

• The objective of the component is to transform live lecture into electronic data to be able to access and play back later on demand.

Vclass Presentation Component Concept

Two Problems

• The objective of Vclass Presentation Component is to transform live lecture into electronic data to be able to access and play back later on demand.– How to represent live lecture scenario by

electronic data?– How to interpret that data and to re-produce the

lecture scenario for on demand environment?

Lecture Scenario

• The lecture scenario that Vclass Presentation Component tries to capture consists of three objects.– Instructor, Slides Presentation, and Pointer

• In the scenario, while instructor is speaking, the slide presentation shows the page related to the topic.

• Moreover, the pointer is spotted on the slide to show the exact location of information that the instructor is saying.

Representing the Objects

• Vclass Presentation Component represents the objects in lecture scenario by basic multimedia elements as follow.

•Instructor A Video or Audio

•Slides One picture for each slide.

•Pointer An arrow picture.

Representing Temporal Relation (1)

• How to represent temporal relations among Video, Slides and Pointer coordinates in this scenario?

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:00:00;no action!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:02:00;slide(1);point(x1,y1)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:02:30;slide(1);point(x2,y2)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:03:00;slide(2);point(x3,y3)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:03:40;slide(2);point(x4,y4)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:04:10;slide(3);point(x5,y5)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:05:10;slide(4);point(x6,y6)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:05:50;slide(4);point(x7,y7)!

Representing Temporal Relation (1)

Video

Slide 1 Slide 2 Slide 3 Slide 4

(x1,y1) (x2,y2) (x3,y3) (x4,y4) (x6,y6) (x7,y7)

(Video Time)0s

(x5, y5)

2m:00s 2m:30s 3m:00s 3m:40s 4m:10s 5m:10s 5m:50s 7m:00s

00:07:00;no action!

Representing Temporal Relation (2)

An example of events file (temporal specification).00:00:00;no action!

00:02:00;slide(1);point(x1,y1)!

00:02:30;slide(1);point(x2,y2)!

00:03:00;slide(2);point(x3,y3)!

00:03:40;slide(2);point(x4,y4)!

00:04:10;slide(3);point(x5,y5)!

00:05:10;slide(4);point(x6,y6)!

00:05:50;slide(4);point(x7,y7)!

00:07:00;no action!

Synchronization Engine

• Synchronization engine interprets events file then controls slides and pointer coordination as follow the specification inside.

• Synchronization engine also handles pause, resume, seek forward and backward operations in addition to normal playback.

Synchronization Algorithm

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Synchronization Algorithm

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Playback Position

Synchronization Algorithm

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Current BlockPlayback Position

Normal Playback

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Normal Playback

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Normal Playback

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Normal Playback

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Normal Playback

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Forward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Forward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Forward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Forward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Forward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Forward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Backward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Backward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Backward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Backward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Backward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Seek Backward

0sno action

2m:00sslide (1)

point (x1,y1)2m:30sslide(1)

point (x2,y2)

3m:00sslide(2)

point (x3,y3)

startpresent

stoppresent

3m:40sslide(2)

point (x4,y4)

4m:00sno action

Other Operations

• Pause/Resume– do nothing

• Stop– seek backward to the beginning and pause

Vclass Presentation Architecture

Runtime Objects

• There are four important objects exist at run time.– Video/Audio Player object

• Play the video or audio according to the assigned file location– Timer object

• Iteratively activate Sync Engine every specified time interval– Sync Engine object

• Load and interpret temporal specification, synchronize the slides and pointer with playback time position from Video Player

– Document object• Render slide and pointer on the screen as follow the order

from Sync Engine

Runtime Objects Collaboration

event data

timer

video

sync engine

document

1: activate

2: get playback position

4: render3: scan and move sliding window

Main Process

Initialize Media Player : - get media player's object ID

Fetch Control Script : - read EVENT file - store time attribute and action attribute into the memory

Initialize Timer

Objects Deployment

Left Frame Right Frame

Objects Deployment

Document object

Video object

Video control object

Timer object

Sync engineobject

Left Frame Right Frame

Authoring Process

Main Activities

• Transforming live lecture into electronic data is not an automatic job. The following are main activities to be done manually.– Video Recording the Lecture– Preparing Multimedia Resources– Making an Events File (temporal specification)– Deployment

Video Recording the Lecture

• Use one or two cameras– Focus 1st camera on the instructor – Focus 2nd camera on the slide presentation (optional)

• The video in the 1st camera will used for displaying and synchronizing with slides and pointer.

• The video in the 2nd camera will be used internally as a reference when making events file later after the lecture.

Preparing Multimedia Resources

• Transform analog video in the 1st camera to digital and save in a file (this requires a video capture card.)

• Take presentation file (generally PowerPoint file) from the instructor and save each page as a graphic file.

Making an Events File

• Use the Vclass Presentation Authoring Tool

• Open video file

• Play the video

• Open slide and mark pointer position by using the video in 2nd camera as a reference.

02:00:00;slide(1);point(100,150, right arrow)

Deployment

• There are several options to deploy the lecture– Make a CD and distribute to students– Put on Web Server and Video Server– Put the lecture on Vclass LMS

Deployment (1)

Web BrowserReal Player

Web PageEvent data

Slide ImagesArrow Images

Sync ScriptVideo, Audio files

Client

Put in CDs

Deployment (2)

Video server

Web Server

Web PageEvent data

Slide ImagesArrow Images

Sync Script

CoreNetwork

AccessNetwork

Client

Access Methods:Modem, DSL, Cable modemRTP

RTSP

Http

Web BrowserReal Player

Video, Audio files

Deployment (3)

Video server

Web Server

Web PageEvent data

Slide ImagesArrow Images

Sync Script

CoreNetwork

AccessNetwork

Client

Access Methods:Modem, DSL, Cable modemRTP

RTSP

Http

Web BrowserReal Player

Video, Audio files

Vclass Server

Integrating with Vclass Learning Management System

What’s Vclass LMS?

• Vclass LMS was developed for managing students and lectures that was produced by Vclass Presentation Component.

Vclass LMS Functions

• The following are major learning management functions that the system provide.– Course information & structure management– Student learning statistic & tracking– Student registration and course enrollment– User profiles and accounts management– Communications– Provide course structure browsing and accessing to pre-captured lectures.

Vclass Data Model (1)

Vclass

User

1..*

Instructor Admin Student

Course

0..* 1..*0..*

Vclass Data Model (2)

AssignmentsInfo

ResourcesInfo

AnnouncementsInfo

Profile

Instructor

Course

11

11

11

11

0..*

0..*

0..*

0..*

Teach

Student0..*

0..*

0..*

0..*

Lecture Presentation

0..*0..*

Enroll0..*

0..*0..*

0..*

AttendingStatistic

New Version of Vclass LMS

• More functions

• Open source

• Free distribution

• Beta version ~ end of March

Benefit from Integrating with Vclass LMS

• The presentation component can work alone offline.

• But, to provide more classroom like environment to the student, the Vclass system is needed.

View lectureStudent

Ask Question

Make Note

Apply for Student Enroll Course

View lecture

Maintain Self Profile

Receive Answer

Student

Browse Course Structure

Chat room Instant Message

Communicate with Community

Web board

Dependency of Components

Chat Server<<Application>>

Message Board<<Application>>

Vclass LMS

Vclass Presentation

<<Application>>

Browser

Database

Mail Server<<Application>>

Video Player

Vclass Instant Message

<<Application>>

Thank you.

For more information:URL: http://www.dec.ait.ac.th

E-mail: chaiwarat@ait.ac.th