ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ "ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΤΟΠΟΥ ΚΟΙΝΩΝΙΚΗΣ ΔΙΚΤΥΩΣΗΣ (PORTAL) ΚΟΙΝΟΠΟΙΗΣΗΣ ΒΙΝΤΕΟ" ΑΝΩΤΑΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΛΑΡΙΣΑΣ

Transcript

1 ΑΝΩΤΑΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΛΑΡΙΣΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΤΕΧΝΟΛΟΓΙΑΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ "ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΤΟΠΟΥ ΚΟΙΝΩΝΙΚΗΣ ΔΙΚΤΥΩΣΗΣ (PORTAL) ΚΟΙΝΟΠΟΙΗΣΗΣ ΒΙΝΤΕΟ" ΚΑΛΟΓΗΡΟΥ ΕΛΙΣΑΒΕΤ Τ Δρ ΒΕΝΤΖΑΣ ΔΗΜΗΤΡΙΟΣ ΛΑΡΙΣΑ

2 Εγκρίθηκε από την τριμελή εξεταστική επιτροπή Λάρισα, Ημερομηνία ΕΠΙΤΡΟΠΗ ΑΞΙΟΛΟΓΗΣΗΣ 1. Ονοματεπώνυμο, Υπογραφή 2. Ονοματεπώνυμο, Υπογραφή 3. Ονοματεπώνυμο, Υπογραφή 2

3 Περίληψη Σκοπός της παρούσας πτυχιακής εργασίας είναι η δημιουργία μιας διαδικτυακής εφαρμογής που θα διαχειρίζεται βίντεο. Υπάρχουν δυο κατηγορίες χρηστών: οι ανώνυμοι και οι πιστοποιημένοι. Οι ανώνυμοι χρήστες έχουν πρόσβαση μόνο σε γενικές πληροφορίες για την εφαρμογή και όχι στα βίντεο. Αντιθέτως, οι πιστοποιημένοι χρήστες έχουν τη δυνατότητα να αναζητήσουν, να παρακολουθήσουν, να μεταφορτώσουν, να κάνουν λήψη, να διαγράψουν και να επεξεργαστούν ένα βίντεο. Συνεπώς, για να έχει πρόσβαση ένας χρήστης στα βίντεο, θα πρέπει να κάνει εγγραφή στην σελίδα. Αυτό έχει υλοποιηθεί στην εφαρμογή με δύο τρόπους: είτε με εγγραφή ως νέος χρήστης, είτε μέσω κάποιου υπάρχοντος λογαριασμού κοινωνικού δικτύου. Στην παρούσα εφαρμογή χρησιμοποιήθηκε το Facebook και το Google+. Η αναζήτηση βίντεο μπορεί να είναι απλή, δηλαδή με τη συμπλήρωση ενός πεδίου από τη φόρμα αναζήτησης, ή συνδυαστική με τη συμπλήρωση περισσότερων πεδίων. Ακόμα, ο χρήστης μπορεί να κάνει αναζήτηση είτε με το ίδιο το βίντεο είτε με μέρος από το fingerprint αυτού, αν το γνωρίζει. Αξίζει να αναφερθεί πως στις λεπτομέρειες του βίντεο υπάρχει μια συλλογή από εικόνες, οι οποίες εξάγονται κατά τη διαδικασία της μεταφόρτωσης σε κάθε αλλαγή σκηνής. Η εφαρμογή επιτρέπει στους χρήστες να κατηγοριοποιήσουν τα βίντεο ως εξής: να δημιουργήσουν νέες κατηγορίες, να επεξεργαστούν τις υπάρχουσες ή να τις διαγράψουν. Τέλος, οι χρήστες μπορούν να κοινοποιήσουν ένα βίντεο στις σελίδες κοινωνικής δικτύωσης, αφού συνδεθούν με οποιοδήποτε τύπο λογαριασμού, στην προκειμένη περίπτωση μέσω Facebook, Google+ ή ως πιστοποιημένοι από την παρούσα εφαρμογή χρήστες. Ως παράδειγμα υλοποίησης της λειτουργίας αυτής χρησιμοποιήθηκε το Facebook. 3

4 Πίνακας περιεχομένων 1. Εισαγωγή Γενικά Περιεχόμενα εργασίας Υλοποίηση και Περιβάλλον Εργασίας MVC Template MVC Template - Αντιστοιχία με την Εφαρμογή Βίντεο και Fingerprint Η έννοια του ψηφιακού βίντεο To Fingerprint Εφαρμογή Διαχείρισης Βίντεο Αρχική σελίδα Register και Log in Εμφάνιση της Λίστας των Βίντεο Εισαγωγή βίντεο Αναζήτηση βίντεο Τύποι Βίντεο Βάση Δεδομένων, Δομή και Προγράμματα Βάση δεδομένων Πίνακες Διαχείρισης Βίντεο Οντότητες Διαχείρισης Βίντεο Πίνακες Διαχείρισης Χρηστών Χρήση του Bootstrap Διαχείριση Βίντεο και Εικόνων Ο κώδικας της εφαρμογής Βοηθητική κλάση VideoHelper Χρήση της κλάσης VideoHelper

5 5.2 Βοηθητικές κλάσεις FrameInfos, FrameFingerprintExtractor Αναπαραγωγή Βίντεο Εμφάνιση Αναπαραγωγής Βίντεο Βοηθητική κλάση VideoResult Code Metrics Σχετικές Εφαρμογές (Related Works) Εφαρμογή Παρακολούθησης Βίντεο (Video Content Tracking) Βίντεο Fingerprint και η Αρχή της Κρυπτογράφησης για DRM Αναγνωριστικό Περιεχομένου στο YouTube (YouTube s Content ID)

6 Πίνακας εικόνων Εικόνα 1 - MVC Εικόνα 2- Οργάνωση Φακέλων Εικόνα 3 - MVC template structure Εικόνα 4 - Διαδοχή των Frames Εικόνα 5 - Google Fingerprint Extractor Εικόνα 6 - Αρχική σελίδα ανώνυμου χρήστη Εικόνα 7 - Αρχική σελίδα καταχωρημένου χρήστη Εικόνα 8 - Register Page Εικόνα 9 - Log in page Εικόνα 10 - Video List page Εικόνα 11 - Αναπαραγωγή βίντεο Εικόνα 12 - Επεξεργασία βίντεο Εικόνα 13 - Λεπτομέρειες βίντεο Εικόνα 14 - Διαγραφή βίντεο Εικόνα 15 - Εισαγωγή Βίντεο Εικόνα 16 - Αναζήτηση Βίντεο Εικόνα 17 - Τύποι Βίντεο Εικόνα 18 - Πίνακας Clips Εικόνα 19 - Πινάκας Images Εικόνα 20 - Πίνακας ClipType Εικόνα 21 - UML database video schema Εικόνα 22 - ApplicationDbContext Εικόνα 23 - ApplicationDbContext, Reference Diagram Εικόνα 24 - AspNetUser Εικόνα 25 - AspNetRoles Εικόνα 26 - AspNetUserRoles

7 Εικόνα 27 - AspNetUserClaims Εικόνα 28 - AspNetUserLogins Εικόνα 29 - Bootstrap Off Εικόνα 30 - Total Lines of Code Εικόνα 31 - Video Content Tracking

8 1. Εισαγωγή 1.1 Γενικά Είναι γνωστό ότι το διαδίκτυο ξεκίνησε ως ένας τρόπος επικοινωνίας εκπαιδευτικών ιδρυμάτων και ανταλλαγής απόψεων σε ερευνητικό επίπεδο. Όμως με τον καιρό έκαναν την εμφάνιση τους εφαρμογές που το κατέστησαν ενδιαφέρον για το ευρύ κοινό. Μερικές από αυτές τις εφαρμογές είναι η πλοήγηση περιεχομένου (HTML), το ηλεκτρονικό ταχυδρομείο ( ), εφαρμογές συνομιλιών (chat), κτλ. Σύντομα έγινε κατανοητό ότι οι περισσότερες εκφάνσεις της ανθρώπινης ζωής είχαν θέση στο διαδίκτυο. Έτσι, έχοντας την εμπειρία της τηλεόρασης, δεν θα μπορούσε να απουσιάζει από το περιεχόμενο του διαδικτύου η προβολή βίντεο. Σε αυτό το σημείο αξίζει να επισημανθεί η μεγάλη συνδρομή του μεγαλύτερου παρόχου περιεχομένου βίντεο αυτής της εποχής, που είναι το YouTube. Το YouTube ήταν μια από τις εφαρμογές που κατέστησαν το διαδίκτυο δημοφιλή στο ευρύ κοινό. Παρέχει περιεχόμενο βίντεο διάφορων θεμάτων που ενδιαφέρουν εκατομμύρια θεατές. Η θεματολογία του, που ξεκινά από μουσικά και εκπαιδευτικά βίντεο μέχρι και βίντεο χρήσης υλικών και προώθησης εταιριών. Η μεγάλη όμως καινοτομία, που εισήγαγε το YouTube για πρώτη φορά στην ιστορία του διαδικτύου είναι η δυνατότητα σε όλους να ανεβάσουν βίντεο. Όμως η συγκεκριμένη δυνατότητα δημιούργησε πολλά προβλήματα τα οποία έπρεπε να λυθούν, όπως η αποθήκευση τους (αποδοτική συμπίεση) και η αναζήτηση τους. Για την αναζήτηση τους δόθηκε η λύση των ετικετών, κάθε βίντεο που ανεβαίνει στο διαδίκτυο μαρκάρεται με έναν αριθμό ετικετών (tags), τα οποία χαρακτηρίζουν το βίντεο και παίζουν τον ρόλο των λέξεων κλειδιών για την αναζήτηση τους. Και ενώ αυτός είναι ένας εύκολος και αποδοτικός τρόπος αναζήτησης, δεν καλύπτει όμως όλες τις περιπτώσεις. Ένα άλλο πρόβλημα που έπρεπε να αντιμετωπιστεί είναι αυτό της εγκυρότητας ενός βίντεο. Με τον όρο εγκυρότητα ορίζεται η προέλευση του βίντεο ή της ηλεκτρονικής υπογραφής του βίντεο όπου αυτό είναι απαραίτητο. Τα δύο τελευταία προβλήματα, της αναζήτησης και της ηλεκτρονικής υπογραφής, αποτελούν ερευνητικό πεδίο στο οποίο έχουν πραγματοποιηθεί πολλές μελέτες. Στην παρούσα πτυχιακή παρουσιάζονται, μέσω της υλοποίησης εφαρμογής παροχής περιεχομένου βίντεο, τα προβλήματα και οι πιθανές λύσεις τους. 8

9 1.2 Περιεχόμενα εργασίας Η παρούσα πτυχιακή αποτελείται από τα παρακάτω κεφάλαια: Κεφάλαιο 1: Περιγράφει το περιβάλλον εργασίας, καθώς και τις επιμέρους τεχνολογίες που χρησιμοποιήθηκαν. Επίσης, γίνεται επισκόπηση του πρότυπου MVC και συνδέεται μια περίπτωση εκτέλεσης της εφαρμογής με το πρότυπο MVC. Κεφάλαιο 2: Περιγράφει τις βασικές έννοιες για τα βίντεο, έτσι ώστε ο αναγνώστης να αποκτήσει την απαιτούμενη εξοικείωση με αυτές και να έχει μια πιο σφαιρική αντίληψη της εφαρμογής. Συγκεκριμένα, πέρα των βασικών εννοιών, περιγράφονται και οι έννοιες της κωδικοποίησης, του frame και του fingerprint. Κεφάλαιο 3: Περιγράφει τις δυνατότητες της εφαρμογής, παρουσιάζει την αρχική σελίδα και την διαδικασία του register και του log in, συνεχίζει με την εμφάνιση της λίστας και την εισαγωγή των βίντεο, και τέλος περιγράφει την διαδικασία της εύρεσης ενός βίντεο. Tο κεφάλαιο αυτό έχει εμπλουτιστεί με μια ποικιλία αντιπροσωπευτικών εικόνων όπου φαίνονται όλα τα στάδια της εφαρμογής. Κεφάλαιο 4: Περιγράφει την ανάλυση της βάσης δεδομένων, δηλαδή των πινάκων και των πεδίων της βάσης του συστήματος, ενώ δίνονται και τα σχεσιακά μοντέλα που υπάρχουν μεταξύ αυτών των πινάκων. Ακόμα, αναλύεται και η χρήση του bootstrap template για την καλύτερη διαμόρφωση των σελίδων html. Κεφάλαιο 5: Παρουσιάζονται και αναλύονται τα πιο ενδιαφέροντα κομμάτια του κώδικα της εφαρμογής. Κεφάλαιο 6: Σύντομη παρουσίαση σχετικών εφαρμογών με την παρούσα πτυχιακή. 9

10 1.3 Υλοποίηση και Περιβάλλον Εργασίας Όπως αναφέρθηκε στην παράγραφο 1.1, η παρούσα πτυχιακή αφορά την αποθήκευση και διανομή περιεχομένου βίντεο και τα προβλήματα που πρέπει να αντιμετωπιστούν. Έτσι ο καλύτερος τρόπος για να παρουσιαστούν τα προβλήματα και οι προτεινόμενες λύσεις τους, είναι η ανάπτυξη μια εφαρμογής αποθήκευσης και διαμοιρασμού περιεχομένου βίντεο. Η εφαρμογή δίνει την δυνατότητα σε οποιονδήποτε χρήστη να δημιουργήσει έναν λογαριασμό και να ανεβάσει περιεχόμενο βίντεο. Έτσι δημιουργείται μια βάση δεδομένων βίντεο στην οποία θα εφαρμοστεί μια από τις προτεινόμενες λύσεις αναζήτησης, αυτής του fingerprint. Το fingerprint, όπως αναφέρεται και παρακάτω, εμφανίζεται σε πολλά ερευνητικά έγγραφά αλλά και σε κατοχυρωμένες πατέντες. Η συγκεκριμένη τεχνική εφαρμόζεται επίσης και στο περιεχόμενου ήχου αλλά και φωτογραφιών και αφορά την ηλεκτρονική τους υπογραφή - σφραγίδα. Στην εφαρμογή, χρησιμοποιήθηκε η αναζήτηση με βάση το όνομα του βίντεο, αλλά προστέθηκε και η δυνατότητα αναζήτησης με βάση το ίδιο το βίντεο (fingerprint). Το fingerprint είναι ένα κομμάτι πληροφορίας που παίζει τον ρόλο του δακτυλικού αποτυπώματος. Έτσι όπως το δακτυλικό αποτύπωμα ανήκει σε έναν και μόνο άνθρωπο, το ίδιο συμβαίνει και με το fingerprint ενός βίντεο. Επιπλέον όμως το μέγεθος του fingerprint είναι μικρό σε σχέση με το μέγεθος των δεδομένων ενός βίντεο. Έτσι ο χρήστης μπορεί να αναζητήσει ένα βίντεο δίνοντας σαν είσοδο το ίδιο το βίντεο, για να δει αν υπάρχει στη βάση δεδομένων. Επίσης αν το βίντεο προς αναζήτηση υπάρχει στην βάση δεδομένων ως κομμάτι κάποιου μεγαλύτερου βίντεο, ο αλγόριθμός αναζήτησης πάλι μπορεί να το εντοπίσει. Τέλος, στην παρούσα εργασία, ο στόχος ήταν η απόδοση όλων των ενεργειών που θα περίμενε ένας χρήστης να έχει μια διαδικτυακή εφαρμογή που διαχειρίζεται βίντεο. Έτσι έχουν υλοποιηθεί οι παρακάτω ενέργειες: Διαχείριση Χρηστών (Membership): Υπάρχει η δυνατότητα κάποιος ανώνυμος χρήστης να γίνει μέλος των υπηρεσιών που προσφέρει αυτή η εφαρμογή. Επιπλέον, χρησιμοποιώντας την τεχνολογία OAuth 2.0, κάποιος χρήστης μπορεί να έχει πρόσβαση στης υπηρεσίες της εφαρμογής χρησιμοποιώντας τον λογαριασμό του στο Facebook ή και το Google+ (Social Log in). Ανέβασμα βίντεο (Upload): Χαρακτηριστικό της ενέργειας αυτής είναι ότι ο χρήστης μπορεί να ανεβάσει και πολύ μεγάλα βίντεο χωρίς πρόβλημα, πέραν του χρόνου ανεβάσματος που είναι ανάλογος του μεγέθους του βίντεο. 10

11 Κατέβασμα βίντεο (Download): Ο χρήστης μπορεί να κατεβάσει τοπικά στον υπολογιστή του το αρχικό βίντεο. Αναπαραγωγή βίντεο (Play): O Χρήστης μπορεί να αναπαράγει το βίντεο, χωρίς να χρειαστεί να το κατεβάσει στον υπολογιστή του, με τον ενσωματωμένο player της εφαρμογής. Αναζήτηση (Search): Όπως έχει αναφερθεί προηγουμένως, ο χρήστης μπορεί να αναζητήσει ένα βίντεο είτε με το όνομα του, είτε με το ίδιο το βίντεο ή με κομμάτι του ίδιου βίντεο. Κοινοποίηση βίντεο (Share): Ο χρήστης μπορεί αν θέλει να κοινοποιήσει ένα βίντεο στο προσωπικό του τοίχο ή στον τοίχο κάποιου φίλου του στο Facebook. Για την υλοποίηση της εφαρμογής χρησιμοποιήθηκαν: Το περιβάλλον εργασίας Visual Studio 2012 Express (IDE: Intergraded Development Environment). Το.Net framework, έκδοση 4.5. Η γλώσσα προγραμματισμού C#, που είναι μέρος του.net framework. Η βάση δεδομένων Microsoft SQL 2012 Express. Η τεχνολογία Microsoft Entity Framework 6 της Microsoft για ORM (Object Relational Mapping). To JQuery framework, έκδοση 2.1.3, για client side actions. Είναι βασισμένο σε javascript και θεωρείται στις μέρες μας ως το πιο σταθερό framework για ενέργειες που πρέπει να γίνουν από την πλευρά του browser. To Bootstrap, έκδοση 3.3.1, το γνωστό framework για την διαμόρφωση της εμφάνισης των σελίδων. Όλα τα παραπάνω συνδυάστηκαν και χρησιμοποιήθηκαν σε ένα ASP.NET MVC 5 project. Η εφαρμογή αποτελείται από συνολικά 22 html σελίδες που είναι επιφορτισμένες για την εμφάνιση των δυνατοτήτων της εφαρμογής. Για την ακρίβεια οι σελίδες είναι cshtml, δηλαδή με το πρόθεμα cs (C Sharp) πριν το html, διότι σε αυτές τις σελίδες εκτός από καθαρό html περιεχόμενο μπορούμε να έχουμε και κώδικα C#. Για να μπορεί ο server να ξεχωρίσει των κώδικα C# από το html περιεχόμενο, σε αυτά τα αρχεία ο κώδικας C# ξεκινάει με το Η συγκεκριμένη σύνταξη ονομάζεται Razor syntax. 11

12 1.3.1 MVC Template Η παρούσα εργασία είναι ένα ASP.NET MVC 5 project [1], όπου το MVC 5 είναι ένα template που προσφέρει το Visual Studio, όσον αφορά την δημιουργία διαδικτυακών εφαρμογών. Το συγκεκριμένο template προσφέρει τόσο την οργάνωση των αρχείων και των φακέλων που πρέπει να αποτελείται το project, όσο και την λογική με την οποία αυτά πρέπει να αλληλεπιδρούν με τον χρήστη. Στο MVC template, όπως αυτό υλοποιήθηκε από τη Microsoft και εμφανίζεται στην εικόνα 1, η οργάνωση και τα ονόματα των φακέλων και των αρχείων έχουν ιδιαίτερη σημασία. Σε αυτό το σημείο πρέπει να αναφερθεί ότι, στην πραγματικότητα το μοντέλο MVC (Model View Controller) της Microsoft είναι βασισμένο στο MVVC (Model ViewModel View Controller). Εικόνα 1 - MVC Model: Είναι οι κλάσεις που αναπαριστούν τις οντότητες που διαχειρίζεται η εφαρμογή. Για παράδειγμα, στην παρούσα εφαρμογή υπάρχει η κλάση Clip που έχει όλες τις ιδιότητες και ενέργειες που θέλουμε να έχει ένα Video Clip, καθώς και το πώς αυτή θα αποθηκεύεται ή και θα εξάγεται από την βάση δεδομένων. ViewModel: Είναι οι κλάσεις που μοντελοποιούν το πώς θα αλληλεπιδρούν με το View. Για παράδειγμα, στην κλάση Clip του μοντέλου υπάρχει ένα πεδίο Fingerprint που κρατάει την πληροφορία που θα βοηθήσει στην αναζήτηση του βίντεο, αλλά στον χρήστη δεν πρέπει να εμφανίζεται αυτή η πληροφορία. Έτσι, 12

13 στο ViewModel δεν εμφανίζεται ως πεδίο. Το ViewModel βασίζεται στις κλάσεις του Model και είναι τις περισσότερες φορές υποσύνολο όσον αφορά τα πεδία της αντίστοιχης κλάσης του Model. View: Είναι τα αρχεία που διαμορφώνουν το τι θα εμφανίζεται στον χρήστη βάσει του ViewModel. Συνήθως, όπως και σε αυτή την εφαρμογή, είναι οι html (cshtml) σελίδες. Controller: Είναι οι κλάσεις που περιέχουν τις μεθόδους που εκτελούνται έπειτα από ενέργειες του χρήστη ή της εφαρμογής. Ο Controller αποτελείται από καθαρό κώδικα (code behind), C# στην περίπτωση αυτή, που εκτελεί την λογική που πρέπει να αποδοθεί στις ενέργειες του χρήστη. Το μοντέλο ανάπτυξης MVVC μπορεί να χρησιμοποιηθεί σε πληθώρα εφαρμογών (διαδικτυακές εφαρμογές, εφαρμογές desktop, εφαρμογές για κινητές συσκευές κτλ) και προσφέρει πολλά πλεονεκτήματα: Διαχωρισμός της εμφάνισης από τις οντότητες. Έτσι, αν χρειαστεί κάποια στιγμή αλλαγή της εμφάνισης, δεν επηρεάζεται κάποιο άλλο μέρος της εφαρμογής. Επιπλέον μπορεί να αλλάξει η οντότητα ή/και ο τρόπος που αυτή αποθηκεύεται στην βάση δεδομένων, χωρίς να υπάρχει ανησυχία για την εμφάνιση της στον χρήστη. Διαχωρισμός της λογικής (ενεργειών) από την εμφάνιση ή/και των οντοτήτων. Και πάλι είναι δυνατόν, αν σε μια μεταγενέστερη έκδοση της εφαρμογής αποφασιστεί ότι θα πρέπει να γίνει κάτι επιπλέον, για παράδειγμα υπολογισμός στατιστικών στοιχείων και αποθήκευση τους στη βάση, να μπορεί να μεταβληθεί ο κώδικας, ώστε να εκτελέσει την επιπλέον ενέργεια χωρίς να χρειαστεί να μεταβληθεί κάποιο άλλο κομμάτι της εφαρμογής. Έτσι, τα πλεονεκτήματα του MVVC είναι: 1. Συντηρισιμότητα (Maintainability). 2. Επεκτασιμότητα (Scalability). Για παράδειγμα, οι κλάσεις του Model μπορούν να χρησιμοποιηθούν και σε άλλη εφαρμογή. 3. Προγραμματισμός βάσει δοκιμών (Test driven programming): Τα ξεχωριστά μέρη της εφαρμογής μπορούν να αναπτυχτούν και να δοκιμαστούν ξεχωριστά. 13

14 1.3.2 MVC Template - Αντιστοιχία με την Εφαρμογή Στις εικόνες 2 και 3 παρουσιάζεται η οργάνωση των φακέλων και των αρχείων. Στη συνέχεια θα δοθεί ένα παράδειγμα χρήσης του μοντέλου MVC, για να εξεταστεί η σημασία που έχουν στο πρότυπο MVC. Όπως φαίνεται στην εικόνα 2, για κάθε στοιχείο του μοντέλου MVC υπάρχει και ο αντίστοιχος φάκελος (το Model και το ViewModel βρίσκονται στον φάκελο Models). Εικόνα 2- Οργάνωση Φακέλων Στην εικόνα 3 παρουσιάζονται τα περιεχόμενα των φακέλων. Με μπλε χρώμα έχουν επισημανθεί τα αρχεία και οι μέθοδοι που θα χρησιμοποιηθούν στο παράδειγμα. Τα ονόματα των φακέλων και των αρχείων έχουν ιδιαίτερη σημασία στην υλοποίηση του MVC από την Microsoft, για τον λόγο αυτό θα μαρκάρονται σύμφωνα με την αλληλεπίδραση που έχουν. Συγκεκριμένα: 1. Ο φάκελος Controller περιέχει την κλάση ClipsController Η κλάση ClipsController περιέχει δύο υπερφορτωμένες μεθόδους για την ενέργεια Create. 2. Ο φάκελος Model περιέχει την κλάση Clip. 3. Ο φάκελος View περιέχει τον φάκελο Clips Στον οποίο βρίσκεται το αρχείο Create.cshtml. 14

15 Πριν το παράδειγμα, θα πρέπει να εξεταστεί ακόμη ένα αρχείο που βρίσκεται στον φάκελο App_Start και λέγεται RouteConfig.cs. Το συγκεκριμένο αρχείο περιέχει την ομώνυμη κλάση με την στατική μέθοδο RegisterRoutes. Εικόνα 3 - MVC template structure using System; using System.Collections.Generic; using System.Linq; 15

16 using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace VideoSearch public class RouteConfig public static void RegisterRoutes(RouteCollection routes) routes.ignoreroute("resource.axd/*pathinfo"); routes.maproute( name: "Default", url: "controller/action/id", defaults: new controller = "Home", action = "Index", id = UrlParameter.Optional ); Στο προηγούμενο κομμάτι κώδικα γίνεται register η μορφή που θα έχουν τα url της εφαρμογής και το πώς αυτά θα καλούν τα αντίστοιχα μέρη της εφαρμογής. Έτσι, τα url της εφαρμογής έχουν το εξής format: controller/action/id όπου: controller: το όνομα του Controller action: το όνομα της μεθόδου του Controller id: κάποιο προαιρετικό id. Το όνομα του Controller ορίζεται να είναι το όνομα του αρχείου χωρίς την λέξη Controller. Για παράδειγμα, το όνομα του αρχείου είναι ClipsController, αλλά στο url θα υπάρχει μόνο η πρώτη λέξη, δηλαδή Clips. Επίσης ορίζεται ποιος είναι ο προεπιλεγμένος Controller και ποια η προεπιλεγμένη ενέργεια αυτού κατά την εκκίνηση της εφαρμογής, δηλαδή όταν στο url υπάρχει μόνο το θα εκτελείται η μέθοδος Index του HomeController. Τώρα είναι η κατάλληλη στιγμή να αναφερθούν οι δύο υπερφορτωμένες μέθοδοι με το όνομα Create της κλάσης ClipsController. Οι μέθοδοι των Controllers αντιστοιχούν στα http verbs GET και POST, με κάθε μέθοδο να επιστρέφει ένα View στο τέλος των ενεργειών της. Σε ποιο verb αντιστοιχεί κάθε μέθοδος ορίζεται από τον προγραμματιστή με τα properties, γνωστά και ως annotations, που δίνουν επιπλέον ιδιότητες στις μεθόδους. Έστω ότι ο χρήστης επέλεξε να κάνει εισαγωγή ενός βίντεο επιλέγοντας το κατάλληλο link. Τότε στην γραμμή διευθύνσεων θα εμφανιστεί το url 16

17 Αυτό σημαίνει ότι θα πρέπει, σε απόκριση του χρήστη, να εκτελεστεί ο κώδικας του ClipsController και συγκεκριμένα η μέθοδος Create. Σε αυτή την περίπτωση, επειδή δεν αποστέλλεται κάτι στο server αλλά γίνεται αίτηση περιεχομένου από αυτόν, θα εκτελεστεί η Create που αντιστοιχεί στο verb GET. Με την εκτέλεση της μεθόδου γίνεται η όποια εργασία ορίστηκε να γίνεται και στο τέλος η μέθοδος επιστρέφει την κλάση του.net View. Λόγω της χρήσης του Clips Controller, η κλάση View θα ψάξει στον φάκελο View και θα αναζητήσει τον υποφάκελο Clips. Εκεί θα πρέπει να βρει ένα cshtml αρχείο με όνομα ίδιο με αυτό της μεθόδου και θα το εμφανίσει στον χρήστη. Στην συνέχεια ο χρήστης μπορεί να συμπληρώσει τα πεδία του view και να εκτελέσει την 'Υποβολή', δηλαδή να στείλει τα δεδομένα στο server. Έτσι θα εκτελεστεί η μέθοδος Create του ClipsController που έχει οριστεί για το verb POST. Θα εκτελέσει τις ενέργειες, ενδεχομένως να αποθηκεύσει τα δεδομένα στην βάση και με την σειρά της θα επιστρέψει την κλάση View, που και πάλι θα την αναζητήσει στον φάκελο View και στον υποφάκελο Clips με το όνομα Create.cshtml. 17

18 2 Βίντεο και Fingerprint Στο παρόν κεφάλαιο θα δώσουμε εισαγωγικές έννοιες για το βίντεο έτσι ώστε στην συνέχεια να μπορέσουμε να περιγράψουμε την έννοια του fingerprint. 2.1 Η έννοια του ψηφιακού βίντεο Η έννοια του βίντεο είναι διαισθητικά κατανοητή από το ευρύ κοινό. Όμως η ανάλυση του μας δίνει δύο συνιστώσες. Από την μια υπάρχει το περιεχόμενο του βίντεο, που είναι ουσιαστικά η πληροφορία και από την άλλη υπάρχει η εφαρμογή που εκτελεί - αναπαράγει την πληροφορία. Όσο αφορά τις εφαρμογές αναπαραγωγής, έγινε μεγάλη προσπάθεια να μπορούν να αναπαράγουν όσο το δυνατόν περισσότερους τύπου βίντεο (φόρμα πληροφορίας) και δεν θα τις αναλύσουμε στο παρόν έγγραφο. Όσο αφορά την πληροφορία (το βίντεο), αναλύεται περαιτέρω σε μια σειρά εικόνων, τα λεγόμενα frames (πλαίσια). Όμως οι διαδοχικές εικόνες που περιλαμβάνει το βίντεο δεν είναι σε όλα τους τα σημεία διαφορετικές. Παράδειγμα, όταν ένα βίντεο παρουσιάζει σε μαύρο φόντο να κινείτε ένα αντικείμενο, τότε από εικόνα σε εικόνα το μαύρο φόντο παραμένει το ίδιο. Επίσης ανάλογα το αντικείμενο, μπορεί μέρη αυτού να είναι ίδια από εικόνα σε εικόνα. Για να μπορεί ένα βίντεο να καταλαμβάνει όσο το δυνατόν λιγότερο χώρο αλλά παράλληλα να μην έχουμε απώλεια ποιότητας, κατά την διαδοχή των frames, το τρέχον frame δεν περιέχει όλη την πληροφορία για την τρέχουσα εικόνα, αλλά μόνο τα bits της εικόνας που είναι διαφορετικά από την προηγούμενη. Οι διαφορετικοί τρόποι με τους οποίους κωδικοποιούνται τα διαδοχικά frames καθώς και η συμπίεση τους, είναι οι λεγόμενοι κωδικοποιητές βίντεο (video codec). 2.2 To Fingerprint Συνεχίζοντας από την προηγούμενη παράγραφο που αφορά την διαδοχή των frames και όταν σε αυτό παρουσιάζεται μεγάλος όγκος πληροφορίας, τότε μπορούμε να πούμε ότι έχει αλλαγή σκηνής. Ειδικότερα, υπάρχουν τρία είδη frames που χρησιμοποιούνται κατά την συμπίεση του βίντεο, τα οποία είναι τα I-frames (Ιntra-coded frames), P-frames (forward- Predicted frames) και B-frames (Bi-directionally frames), όπως φαίνεται στην εικόνα 4. 18

19 Εικόνα 4 - Διαδοχή των Frames Το I-frame είναι στην ουσία μια πλήρης εικόνα, σαν μια κλασσική στατική εικόνα. Τα B-frames και τα P-frames κρατάνε μέρος της πληροφορίας της εικόνας, καταλαμβάνοντας έτσι λιγότερο χώρο από τα I-frames και ο ρυθμός συμπίεσης βελτιώνεται. Ένα P-frame κρατάει μόνο τις αλλαγές από την προηγούμενη εικόνα. Για παράδειγμα, σε μια σκηνή στην οποία κινείται ένα αυτοκίνητο σε σχέση με ένα στατικό σκηνικό, ο κωδικοποιητής δεν χρειάζεται να κωδικοποιήσει το σκηνικό παρά μόνο την κίνηση του αυτοκινήτου. Τα P- frames είναι επίσης γνωστά και ως delta-frames. Ένα B-frame καταλαμβάνει ακόμη λιγότερο χώρο, χρησιμοποιώντας τις διαφορές του τρέχοντος frame, του προηγούμενου αλλά και του επόμενου, για να καθοριστεί το περιεχόμενο του [2]. Έχουν πραγματοποιηθεί πολλές μελέτες για το συγκεκριμένο θέμα, καθώς επίσης πολλές εταιρίες, όπως η Google, έχουν κατοχυρώσει αλγόριθμους για την παραγωγή του fingerprint ενός Βίντεο [3] [4]. Ο συγκεκριμένος αλγόριθμος χρησιμοποιείται στο YouTube για τον έλεγχο διπλότυπων Βίντεο. Οι μελέτες αυτές έχουν ένα κοινό στοιχείο: σχεδόν όλες βασίζονται σε στατιστικά στοιχεία των διαδοχικών frames του Βίντεο. Για παράδειγμα, μια μέθοδος για την παραγωγή fingerprint είναι ο υπολογισμός της φωτεινότητας των διαδοχικών frames για την διαμόρφωση του fingerprint, ενώ μια άλλη μέθοδος είναι ο υπολογισμός της κίνησης σε συγκεκριμένα pixels των διαδοχικών frames. Στην παρούσα υλοποίηση, το fingerprint δημιουργείται υπολογίζοντας το ποσοστό μεταβολής του μεγέθους των διαδοχικών frames. Αν λοιπόν το τρέχον frame k έχει μέγεθος και το προηγούμενο frame k-1 είναι,τότε αν το έχει μικρότερο μέγεθος, το ποσοστό μεταβολής θα είναι: Ποσοστό μεταβολής μεγέθους = Στην συνέχεια αυτός ο αριθμός μετατρέπεται σε αλφαριθμητικό και προσκολλάται στο fingerprint, το οποίο διαμορφώνεται ώστε να είναι διαδοχικά τα ποσοστά μεταβολής. 'Έτσι, αν δημιουργηθεί ένα fingerprint από ένα απόσπασμα ενός βίντεο, τότε αυτό το fingerprint θα υπάρχει ολόκληρο στο fingerprint του μεγαλύτερου βίντεο από το οποίο προήρθε το απόσπασμα. Έτσι αν δοθεί ένα βίντεο για αναζήτηση, παράγεται το fingerprint και 19

20 αναζητείται στην βάση δεδομένων. Εικόνα 5 - Google Fingerprint Extractor 20

21 3 Εφαρμογή Διαχείρισης Βίντεο 3.1 Αρχική σελίδα Ξεκινώντας με την αρχική σελίδα αλλά και σε όλες τις σελίδες της εφαρμογής, έγινε προσπάθεια ώστε το οπτικό αποτέλεσμα να είναι λιτό και κατανοητό και να προβάλει με εύκολο τρόπο τις δυνατότητες - επιλογές που μπορεί να έχει ο χρήστης μέσω της εφαρμογής μας. Επίσης, με την χρήση του bootstrap css, η εμφάνιση (layout) όλων των σελίδων μπορεί να προσαρμοστεί σε διαφορετικά μεγέθη οθονών ακόμα και για κινητές συσκευές. O ανώνυμος χρήστης σε μία πρώτη επαφή βλέπει στην αρχική σελίδα κάποια στατιστικά στοιχεία, όπως φαίνεται στην εικόνα 6. Τα στατιστικά αφορούν τον αριθμό των χρηστών που έχουν κάνει register, τoν αριθμό των βίντεο που περιέχει η εφαρμογή, τον συνολικό χρόνο των βίντεο της εφαρμογής και επίσης ένα γράφημα με τους τύπους αρχείων που περιέχονται στην εφαρμογή. Εικόνα 6 - Αρχική σελίδα ανώνυμου χρήστη Όμως οι επιλογές στο menu της εφαρμογής δεν δίνουν στο χρήστη τη δυνατότητα να δει το περιεχόμενο ή/και να ανεβάσει κάποιο βίντεο στην εφαρμογή. Αντίθετα, όταν ο χρήστης κάνει εγγραφή (register) στην σελίδα, τότε ως αρχική σελίδα θα του εμφανιστεί η εικόνα 7. Σε αυτή την σελίδα το μόνο που αλλάζει είναι οι επιλογές του menu. Όμως, τώρα ο χρήστης μπορεί να δει και να αξιοποιήσει όλες τις δυνατότητες αυτής της εφαρμογής. Επίσης, πατώντας στο όνομα του, ο χρήστης έχει την δυνατότητα να κάνει αλλαγή του password του. 21

22 Εικόνα 7 - Αρχική σελίδα καταχωρημένου χρήστη 3.2 Register και Log in Ο ανώνυμος χρήστης έχει την δυνατότητα να πατήσει την επιλογή Register και έτσι θα του παρουσιαστεί η εικόνα 8. Εικόνα 8 - Register Page Όπως φαίνεται, ο χρήστης μπορεί να συμπληρώσει τα πεδία της φόρμας για να εγγραφεί στις υπηρεσίες που προσφέρει η εφαρμογή. Στην συνέχεια μπορεί να επιλέξει την ενέργεια Log in και να χρησιμοποιήσει τον λογαριασμό που μόλις δημιούργησε, όπως απεικονίζει η Εικόνα 9. Αν επιλέξει να μην δημιουργήσει λογαριασμό, μπορεί να χρησιμοποιήσει κάποιον 22

23 υπάρχοντα λογαριασμό του στο Google+ ή στο Facebook. Εικόνα 9 - Log in page 3.3 Εμφάνιση της Λίστας των Βίντεο Επιλέγοντας τον σύνδεσμο Videos, παρουσιάζεται στον χρήστη η λίστα με όλα τα διαθέσιμα βίντεο που υπάρχουν στην βάση δεδομένων, όπως φαίνεται στην εικόνα 10. Εικόνα 10 - Video List page 23

24 Σε αυτή την σελίδα, ο χρήστης μπορεί να αναζητήσει ένα βίντεο με το όνομα του ή μέρος αυτού, καθώς επίσης μπορεί να ταξινομήσει την λίστα σύμφωνα με το όνομα ή την ημερομηνία εισαγωγής. Σε κάθε γραμμή - εγγραφή της λίστας υπάρχουν στα δεξιά της πέντε εικονίδια που αντιστοιχούν στις εξής ενέργειες (Actions): λήψη (download), αναπαραγωγή (play), επεξεργασία (edit), λεπτομέρειες (details) και διαγραφή (delete). Το layout αυτών των ενεργειών παρουσιάζεται παρακάτω στις εικόνες 11 έως 15. Βέβαια, η ενέργεια της λήψης ενός αρχείου δεν έχει layout, απλά ανοίγει ένα παράθυρο διαλόγου για την αποθήκευση του αρχείου με την αρχική του μορφή. Εικόνα 11 - Αναπαραγωγή βίντεο Στην επεξεργασία βίντεο που παρουσιάζεται στην εικόνα 12, δεν είναι επεξεργάσιμα όλα τα πεδία του βίντεο, για να αποτραπεί η αλλοίωση των χαρακτηριστικών του όπως αυτά καταχωρήθηκαν κατά την διαδικασία της εισαγωγής (upload). Εικόνα 12 - Επεξεργασία βίντεο 24

25 Στην εικόνα 13, παρουσιάζονται όλες οι πληροφορίες ενός βίντεο και δίνεται η δυνατότητα στον χρήστη να κοινοποιήσει το βίντεο στο Facebook. Σε αυτό το σημείο, πρέπει να διευκρινιστεί πως το SDK του Facebook [7] δεν επιτρέπει να γίνονται post βίντεο που προέρχονται από https links, ενώ μεταχειρίζεται τα βίντεο του YouTube ως εξαίρεση και επιτρέπει το post από τις δικές του https σελίδες. Στην παρούσα εφαρμογή χρησιμοποιήθηκε https λόγω του membership. Έτσι αυτό που πραγματικά γίνεται post στο Facebook είναι ένα βίντεο από το YouTube ως παράδειγμα χρήσης της υπηρεσίας του API. Εικόνα 13 - Λεπτομέρειες βίντεο Εικόνα 14 - Διαγραφή βίντεο 25

26 3.4 Εισαγωγή βίντεο Η αποστολή βίντεο προς το σύστημα είναι εξαιρετικά απλή για τον χρήστη. Αρκεί να επιλέξει τον σύνδεσμο μεταφόρτωσης (Insert Video) από το menu για να ξεκινήσει η διαδικασία και έτσι θα εμφανιστεί η εικόνα 15. Σε αυτή την εικόνα παρουσιάζονται τα πεδία τα οποία μπορεί να συμπληρώσει, από τα οποία το μόνο υποχρεωτικό είναι η επιλογή 'Upload File', με την οποία πρέπει να επιλέξει ένα αρχείο βίντεο. Αν ο χρήστης δεν δώσει ένα δικό του όνομα, τότε στην βάση δεδομένων θα αποθηκευτεί το υπάρχον όνομα του αρχείου. Εικόνα 15 - Εισαγωγή Βίντεο Πατώντας το κουμπί Create, τα δεδομένα που έδωσε ο χρήστης αποθηκεύονται στη βάση ενώ το βίντεο υπόκειται κάποια διεργασία. Αρχικά, από αυτό εξάγεται το fingerprint του βίντεο. Επιπλέον, από το οπτικοακουστικό υλικό που ανεβάζει ο χρήστης εξάγονται κάποιες φωτογραφίες. Αυτές οι φωτογραφίες αποτελούν ουσιαστικά τα frames (καρέ) του βίντεο όπου υπάρχει αλλαγή σκηνής και εξάγονται σύμφωνα και με τα δεδομένα του fingerprint. Οι φωτογραφίες ακολουθούν το βίντεο σε όλες του τις σελίδες, ο χρήστης μπορεί να δει τις φωτογραφίες στις σελίδες Detail, Edit και Delete. Επίσης στην λίστα των βίντεο εμφανίζεται μια από αυτές, ως thumbnail. 26

27 3.5 Αναζήτηση βίντεο Η φόρμα αναζήτησης βίντεο (εικόνα 16), είναι σχεδόν παρόμοια με αυτή της εισαγωγής στην οποία όμως κανένα πεδίο δεν είναι υποχρεωτικό, αλλά πρέπει να συμπληρωθεί τουλάχιστον ένα. Στην περίπτωση που ο χρήστης εισάγει περισσότερα του ενός πεδίου, τότε η αναζήτηση είναι συνδυαστική, δηλαδή στην αναζήτηση λαμβάνονται υπόψη όλα τα πεδία που είναι συμπληρωμένα. Αν τώρα ο χρήστης πατήσει το Search και είχε συμπεριλάβει και ένα αρχείο βίντεο στην αναζήτηση, τότε πρώτα εξάγεται το fingerprint από το βίντεο και στην συνέχεια αναζητείται το fingerprint στην βάση δεδομένων. Εικόνα 16 - Αναζήτηση Βίντεο 3.6 Τύποι Βίντεο Όπως αναφέρθηκε, κατά την διαδικασία της εισαγωγής ο χρήστης έχει την δυνατότητα να κατηγοριοποιήσει το βίντεο. Οι κατηγορίες αυτές δεν είναι στατικές αλλά μπορούν να δημιουργηθούν νέες, να μετατραπούν ή να διαγραφούν. Αυτές οι ενέργειες είναι εφικτές μέσω της επιλογής Video Types του Menu, το οποίο, αν επιλεγεί, παρουσιάζει μια λίστα με όλους τους διαθέσιμους τύπους βίντεο. 27

28 Εικόνα 17 - Τύποι Βίντεο Όπως παρουσιάζεται στην εικόνα 17, κάθε τύπος έχει στα δεξιά του 3 εικονίδια τα οποία δίνουν τη δυνατότητα στον χρήστη να μεταβάλλει κάποιο τύπο βίντεο (Edit), να δει τις λεπτομέρειες (Detail) και τέλος να διαγράψει κάποιο βίντεο (Delete). Μπορεί να θεωρηθεί πως χρειάστηκε πολλή δουλειά για ένα όνομα που απλώς χαρακτηρίζει σε ποιο τύπο ανήκει κάποιο βίντεο, όμως μελλοντικά, ο τύπος του βίντεο θα μπορούσε να γίνει αρκετά περίπλοκος. Για παράδειγμα, θα μπορούσε να οριστεί σε μια επόμενη έκδοση της εφαρμογής, ότι η κλάση που αναπαριστά τον τύπο του βίντεο θα χαρακτηρίζει και το μέγεθος του ή και την διάρκεια του. Έτσι, η οντότητα Video Type θα είχε επιπλέον πεδία για να υποστηρίξει την νέα λειτουργικότητα, θα γινόταν αρκετά περίπλοκη και θα δικαιολογούσε την διαχείριση της με αυτό τον τρόπο. 28

29 4. Βάση Δεδομένων, Δομή και Προγράμματα 4.1 Βάση δεδομένων Νομοτελειακά, κάθε εφαρμογή η οποία έχει δυναμικό περιεχόμενο, δηλαδή περιεχόμενο που μεταβάλλεται με τον καιρό, όπως είναι και η παρούσα εφαρμογή, μιας και οι χρήστες της μπορούν ανά πάσα στιγμή να ανεβάσουν νέα βίντεο και να μεταβάλλουν το περιεχόμενο της, πρέπει να έχει μια βάση δεδομένων. Για τη δημιουργία της βάσης δεδομένων της εφαρμογής μας, χρησιμοποιήθηκε ο Microsoft SQL Server Πίνακες Διαχείρισης Βίντεο Η βάση είναι οργανωμένη σε οκτώ πίνακες, τρεις από τους οποίους σχετίζονται με την διαχείριση των βίντεο και οι υπόλοιποι με την διαχείριση χρηστών. Αυτοί δεν είναι ανεξάρτητοι, αντιθέτως συνδέονται με σχέσεις που εκφράζονται στα σχεσιακά μοντέλα που θα περιγραφούν στη συνέχεια Πίνακας Clips Ο κύριος πίνακας της εφαρμογής είναι ο Clips. Κάθε γραμμή αυτού του πίνακα αντιπροσωπεύει την οντότητα ενός βίντεο. Τα πεδία που περιέχει είναι Id, Name, Duration, Date, VideoExtention, Fingerprint, VideoPath, Fps, ClipInfo, ClipPicNum, ClipTypeId, ActualName, ContentType. Η εικόνα 18 απεικονίζει τον πίνακα, ενώ παρακάτω δίνονται αναλυτικές πληροφορίες για κάθε πεδίο. Id: BIGINT, δηλώνει το Id του κάθε βίντεο. Επίσης, έχει οριστεί να αυξάνεται από το σύστημα κατά μία μονάδα κάθε φορά που εισάγεται ένα επιπλέον βίντεο. Νame : NVARCHAR(255), αποθηκεύει το όνομα που εισάγει ο χρήστης Duration : TIME(7), αποθηκεύει τη διάρκεια του βίντεο Date: DATETIME, αποθηκεύει την ημερομηνία που το βίντεο αποθηκεύτηκε στο σύστημα. VideoExtention: NVARCHAR (MAX), αποθηκεύει την κατάληξη του βίντεο (.avi,.wmv). 29 Καλογήρου Ελισάβετ Τ 1621

30 Fingerprint: NVARCHAR (MAX), αποθηκεύει το fingerprint του εκάστοτε βίντεο. Fps : FLOAT(35), αποθηκεύει τα frames/second του βίντεο. ClipInfo: NVARCHAR (MAX), αποθηκεύει τις γενικές πληροφορίες που έχει εισάγει ο χρήστης κατά τη διαδικασία της μεταφόρτωσης του εκάστοτε βίντεο. ClipPicNum: INT, δηλώνει τον αριθμό των φωτογραφιών που έχουν δημιουργηθεί για κάθε βίντεο. ActualName: NVARCHAR (MAX), αποθηκεύει το πραγματικό όνομα του αρχείου βίντεο. ContentType: NVARCHAR (MAX), αποθηκεύει τον τύπο του βίντεο, που μπορεί να είναι κάποιος από τους παρακάτω [5]: video/avi: καλύπτει τους περισσότερους τύπος που είναι συμβατοί με τα Windows, συμπεριλαμβανομένων των.avi και.divx video/mpeg: βίντεο κατηγορίας MPEG-1 με πολυκάναλο ήχο; ορίζεται ως RFC 2045 και RFC 2046 video/mp4: βίντεο κατηγορίας MP4; ορίζεται ως RFC 4337 video/ogg: Ogg Theora ή άλλος τύπος βίντεο (με ήχο); ορίζεται ως RFC 5334 video/quicktime: βίντεο κατηγορίας QuickTime; καταχωρημένο video/webm: τύπος ανοικτού κώδικα βασισμένος στη WebM Matroska video/x-matroska: τύπος ανοικτού κώδικα Matroska video/x-ms-wmv: Windows Media Video; καταχωρημένο στο Microsoft KB video/x-flv: Flash video (αρχεία FLV) ClipType_Id: BIGINT, είναι το ξένο κλειδί που δείχνει το πεδίο Id του πίνακα ClipType. Στην εικόνα 18, στην τελευταία γραμμή υπάρχει η δήλωση που δημιουργεί το ξένο κλειδί: CONSTRAINT [FK_dbo.Clips_dbo.ClipTypes_ClipType_Id] FOREIGN KEY ([ClipType_Id]) REFERENCES [dbo].[cliptypes] ([Id]) + 30 Καλογήρου Ελισάβετ Τ 1621

31 Εικόνα 18 - Πίνακας Clips Πίνακας Images Κάθε βίντεο έχει μία ή περισσότερες αντιπροσωπευτικές εικόνες οι οποίες αντιστοιχούν στις αλλαγές σκηνών που υπάρχουν στα βίντεο. O πίνακας Images, στην εικόνα 19, περιέχει πληροφορίες για το πού βρίσκονται αποθηκευμένες αυτές οι χαρακτηριστικές εικόνες του εκάστοτε βίντεο και τα χαρακτηριστικά τους. Ο πίνακας αποτελείται από τα εξής πεδία: Ιd : BIGINT, όπου αποθηκεύεται το id της εγγραφής. ClipId: BIGINT, αυτό είναι το Id του Clip στο οποίο ανήκει η εικόνα. Στην εικόνα 19, έχουμε στην δημιουργία του πίνακα τη δήλωση που δημιουργεί το ξένο κλειδί: FOREIGN KEY ([ClipId]) REFERENCES [dbo].[clips] ([Id]) ON DELETE CASCADE. 31 Καλογήρου Ελισάβετ Τ 1621

32 Path: NVARCHAR(MAX), αποθηκεύει το path στο οποίο ο server θα αποθηκεύσει την εικόνα. ImageData: VARBINARY(MAX), αποθηκεύει τα δεδομένα της εικόνας σε δυαδική μορφή. Παρόλο που ο server αποθηκεύει την εικόνα στον σκληρό του δίσκο, παρουσιάζεται και αυτή η εναλλακτική περίπτωση της αποθήκευσης των δεδομένων της εικόνας. Η κάθε μια από τις περιπτώσεις έχει τα θετικά και τα αρνητικά της. Σε αυτό το σημείο πρέπει να αναφερθεί ότι δεν έγινε κάτι παρόμοιο και με τα δεδομένα του βίντεο, διότι θα αυξανόταν δραματικά ο όγκος της βάσης δεδομένων. FileName: NVARCAR(MAX), αποθηκεύει το όνομα του αρχείου που δημιουργείται αυτόματα κατά την εξαγωγή της εικόνας από το βίντεο, διαδικασία που περιγράφεται στο κεφάλαιο 5. FileExt: NVARCAR(MAX), αποθηκεύει την κατάληξη της εικόνας όπως ορίζεται κατά την εξαγωγή της. Εικόνα 19 - Πινάκας Images Καλογήρου Ελισάβετ Τ

33 Πίνακας Clip Types Η εφαρμογή παρέχει στον χρήστη την δυνατότητα να ορίσει μια κατηγορία για το βίντεο που πρόκειται να ανεβάσει. Επίσης εάν κάποια από τις υπάρχουσες κατηγορίες δεν τον ικανοποιεί, μπορεί να δημιουργήσει μια νέα κατηγορία. Η βάση δεδομένων περιέχει τον πίνακα ClipTypes,(εικόνα 20) στον οποίο αποθηκεύονται οι κατηγορίες των βίντεο. Αυτός αποτελείται από δύο πεδία: Ιd : BIGINT, όπου αποθηκεύεται το id της εγγραφής. Type: NVARCHAR(MAX), το όνομα ή η περιγραφή του τύπου των βίντεο. Εικόνα 20 - Πίνακας ClipType Καλογήρου Ελισάβετ Τ

34 Clip ClipTypes PK Id 1 1 PK Id Name Type Duration Date Images VideoExtention PK Id Fingerprint VideoPath * ClipId Path Fps ImageData ClipInfo FileName ClipPicNum ClipType_Id 1 FileExt ActualName ContentType Εικόνα 21 - UML database video schema Οντότητες Διαχείρισης Βίντεο Οι προηγούμενοι πίνακες για την διαχείριση των βίντεο και των εικόνων αντιστοιχούν στις αντίστοιχές κλάσεις στο κώδικα. Αυτές είναι: Clip Image ClipType Παρακάτω φαίνεται ο πηγαίος κώδικας της κλάσης Clip που παρουσιάζει και το μεγαλύτερο ενδιαφέρον. 34 Καλογήρου Ελισάβετ Τ 1621

35 namespace VideoSearch.Models public class Clip public long Id get; set; [StringLength(255, ErrorMessage = "Το όνομα του Video δεν μπορεί να ξεπερνά τους 255 χαρακτήρες")] [Display(Name="Name")] public string Name get; set; [Display(Name = "Actual Name")] public string ActualName get; set; [Display(Name = "Duration")] [DataType(DataType.Time)] [DisplayFormat(DataFormatString="0:hh\\:mm\\:ss\\.ff", ApplyFormatInEditMode = true)] public TimeSpan Duration get; set; [Display(Name = "Uploaded")] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "0:dd-MM-yyyy", ApplyFormatInEditMode = true)] public DateTime Date get; set; [Display(Name = "Extention")] public string VideoExtention get; set; [Display(Name = "Type")] public string ContentType get; set; public string Fingerprint get; set; [Display(Name = "Path")] public string VideoPath get; set; [DefaultValue(value: 0)] [DisplayFormat(DataFormatString = "0:0.00", ApplyFormatInEditMode = true)] public double Fps get; set; [Display(Name = "Information")] public string ClipInfo get; set; [Display(Name = "Pictures")] [DefaultValue(value:0)] public int ClipPicNum get; set; public virtual ICollection<Image> Images get; set; public virtual ClipType ClipType get; set; public Clip() : this("", "", TimeSpan.MinValue, DateTime.Now, "", "", "", 0F, "", 0) string public Clip(string actualname, string name, TimeSpan duration, DateTime date, string vext, fingerprint, string VPath, float fps, string clpinfo, int nofpics) ActualName = actualname; Name = name; Duration = duration; Date = date; VideoExtention = vext; Fingerprint = fingerprint; VideoPath = VPath; Fps = fps; ClipInfo = clpinfo; ClipPicNum = nofpics; public override bool Equals(object obj) Clip oclip = obj as Clip; 35 Καλογήρου Ελισάβετ Τ 1621

36 if (oclip == null) return false; return Name.Equals(oClip.Name) && Duration == oclip.duration && Date.Equals(oClip.Date) && VideoExtention.Equals(oClip.VideoExtention) && Fingerprint.Equals(oClip.Fingerprint) && VideoPath.Equals(oClip.VideoPath) && Fps == oclip.fps && ClipInfo.Equals(oClip.ClipInfo) && ClipPicNum == oclip.clippicnum; public override int GetHashCode() return Name.GetHashCode() + Duration.GetHashCode() + Date.GetHashCode() + VideoExtention.GetHashCode() + Fingerprint.GetHashCode() + VideoPath.GetHashCode() + (int)fps + ClipInfo.GetHashCode() + ClipPicNum; public override string ToString() return "[Name: " + Name + " Duration: " + Duration + " Date: " + Date.ToString() + " VideoType: " + VideoExtention + " Txt: " + Fingerprint + " VideoPath: " + VideoPath + " Fps: " + Fps + " ClipInfo: " + ClipInfo + " ClipPicNum: " + ClipPicNum + "]"; Είναι εμφανές ότι η κλάση είναι μια απλή C# κλάση, ενώ το μόνο αξιοσημείωτο είναι ότι τα πεδία της έχουν διακοσμηθεί με ιδιότητες που ορίζονται μέσα σε τετράγωνες αγκύλες ([]). Για παράδειγμα το πεδίο Date έχει τις παρακάτω ιδιότητες (properties): 1. [Display(Name = "Uploaded")] 2. [DataType(DataType.Date)] 3. [DisplayFormat(DataFormatString = "0:dd-MM-yyyy", ApplyFormatInEditMode = true)] Κάποιες από αυτές τις ιδιότητες είναι οδηγίες για το πώς θα εμφανίζονται τα πεδία αυτά στο View και κάποιες άλλες είναι ιδιότητες για το πώς θα αποθηκεύονται στην βάση δεδομένων. Για την καλύτερη κατανόηση του τι ακριβώς συμβαίνει, θα αναλυθεί το παραπάνω παράδειγμα. Η ιδιότητα 1 είναι μια οδηγία για το View σύμφωνα με την οποία, όποτε χρειαστεί θα εμφανίζεται το όνομα που περιέχεται στο Uploaded και όχι το όνομα του πεδίου. Έτσι, όποτε κληθεί η helper μέθοδος στο View (cshtml => model.date) τότε θα εμφανίζεται στον χρήστη το Uploaded. Παρόμοια περίπτωση είναι και η ιδιότητα 3, η οποία εκτός της DisplayNameFor, δουλεύει επιπλέον και σε συνδυασμό με την helper => model.date) Έτσι, και στις δύο περιπτώσεις θα εμφανιστεί η ημερομηνία με το format που επιλέχθηκε στην ιδιότητα. Τώρα, σχετικά με την 2η ιδιότητα που αφορά τον τύπο (DataType), είναι μια οδηγία προς την βάση δεδομένων για το είδος του τύπου του συγκεκριμένου πεδίου. Καλογήρου Ελισάβετ Τ

37 Σε αυτό το σημείο, εξαιτίας της ευρείας χρήσης τους στην εργασία, θα πρέπει να αποσαφηνιστεί η λειτουργία των μεθόδων Html helper και το τι ακριβώς συμβαίνει στις κλήσεις αυτών. Στα προηγούμενα κομμάτια κώδικα υπήρχε η => model.date) Στην πραγματικότητα όμως η υπογραφή της μεθόδου είναι public static MvcHtmlString EditorFor<TModel, TValue>( this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression ); Το πρώτο όρισμα της μεθόδου είναι this HtmlHelper<TModel> html Το γεγονός ότι η μέθοδος είναι στατική και το πρώτο όρισμά της ξεκινάει με το this την καθιστά επεκτάσιμη μέθοδο (extention method), δηλαδή επεκτείνει την κλάση HtmlHelepr<TModel> (αυτή που ακολουθεί μετά το this). Το συγκεκριμένο όρισμα δεν μπορεί να τεθεί κατά την κλήση της μεθόδου, αλλά είναι μια οδηγία προς τον compiler να επεκτείνει την κλάση που ακολουθεί το this. Το δεύτερο όρισμά της είναι το Expression<Func<TModel, TValue>> expression Το ενδιαφέρον σημείο είναι ο τύπος της γενικής παραμέτρου (generic parameter), που είναι Func<TModel, TValue> Η Func στο.net αναπαριστά ένα delegate, δηλαδή μια μεταβλητή που μπορεί να κρατήσει μια μέθοδο. Συγκεκριμένα η Func<TModel, TValue> μπορεί να κρατήσει μια μέθοδο που παίρνει ένα όρισμα τύπου TModel και έχει τύπο επιστροφής TValue. Ακόμη σε κάθε cshtml αρχείο, δηλαδή σε αρχεία που αναπαριστούν κάποιο View, στην πρώτη γραμμή τους επεκτείνουν την κλάση Model που ορίζει το View. Για παράδειγμα στο αρχείο Edit.cshtml υπάρχει στην πρώτη γραμμή η VideoSearch.Models.Clip δηλαδή η μεταβλητή model είναι τύπου Clip. Επιστρέφοντας στην κλήση της => model.date) περνάει ως παράμετρος μια λ-expression model => model.date που παίρνει την θέση της Func<TModel, TValue>. Η κλήση της μεθόδου μπορεί να συνάγει τους τύπους των γενικών παραμέτρων και έτσι το TModel έχει ίδιο τύπο με το model, δηλαδή Clip, και ο τύπος επιστροφής DateTime και η υπογραφή του Func γίνεται Func<Clip, DateTime> Για να γίνει περισσότερο κατανοητός ο λόγος για τον οποίο μαρκάρονται τα πεδία της κλάσης με οδηγίες που αφορούν την βάση δεδομένων, πρέπει να αναφερθούν οι δύο τρόποι 37 Καλογήρου Ελισάβετ Τ 1621

38 ανάπτυξης που υποστηρίζει το Visual Studio και το Entity Framework. Ο πρώτος τρόπος (που δεν ακολουθήθηκε), είναι ο λεγόμενος Database First, στον οποίο πρώτα σχεδιάζονται οι οντότητες στην βάση δεδομένων και στην συνέχεια εξάγεται η κλάση από αυτήν. Στον δεύτερο τρόπο, που ονομάζεται Code First, πρώτα σχεδιάζονται οι οντότητες ως κλάσεις και στην συνέχεια αυτόματα από αυτές τις κλάσεις δημιουργούνται οι πίνακες της βάσης δεδομένων. Για να επιτευχθεί το επιθυμητό αποτέλεσμα με τον Code First, με τον οποίο δημιουργήθηκε η παρούσα εργασία, ακολουθήθηκαν τα εξής βήματα: 1. Ορίστηκε το Connection String στο web. config αρχείο. Το Connection String είναι ο τρόπος της εφαρμογής να βρει πού είναι η βάση δεδομένων. Στην παρούσα περίπτωση χρησιμοποιήθηκε το εξής: <connectionstrings> <add name="defaultconnection" connectionstring="data Source=(LocalDb)\v11.0;AttachDbFilename= DataDirectory \aspnet- VideoSearch mdf;Initial Catalog=aspnet-VideoSearch ;Integrated Security=True" providername="system.data.sqlclient" /> </connectionstrings> 2. Ορίστηκε μια κλάση η οποία πρέπει έμμεσα ή άμεσα να κληρονομεί την DbContext. Στην συνέχεια ο constructor αρχικοποιεί την κλάση σύμφωνα με το όνομα του Connection String. Στην περίπτωση αυτή η κλάση είναι η παρακάτω: public class ApplicationDbContext : IdentityDbContext<ApplicationUser> public ApplicationDbContext() : base("defaultconnection", throwifv1schema: false) Καλογήρου Ελισάβετ Τ 1621 public static ApplicationDbContext Create() return new ApplicationDbContext(); public System.Data.Entity.DbSet<VideoSearch.Models.Clip> Clips get; set; public System.Data.Entity.DbSet<VideoSearch.Models.ClipType> ClipTypes get; set; public System.Data.Entity.DbSet<VideoSearch.Models.Image> Images get; set; 3. Όπως φαίνεται στον προηγούμενο κώδικα, υπερκαλύπτεται η μέθοδος create η οποία επιστρέφει ένα αντικείμενο της ίδιας κλάσης. Επιπλέον, δίνονται σε αυτή την κλάση τα DbSet<Type>, όπου Type είναι το όνομα της κλάσης που θα δημιουργηθεί και θα διατηρηθεί στην βάση δεδομένων. 4. Τέλος, κατά την εκκίνηση του project και στο αρχείο Startup.cs καλείται η μέθοδος 38

39 Create που δημιουργήθηκε στο βήμα 3. Στην περίπτωση αυτή, η κλήση έγινε έμμεσα μέσω της μεθόδου ConfigureAuth, η οποία καλείται από την κλάση Startup, και στο σώμα της περιέχει την κλήση της create. Στην εικόνα 22 παρουσιάζεται η δομή της ApplicationDbContext και στην εικόνα 23 οι αναφορές (references) και οι κλήσεις που σχετίζονται με αυτήν. Επιστρέφοντας στην κλάση Clip παρατηρούνται οι εξής δηλώσεις: 1. public virtual ICollection<Image> Images get; set; 2. public virtual ClipType ClipType get; set; Οι συγκεκριμένες δηλώσεις, που διακρίνεται ότι είναι virtual, αφορούν και πάλι την βάση δεδομένων. Στην πρώτη περίπτωση ορίζεται ότι, όταν εξάγεται ένα Clip, αναμένεται να έχει και μια συλλογή από εικόνες οι οποίες έχουν ως ClipId το Id του Clip. Στη δεύτερη περίπτωση ορίζεται το ξένο κλειδί προς την κλάση-πίνακα ClipTypes. Εικόνα ApplicationDbContext Καλογήρου Ελισάβετ Τ

40 Εικόνα 23 - ApplicationDbContext, Reference Diagram Πίνακες Διαχείρισης Χρηστών Το ASP.NET MVC framework έχει το δικό του σχήμα για την διαχείριση χρηστών, το οποίο σε συνδυασμό με τις υπάρχουσες κλάσεις για τους χρήστες και τους ρόλους, δουλεύει απρόσκοπτα και καλύπτει όλες τις περιπτώσεις και τις ανάγκες που δημιουργούνται. Η παρούσα εργασία έχει βασιστεί στο υπάρχον σχήμα αντί να δημιουργηθεί από την αρχή. Για το λόγο αυτό, η κλάση ApplicationDbContext κληρονομεί έμμεσα το DbContext μέσω του IndentityDbContext<ApplicationUser>, όπως φαίνεται στο προηγούμενο κομμάτι κώδικα όπου παρουσιάστηκε η σύνδεση των οντοτήτων με τους πίνακες της βάσης δεδομένων. Αυτό έχει σαν αποτέλεσμα οι παρούσες κλάσεις και οι κλάσεις του membership να δημιουργηθούν στην ίδια βάση και στο ίδιο σχήμα. Παρακάτω παρουσιάζεται το IndentityDbContext: public class IdentityDbContext<TUser> : IdentityDbContext<TUser, IdentityRole, 40 Καλογήρου Ελισάβετ Τ 1621

41 string, IdentityUserLogin, IdentityUserRole, IdentityUserClaim> where TUser : Microsoft.AspNet.Identity.EntityFramework.IdentityUser namespace Microsoft.AspNet.Identity.EntityFramework public class IdentityDbContext<TUser, TRole, TKey, TUserLogin, TUserRole, TUserClaim> : DbContext where TUser : Microsoft.AspNet.Identity.EntityFramework.IdentityUser<TKey, TUserLogin, TUserRole, TUserClaim> where TRole : Microsoft.AspNet.Identity.EntityFramework.IdentityRole<TKey, TUserRole> where TUserLogin : Microsoft.AspNet.Identity.EntityFramework.IdentityUserLogin<TKey> where TUserRole : Microsoft.AspNet.Identity.EntityFramework.IdentityUserRole<TKey> where TUserClaim : Microsoft.AspNet.Identity.EntityFramework.IdentityUserClaim<TKey> public IdentityDbContext(); public IdentityDbContext(string nameorconnectionstring); public IdentityDbContext( DbConnection existingconnection, DbCompiledModel model, bool contextownsconnection); public bool RequireUnique get; set; public virtual IDbSet<TRole> Roles get; set; public virtual IDbSet<TUser> Users get; set; protected override void OnModelCreating(DbModelBuilder modelbuilder); protected override DbEntityValidationResult ValidateEntity(DbEntityEntry entityentry, IDictionary<object, object> items); Ως πρώτη παρατήρηση που επιβεβαιώνει τα λεγόμενα της προηγούμενης παραγράφου φαίνεται ότι η κλάση κληρονομεί από το DbContext. Στην συνέχεια παρατηρείται ότι η κλάση κληρονομεί από πολλά interfaces τα οποία έχουν ονόματα σχετικά με τους πίνακες του σχήματος που παρουσιάζονται παρακάτω. Καλογήρου Ελισάβετ Τ

42 Εικόνα 24 - AspNetUser Εικόνα 25 - AspNetRoles 42 Καλογήρου Ελισάβετ Τ 1621

43 Εικόνα 26 - AspNetUserRoles Εικόνα 27 - AspNetUserClaims 43 Καλογήρου Ελισάβετ Τ 1621

44 Εικόνα 28 - AspNetUserLogins 4.2 Χρήση του Bootstrap Ως γνωστόν, οι σελίδες που υπάρχουν στο διαδίκτυο είναι αρχεία που γράφονται στην markup γλώσσα html. Για την καλύτερη μορφοποίηση των στοιχείων, των αντικειμένων και γενικά των κειμένων των markup σελίδων (HTML documents) χρησιμοποιούνται τα CSS (Cascading Style Sheets). Πρόκειται δηλαδή για στυλ (styles) που εφαρμόζονται για να καλλωπίσουν τον κώδικα ΗΤΜL. Στην εφαρμογή χρησιμοποιήθηκε το bootstrap framework. To bootstrap δημιουργήθηκε από προγραμματιστές του Twitter, τους Mark Otto και Jacob Thornton, και πλέον συντηρείται από μια μεγάλη κοινότητα προγραμματιστών. Η αναγνώριση του bootstrap είναι τόσο μεγάλη που πλέον θεωρείται ένα από τα καλύτερα stylesheet framework και υποστηρίζεται από κατασκευαστές λογισμικού όπως η Microsoft, που το ενσωμάτωσε στο ASP.NET MVC template. Το bootstrap περιέχει οδηγίες για το πώς θα μορφοποιηθούν τα στοιχεία της cshtml σελίδας. Αρχικά, το αρχείο των προδιαγραφών του bootstrap.css αποθηκεύεται στο σύστημα, στην παρούσα περίπτωση στον φάκελο Content/bootstrap.min.css. Κάθε stylesheet αρχείο, όπως και το bootstrap, υπάρχει σε δύο εκδόσεις. Η πρώτη bootstrap.css χρησιμοποιείται κατά την ανάπτυξη των εφαρμογών και είναι κώδικας που μπορεί να διαβαστεί και να αποσφαλματωθεί, ενώ η δεύτερη bootstrap.min.css είναι μια συμπιεσμένη έκδοση του κώδικα, το minified αρχείο όπως αποκαλείται, δηλαδή δεν είναι σε μορφή που 44 Καλογήρου Ελισάβετ Τ 1621

45 μπορεί να διαβαστεί αλλά προσφέρει μεγαλύτερη ταχύτητα κατά την φόρτωση του. Το bootstrap framework περιέχει και τα αντίστοιχα.js αρχεία, που είναι κώδικας javascript, και πάλι με τις ίδιες εκδόσεις. Παρακάτω παρουσιάζεται η κλάση BundleConfig που βρίσκεται στον φάκελο App_Start και είναι υπεύθυνη για την δημιουργία των λεγόμενων Bundles. namespace VideoSearch public class BundleConfig public static void RegisterBundles(BundleCollection bundles)... bundles.add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); Στην συνέχεια, στο αρχείο _Layout.cshtml που έχει τον ρόλο της master page, δηλαδή αποτελεί το κέλυφος που θα φορτώνεται πάντα και περιέχει στο σώμα της σελίδες που θα εμφανίζονται, βρίσκεται η φόρτωση του bundle που δημιουργήθηκε στην RegisterBundles του προηγούμενου κώδικα: </head> Έτσι, συνδέθηκε το αρχείο bootstrap.css με κάθε σελίδα και το style που προτείνει το bootstrap.css εφαρμόστηκε σε όλα τα στοιχεία των σελίδων. Ενδεικτικό της δουλείας που επιτελεί το bootstrap είναι η εικόνα 29, στην οποία παρουσιάζεται η εκτέλεση της εφαρμογής χωρίς το bootstrap template. Καλογήρου Ελισάβετ Τ

46 Εικόνα 29 - Bootstrap Off 4.3 Διαχείριση Βίντεο και Εικόνων Για την εξαγωγή των πληροφοριών που χρειάζονται για την δημιουργία του fingerprint χρησιμοποιήθηκε το εξωτερικό πρόγραμμα ffprobe.exe. Το συγκεκριμένο πρόγραμμα ανήκει στην βιβλιοθήκη προγραμμάτων FFmpeg [6], πού είναι μια open-source cross-platform λύση για την διαχείριση video. Συνολικά τα εργαλεία αυτής της βιβλιοθήκης είναι: ffmpeg: Ένα command line εργαλείο για την μετατροπή των αρχείων πολυμέσων σε διάφορες μορφοποιήσεις. ffplay: Ένας απλός media player (αναπαραγωγή πολυμέσων) που βασίζεται στα εργαλεία της βιβλιοθήκης FFmpeg. ffserver: Αναπαραγωγή πολυμέσων και streaming αυτού για live broadcasts. ffprobe: Εργαλείο για την ανάλυση των πολυμέσων. Το τελευταίο εργαλείο που χρησιμοποιήθηκε στην εφαρμογή, το ffprobe, είναι ένα command 46 Καλογήρου Ελισάβετ Τ 1621

47 line εργαλείο που με διάφορες επιλογές στην γραμμή εντολών εξάγει διάφορα είδη πληροφοριών και στατιστικά. Η τεκμηρίωση του είναι διεξοδική και βρίσκεται στην διεύθυνση Από εκεί δημιουργήθηκε και η εντολή που χρησιμοποιείται στην μέθοδο doffmpeg() της κλάσης VideoHelper, όπως παρουσιάζεται παρακάτω: private string doffmpeg() string execresult = ExecuteExe(workingDir + "ffprobe.exe", string.format("-select_streams v:0 -show_frames -show_entries frame=pict_type,pkt_size,pkt_pts_time -print_format json -i 0", videopath)); if (!string.isnullorempty(execresult)) try FrameInfos framelist = JsonConvert.DeserializeObject<FrameInfos>(execResult); FrameFingerprintExtractor fingerprintextractor = new FrameFingerprintExtractor(frameList.frames); fingerprint = fingerprintextractor.generatefingerprint(out videoimagesinterval); catch (Exception ex) string strerror = ex.message; return execresult; Η εντολή που δίνεται στην μέθοδο ExecuteExe είναι: [το path που βρίσκεται το exe]\ffprobe.exe -select_streams v:0 -show_frames -show_entries frame=pict_type,pkt_size,pkt_pts_time -print_format json -i [το path + όνομα του αρχείου του βίντεο] Παρακάτω παρουσιάζονται και αναλύονται οι επιλογές της εντολής: -select_streams v:0: Επιλέγεται το stream 0 που είναι το stream του βίντεο χωρίς των ήχο. -show_frames: Από το stream που επιλέχθηκε στην προηγούμενη εντολή εμφανίζονται πληροφορίες για κάθε frame που περιέχεται σε αυτό. -show_entries: Από όλες τις πληροφορίες που εμπεριέχονται στο κάθε frame εμφανίζονται μόνο αυτές που είναι χρήσιμες για την εφαρμογή, τις οποίες ορίζουμε στην συνέχεια ως frame=pict_type,pkt_size,pkt_pts_time. Δηλαδή: pict_type : εμφανίζει τον τύπο του frame (I, P ή B) pkt_size : εμφανίζει το μέγεθος του frame σε bytes pkt_pts_time : εμφανίζει τον χρόνο εμφάνισης του frame μέσα στο βίντεο. -print_format json : Η τελευταία εντολή εμφανίζει τα αποτελέσματα σε μορφή json για να μπορούν να προσαρμοστούν εύκολα σε κλάσεις στο πρόγραμμά με την βιβλιοθήκη Newtonsoft.Json.dll, όπως θα παρουσιαστεί στο κεφάλαιο 5 στην ανάλυση του κώδικα. Όπως αναφέρθηκε παραπάνω, όταν κάποιος χρήστης ανεβάζει ένα βίντεο, η εφαρμογή Καλογήρου Ελισάβετ Τ

48 δημιουργεί έναν αριθμό αντιπροσωπευτικών εικόνων. Αυτές οι εικόνες αναφέρονται ως αντιπροσωπευτικές διότι απεικονίζουν τις διάφορες σκηνές του βίντεο, για την ακρίβεια εξάγονται την στιγμή που συμβαίνει η αλλαγή σκηνής. Για την εξαγωγή των εικόνων χρησιμοποιήθηκε η βιβλιοθήκη Microsoft.Expression.Encoder.dll της Microsoft. Η συγκεκριμένη βιβλιοθήκη περιέχει την κλάση AudioVideoFile, η οποία βοηθάει με την εξαγωγή των thumbnails του βίντεο. Η διαδικασία για την δημιουργία των εικόνων αρχίζει με το διάβασμα του αποτυπώματος κάθε βίντεο από όπου γίνεται αντιληπτό πότε έχει συμβεί αλλαγή σκηνής. Τότε δημιουργείται η εικόνα η οποία αναπαριστά το αντίστοιχο frame. Πρέπει ακόμα να σημειωθεί ότι στο πάνω αριστερά κομμάτι της εικόνας αναγράφεται ο χρόνος του βίντεο στον οποίο αντιστοιχεί το συγκεκριμένο frame. Λεπτομερής ανάλυση της διαδικασίας θα παρουσιαστεί στο κεφάλαιο 5. Καλογήρου Ελισάβετ Τ

49 5. Ο κώδικας της εφαρμογής Παρακάτω δίνεται και αναλύεται ο κώδικας των πιο σημαντικών σημείων της εφαρμογής. Αρχικά δίνονται οι κλάσεις που χρησιμοποιήθηκαν και μετά ακολουθεί η επεξήγηση αυτών. Πρώτα θα παρουσιαστούν οι βοηθητικές κλάσεις και στη συνέχεια θα μελετηθεί το πώς χρησιμοποιήθηκαν στην εφαρμογή. 5.1 Βοηθητική κλάση VideoHelper Η βοηθητική κλάση VideoHelper είναι η καρδιά της εφαρμογής και με αυτή πραγματοποιούνται όλες οι εργασίες που αφορούν τα βίντεο. Ακολουθεί ο κώδικάς της. namespace VideoSearch.Utils public class VideoHelper private static readonly string workingdir; private static readonly string outputimages; private static readonly string path; private AudioVideoFile avfile; private string videopath; private string fingerprint; private TimeSpan duration; private double fps; private List<int> videoimagesinterval; public static string WorkingDir get return workingdir; public static string OutputImages get return outputimages; public static string MainPath get return path; public string VideoPath get return videopath; 49

50 public string Fingerprint get return fingerprint; public TimeSpan Duration get return duration; public double Fps get return fps; public List<int> VideoImagesInterval get return videoimagesinterval; set videoimagesinterval = value; static VideoHelper() path = System.Web.HttpRuntime.AppDomainAppPath; workingdir outputimages Images\"; public VideoHelper(string videoname) this.videopath = VideoHelper.WorkingDir + videoname; avfile = new AudioVideoFile(videoPath); if (avfile!= null) duration = avfile.duration; if (avfile.videostreams.count > 0) fps = avfile.videostreams[0].framerate; //DoMencoder(); doffmpeg(); private void DoMencoder() try System.Diagnostics.Process mencoder = new System.Diagnostics.Process(); mencoder.startinfo.filename = workingdir + "mencoder.exe"; mencoder.startinfo.arguments = string.format("0 -o 1 -nosound -quiet -of rawvideo -oac copy -vf " + "lavcdeint,scale=320:240,crop=240:176 -ovc x264 -x264encopts " + "qp=26:nocabac:nochroma-me:analyse=p8x8,i4x4:threads=auto:keyint= :no-psnr:nossim:scenecut=-1", videopath, workingdir + "H264out"); mencoder.startinfo.useshellexecute = false; mencoder.startinfo.redirectstandardoutput = true; mencoder.startinfo.redirectstandarderror = true; 50

51 mencoder.start(); String m = mencoder.standardoutput.readtoend(); mencoder.waitforexit(); catch (Exception e) string err = e.message; private string doffmpeg() string execresult = ExecuteExe(workingDir + "ffprobe.exe", string.format("-select_streams v:0 -show_frames -show_entries frame=pict_type,pkt_size,pkt_pts_time -print_format json -i 0",videoPath)); if (!string.isnullorempty(execresult)) try FrameInfos framelist = JsonConvert.DeserializeObject<FrameInfos>(execResult); FrameFingerprintExtractor fingerprintextractor = new FrameFingerprintExtractor(frameList.frames); fingerprint = fingerprintextractor.generatefingerprint(out videoimagesinterval); catch (Exception ex) string strerror = ex.message; return execresult; private string ExecuteExe(string filename, string arguments = null) if (!string.isnullorempty(filename)) StreamReader outputreader = null; StreamReader errorreader = null; System.Diagnostics.Process process = new System.Diagnostics.Process(); System.Diagnostics.ProcessStartInfo startinfo = new System.Diagnostics.ProcessStartInfo(); try startinfo.createnowindow = true; startinfo.filename = filename; startinfo.arguments = arguments; startinfo.errordialog = false; startinfo.useshellexecute = false; startinfo.redirectstandarderror = true; startinfo.redirectstandardinput = true; startinfo.redirectstandardoutput = true; process.startinfo = startinfo; bool processstarted = process.start(); if (processstarted) try //Get the output stream 51

52 outputreader = process.standardoutput; errorreader = process.standarderror; //process.waitforexit(15000); catch (OutOfMemoryException) return null; string displaytext = outputreader.readtoend(); return displaytext; catch (Exception) return null; finally if (outputreader!= null) outputreader.close(); if (errorreader!= null) errorreader.close(); process.close(); process.dispose(); return null; /* * This method make use of: * Microsoft Expression Encoder 4 with Service Pack 2 (SP2) * dll source: * * Expression Encoder blog: * * * Full example in vb converted to C# for our needs * */ public void CreateVideoThumnailImage(long clipid, int thumnailwidth, int thumnailheight, string thumnailsavepath, out List<VideoSearch.Models.Image> images) // Create a value equal to the length of the video double fileduration = avfile.duration.totalseconds; images = new List<VideoSearch.Models.Image>(); foreach(int sec in videoimagesinterval) in: // Set thumbnail value to second interval indicated by argument passed 52

53 double thumbnaillocation = sec; then you // If the interval passed in is at a location longer than the video, // redefine an interval to the mid-point of the video. if (thumbnaillocation > fileduration) thumbnaillocation = (fileduration / 2); // Create the formatted filename to append on to the VideoFile (Format = // "VideoFileName_thumb.png") // Note: You can change this logic to be a passed in value or whatever // would like. This is not critical to generating the thumbnail image. string formattedfilename = Path.GetFileName(videoPath); // Strip off the video file extension and add an "_thumb" and the format // extension (.Png will be used) to be saved to. formattedfilename = Path.GetFileNameWithoutExtension(formattedFileName); formattedfilename += "_thumb." + sec + "." + ImageFormat.Png.ToString().ToLower(); // Create ThumbnailGenerator object to get thumbs from AudioVideoFile. Use // the Width and Height arguments passed in to determine the size to Save. using (ThumbnailGenerator thumbnailimagegenerator = avfile.createthumbnailgenerator( new System.Drawing.Size(thumnailWidth, thumnailheight))) TimeSpan imageinmovietime = TimeSpan.FromSeconds(thumbnailLocation); // Create the thumbnail image based on interval set above using (Bitmap thumbnailimage = thumbnailimagegenerator.createthumbnail(imageinmovietime)) string strimageinmovietime = imageinmovietime.tostring(); Font drawfont = new Font("Arial", 14); SolidBrush drawbrush = new SolidBrush(Color.White); using (Graphics graphics = Graphics.FromImage(thumbnailImage)) graphics.drawstring( strimageinmovietime, drawfont, drawbrush, 11, 16); graphics.save(); // Save the file to the ThumbnailSavePath argument passed in with // the formatted file name (above) added: thumbnailimage.save( thumnailsavepath + formattedfilename, ImageFormat.Png); string filepathname = thumnailsavepath + formattedfilename; images.add( new VideoSearch.Models.Image( clipid, filepathname, File.ReadAllBytes(filePathName), formattedfilename, ImageFormat.Png.ToString())); // Clean up is not necessary because of using(...) // thumbnailimage.dispose(); // thumbnailimagegenerator.dispose(); 53

54 Η κλάση VideoHelper ορίζει αρχικά τρεις μεταβλητές μέλη ως private static read-only string, που είναι οι workingdir, outputimages και path. Οι μεταβλητές αυτές ορίζονται ως read only διότι το περιεχόμενο τους παραμένει το ίδιο σε όλες τις εκτελέσεις του κώδικα της κλάσης, αλλά πρέπει να υπάρχει η δυνατότητα να αρχικοποιούνται στον constructor της κλάσης και γι' αυτό δεν είναι σταθερές const. Ένα στιγμιότυπο της κλάσης διαχειρίζεται και ένα υποψήφιο για εισαγωγή βίντεο. Οι μέθοδοι της κλάσης παρουσιάζονται στον παρακάτω πίνακα. static VideoHelper() public VideoHelper(string videoname) public class VideoHelper Static Contructor για την αρχικοποίηση των static readonly πεδίων της κλάσης. Ο μοναδικός Contructor της κλάσης που παίρνει ως όρισμα το όνομα του βίντεο που θα διαχειριστεί. private void DoMencoder() Η συγκεκριμένη μέθοδος δεν private string doffmpeg() private string ExecuteExe( string filename, string arguments = null) public void CreateVideoThumnailImage( long clipid, int thumnailwidth, int thumnailheight, string thumnailsavepath, out List<VideoSearch.Models.Image> images) χρησιμοποιείται. Όμως είναι αρκετά σημαντική, διότι μετατρέπει οποιοδήποτε format βίντεο σε συγκεκριμένο format Η264 για να έχουν όλα τα βίντεο που εισάγονται την ίδια μορφή. Ο χρόνος καθυστέρησης ήταν αδικαιολόγητος για εφαρμογή διαδικτύου. Δημιουργεί τις πληροφορίες του βίντεο και τις αναλύει ώστε να εξάγει το fingerprint. Εκτελεί οποιοδήποτε exe της δοθεί ως όρισμα στην πρώτη παράμετρο filename με ορίσματα που της δίνονται στην δεύτερη παράμετρο arguments. Η δεύτερη παράμετρος arguments είναι προαιρετική. Δημιουργεί τις εικόνες thumbnails για το συγκεκριμένο βίντεο για το οποίο εκτελείται η κλάση. Οι εικόνες επιστρέφουν στην λίστα images. Πίνακας 1- VideoHelper Class 54

55 5.1.1 Χρήση της κλάσης VideoHelper Η κλάση χρησιμοποιείται αποκλειστικά στην μέθοδο Create του ClipsController, η οποία εκτελείται κατά την εισαγωγή ενός βίντεο. Παρακάτω παρουσιάζεται ο κώδικας της μεθόδου: [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create( [Bind(Include = "ClipInfo,ClipSearch", Exclude = "Name,VideoData,ContentType,ClipType")] ClipViewModel clipviewmodel, string Name, HttpPostedFileBase VideoData, ClipType ClipType) Clip clip = new Clip(); VideoData = VideoData?? Request.Files["file"]; if (ModelState.IsValid && VideoData!= null) string filename = Path.GetFileName(VideoData.FileName); string filepath = VideoHelper.WorkingDir + filename; VideoData.SaveAs(filePath); clip.actualname = filename; clip.videopath = filepath; clip.contenttype = VideoData.ContentType; VideoHelper helper = new VideoHelper(fileName); ViewData["ClipType"] = new SelectList(db.ClipTypes.ToArray(), "Id", "Type"); if (ModelState.IsValid) clip.cliptype = (from c in db.cliptypes where c.id == ClipType.Id select c).firstordefault<cliptype>(); clip.videoextention = Path.GetExtension(VideoData.FileName); clip.fps = helper.fps; clip.duration = helper.duration; clip.clipinfo = clipviewmodel.clipinfo; if (clipviewmodel.name == null) clipviewmodel.name = clip.actualname; clip.name = clipviewmodel.name; clip.fingerprint = helper.fingerprint; try db.clips.add(clip); db.savechanges(); List<Image> Images; if (helper.videoimagesinterval!= null && helper.videoimagesinterval.count > 0) helper.createvideothumnailimage(clip.id, 256, 256, VideoHelper.OutputImages, out Images); else helper.videoimagesinterval = new List<int>() (int)helper.duration.totalseconds / 2 ; helper.createvideothumnailimage(clip.id, 256, 256, VideoHelper.OutputImages, out Images); 55

56 clip.clippicnum = Images.Count; db.images.addrange(images); db.savechanges(); catch (Exception ex) string em = ex.message; return View("Error"); Response.Write(Path.GetFileName(VideoData.FileName)); Response.End(); return View("Index"); return View("Index"); Ένα από τα σημεία που χρήζουν αποσαφήνισης είναι τα ορίσματα της μεθόδου. public ActionResult Create( [Bind(Include = "ClipInfo,ClipSearch", Exclude = "Name,VideoData,ContentType,ClipType")] ClipViewModel clipviewmodel, string Name, HttpPostedFileBase VideoData, ClipType ClipType) Όπως παρουσιάστηκε στην ενότητα MVC Template, το http verb post εκτελείται όταν πρέπει να αποσταλούν δεδομένα στον server. Αυτά τα δεδομένα εξάγονται από το View, όμως το View γίνεται bind για ένα συγκεκριμένο model, σε αυτή την περίπτωση την κλάση Clip. Έτσι τα δεδομένα που η Create θέλει να στείλει στον server είναι ένα στιγμιότυπο της κλάσης Clip. Επομένως ως όρισμα θα πρέπει να παίρνει ένα Clip. Εάν επρόκειτο για μια απλή κλάση με απλά πεδία που έπρεπε απλά να αποθηκευτούν στην βάση, δεν θα χρειαζόταν να γίνει κάτι επιπλέον. Όμως, στην παρούσα περίπτωση δεν υπάρχουν πεδία που απλά πληκτρολογεί ο χρήστης αλλά υπάρχει επιπλέον αυτών και το βίντεο που επιλέγεται. Για τον λόγο αυτό δεν μπορούν όλα τα πεδία να γίνουν bind στο στιγμιότυπο που δημιουργεί το View και περνάει ως όρισμα στην μέθοδο Create. Αυτά τα πεδία γίνονται exclude και γι' αυτό πρέπει να δοθούν στην μέθοδο τα επιπλέον ορίσματα που έχει το clipviewmodel. Σχετικά με την κλάση ClipViewModel, θα πρέπει να αναφερθεί ότι είναι μια υποδειγματική χρήση του MVVC μοντέλου ανάπτυξης. Θα μπορούσε να γίνει bind στο View η κλάση Clip (Model), αλλά αυτή έχει πεδία όπως το Fps (frame per second) και το Fingerprint, τα οποία δεν πρέπει να εμφανίζονται στο View μιας και ο χρήστης δεν μπορεί να τα εισάγει πληκτρολογώντας τα. Έτσι δημιουργήθηκε η κλάση ClipViewModel (ViewModel) που περιέχει μόνο τα πεδία που μπορεί να εισάγει ο χρήστης για να γίνει bind στο View και να περάσει ως όρισμα στην Create αντί της κλάσης Clip. 56

57 5.2 Βοηθητικές κλάσεις FrameInfos, FrameFingerprintExtractor Το σημαντικό σημείο που πρέπει να αναλυθεί είναι η εξαγωγή των πληροφοριών που αφορούν τα frames. Αυτό πραγματοποιείται στην μέθοδο doffmpeg στον κώδικα που ακολουθεί μετά την εκτέλεση του exe ffprobe, οι οποίες είναι: try FrameInfos framelist = JsonConvert.DeserializeObject<FrameInfos>(execResult); FrameFingerprintExtractor fingerprintextractor = new FrameFingerprintExtractor(frameList.frames); fingerprint = fingerprintextractor.generatefingerprint(out videoimagesinterval); catch (Exception ex) string strerror = ex.message; Η FrameInfos είναι η κλάση που σχεδιάστηκε για να αναπαριστά τα αποτελέσματα της εκτέλεσης, τα οποία έχουν την παρακάτω μορφή: "frames": [,, "pkt_pts_time": " ", "pkt_size": "13561", "pict_type": "I" "pkt_pts_time": " ", "pkt_size": "16575", "pict_type": "P" "pkt_pts_time": " ", "pkt_size": "72106", 57

58 "pict_type": "I", ] Στην σημειογραφία json (json notation), ό,τι περικλείεται σε άγκιστρα (...) αναπαριστά ένα αντικείμενο (object) και ό,τι περικλείεται σε τετράγωνες ακγύλες ([...]) αναπαριστά πίνακα. Από την μορφή που έχουν τα αποτελέσματα φαίνεται ότι αυτά είναι αντικείμενα τα οποία εμπεριέχονται στον πίνακα "frames":[...]. Παρακάτω φαίνεται ένα αντικείμενο "pkt_pts_time": " ", "pkt_size": "13561", "pict_type": "I" το οποίο περιέχει 3 μέλη, τα pkt_pts_time, pkt_size και pict_type. Παρουσιάζοντας παρακάτω την κλάση FrameInfos, η αντιστοιχία με τα πραγματικά αποτελέσματα θα γίνει προφανής. [JsonObject] public class FrameInfo [JsonProperty("pkt_pts_time")] public string pkt_pts_time get; set; [JsonProperty("pkt_size")] public string pkt_size get; set; [JsonProperty("pict_type")] public string pict_type get; set; [JsonObject] public class FrameInfos [JsonProperty("frames")] public List<FrameInfo> frames get; set; Παρατηρείται, σε αντιστοιχία με τα αποτελέσματα, ότι η FrameInfos είναι μια κλάση που 58

59 περιέχει ένα μέλος, το "frames" (την λίστα frames αντί του πίνακα στα json αποτελέσματα) και κάθε στοιχείο της λίστας είναι μια κλάση FrameInfo. Η κλάση FrameInfo περιέχει τα τρία μέλη όπως και τα αποτελέσματα. Και στις δύο κλάσεις δόθηκε η ιδιότητα [JsonObject], αλλά και στα μέλη των κλάσεων δόθηκε η ιδιότητα [JsonProperty("όνομα")] με όνομα ίδιο με αυτό της json μορφής των αποτελεσμάτων. Τώρα πλέον είναι εφικτή η χρήση της παρακάτω εντολής FrameInfos framelist = JsonConvert.DeserializeObject<FrameInfos>(execResult); η οποία κάνει deserialize, παίρνοντας τα αποτελέσματα της εκτέλεσης και επιστρέφοντας ένα αντικειμένο της κλάσης FrameInfos, που πλέον περιέχει τα αποτελέσματα με την μορφή αντικειμένων αντί για κείμενο. Για να μπορέσει να εξαχθεί εύκολα το fingerprint δημιουργήθηκε η κλάση FrameFingerprintExtractor, που παρουσιάζεται παρακάτω: public class FrameFingerprintExtractor List<FrameInfo> Frames get; set; public FrameFingerprintExtractor(List<FrameInfo> frames) Frames = frames; public int GetMaxFrameSize() if (Frames!= null) int maxsize = 0; foreach (FrameInfo fi in Frames) if(!string.isnullorempty(fi.pkt_size)) int locsize = Convert.ToInt32(fi.pkt_size); if (locsize > maxsize) maxsize = locsize; return maxsize; return 0; public string GenerateFingerprint(out List<int> secondforimagecapture) secondforimagecapture = new List<int>(); if (Frames!= null) StringBuilder fingerprint = new StringBuilder(); for (int i = 1; i < Frames.Count; i++) 59

60 if (!string.isnullorempty(frames[i-1].pkt_size) &&!string.isnullorempty(frames[i].pkt_size)) double framesizeminums = Convert.ToDouble(Frames[i-1].pkt_size); double framesizecurrent = Convert.ToDouble(Frames[i].pkt_size); int framesdiff = 0; if (framesizeminums > framesizecurrent) framesdiff = (int)((framesizeminums / framesizecurrent)); else if (framesizeminums < framesizecurrent) framesdiff = (int)((framesizecurrent / framesizeminums)); if (framesdiff > 95) double dtime = 0.0D; if (Double.TryParse(Frames[i].pkt_pts_time, out dtime)) TimeSpan ts = TimeSpan.FromSeconds(dTime); if(!secondforimagecapture.contains((int)ts.totalseconds)) secondforimagecapture.add((int)ts.totalseconds); fingerprint.append(framesdiff.tostring()); return fingerprint.tostring(); return null; Σε αυτή φαίνεται ότι ο μοναδικός constructor της παίρνει ως όρισμα μια λίστα από FrameInfo, η οποία έχει δημιουργηθεί στο προηγούμενο βήμα. Τώρα, έχοντας ένα στιγμιότυπο της κλάσης αρχικοποιημένο με μια λίστα από FrameInfo, μπορεί να εκτελεστεί η μέθοδος public string GenerateFingerprint(out List<int> secondforimagecapture) η οποία θα επιστρέψει το fingerprint και παράλληλα θα ανιχνεύσει σε ποια δευτερόλεπτα του βίντεο γίνεται αλλαγή σκηνής και θα τα τοποθετήσει στην λίστα secondforimagecapture. 60

61 5.3 Αναπαραγωγή Βίντεο Μια από τις δυνατότητες που προσφέρει η εφαρμογή είναι η αναπαραγωγή ενός βίντεο. Γενικά μια cshtml σελίδα η οποία απεικονίζει ένα στιγμιότυπο μιας κλάσης του μοντέλου, είναι εύκολο να αιτηθεί δεδομένα τα οποία θα παρουσιάσει, όταν αυτά τα δεδομένα επιστρέφουν σε μια κλήση μιας μεθόδου, δηλαδή με ένα request. Τι γίνεται όμως με τα δεδομένα ενός βίντεο που ενδεχομένως είναι πολλά σε όγκο πληροφορίας και δεν μπορούν να επιστρέψουν σε ένα request; Σε αυτή την ενότητα θα παρουσιαστεί η λειτουργία της αναπαραγωγής βίντεο και πώς γίνεται εφικτή η περίπτωση του streaming ενός βίντεο Εμφάνιση Αναπαραγωγής Βίντεο Παρακάτω φαίνεται ο κώδικας του αρχείου Play.cshtml, ο οποίος είναι αρκετά απλός κάνοντας χρήση του html tag Scripts <link rel="stylesheet" href="~/content/playerframework.min.css"> <script src="~/scripts/playerframework.min.js"></script> <h2>play</h2> <div class="caption"> </div> <video id="myvideo" class="pf-video" width="480" height="320" controls="controls" poster="c:\\workingdir\\output </video> <source "Clips", new id = Model.Id )" type=@model.contenttype> Αρχικά, στην πρώτη γραμμή τοποθετείται το Clip ως μοντέλο του View. Στην συνέχεια στο τμήμα των Scripts ορίζεται το αρχείο playerframework.min.js, με το οποίο γίνεται χρήση της class="pf-video". Το σημαντικό όμως είναι ότι δίνεται στην ιδιότητα src του html tag source ένα action από τον ClipsController, περνώντας ως όρισμα το id του βίντεο και ως type το ContentType του Clip. Εάν στο src tag δινόταν το path και το όνομα του βίντεο, τότε θα γινόταν η αναπαραγωγή του βίντεο χωρίς κανένα πρόβλημα, εάν το βίντεο ήταν μικρού 61

62 μήκους άρα και μεγέθους. Εάν βέβαια το βίντεο ήταν μεγάλου μήκους τότε η συγκεκριμένη πρακτική δεν θα είχε αποτέλεσμα Βοηθητική κλάση VideoResult Όπως αναφέρθηκε στην προηγούμενη παράγραφο, για να πραγματοποιηθεί η αναπαραγωγή βίντεο μεγάλου μεγέθους έπρεπε να γίνει χρήση της action Download του ClipsController στην γραμμή "Clips", new id = Model.Id )" Ο κώδικας της συγκεκριμένης μεθόδου είναι: public ActionResult Download(long? id) try Clip clip = (from cl in db.clips where cl.id == id select cl).first<clip>(); VideoResult vr = new VideoResult(clip.VideoPath, clip.actualname, VideoResult.PathType.Physical, null); return vr; catch (Exception ex) string m = ex.message; return null; Αρχικά χρησιμοποιήθηκε LINQ για να εξαχθεί από το id το Clip που πρέπει να αναπαραχθεί. Η τεχνολογία LINQ (Language INtegrated Query) είναι ένας ενοποιημένος τρόπος για να γίνονται ερωτήματα σε οποιαδήποτε πηγή δεδομένων. Με αυτόν τον ενοποιημένο τρόπο υπάρχει η δυνατότητα να εξαχθούν δεδομένα από βάσεις δεδομένων, από συλλογές αντικειμένων, από xml, κτλ. Στην συνέχεια δημιουργείται και επιστρέφεται ένα στιγμιότυπο της κλάσης VideoResult. H VideoResult είναι η κλάση που δημιουργήθηκε για να επιστρέφει κομμάτια πληροφορίας (chunks) του βίντεο, έτσι ώστε να είναι εφικτή η αναπαραγωγή βίντεο μεγάλου μήκους και όγκου πληροφορίας. Παρακάτω παρουσιάζεται ο πηγαίος κώδικας. public class VideoResult : ActionResult public const int BufferSize = ; // 1024 * 1000 = 1 MB chunk data public enum PathType Virtual, Physical public PathType FilePathType get; set; public string VirtualPath get; set; public string PhysicalPath get; set; 62

63 public string VideoName get; private set; public VideoResult(string videopath, string videoname, PathType pathtype, string virtualpath) FilePathType = pathtype; PhysicalPath = videopath; VideoName = videoname; VirtualPath = virtualpath; /// <summary> /// The below method will respond with the Video file /// </summary> /// <param name="context"></param> public override void ExecuteResult(ControllerContext context) System.IO.Stream istream = null; byte[] buffer = new Byte[BufferSize]; // Buffer to read 1M bytes in chunk int length; // Length of the file long datatoread; // Total bytes to read string filepath = ""; // Identify the file to download including its path. if (FilePathType == PathType.Physical) filepath = PhysicalPath; else filepath = context.httpcontext.server.mappath(this.virtualpath); name. string filename = System.IO.Path.GetFileName(filepath);// Identify the file try istream = new System.IO.FileStream( // Open the file. filepath, System.IO.FileMode.Open, System.IO.FileAccess.Read, System.IO.FileShare.Read); datatoread = istream.length; // Total bytes to read: filename); context.httpcontext.response.clear(); context.httpcontext.response.contenttype = "application/octet-stream"; context.httpcontext.response.addheader("content-disposition", "attachment; filename=" + bool disconnected = false; while (datatoread > 0) // Read the bytes. // Verify that the client is connected. if (context.httpcontext.response.isclientconnected) if (datatoread <= BufferSize) buffer = new byte[datatoread]; // Read the data in buffer. length = istream.read(buffer, 0, (int)datatoread); context.httpcontext.response.outputstream.write( 63

64 stream. stream. buffer, 0, length);// Write the data to the current output context.httpcontext.response.end(); datatoread = datatoread - length; else // Read the data in buffer. length = istream.read(buffer, 0, BufferSize); context.httpcontext.response.outputstream.write( buffer, 0, length);// Write the data to the current output context.httpcontext.response.flush(); // Flush the data to the HTML output. download buffer = new Byte[BufferSize]; datatoread = datatoread - length; else datatoread = -1; //prevent infinite loop if user disconnects disconnected = true;//record if the user disconnected during //if the user didn't disconnect then save to history if (disconnected == false) //some code to record the file download was successful... catch (Exception ex) // Trap the error, if any. context.httpcontext.response.write("error : " + ex.message); finally Ο κώδικας της κλάσης είναι αρκετά επεξηγηματικός ως έχει και γι' αυτό θα επισημανθούν μόνο τα σημαντικά σημεία. Η κλάση επεκτείνει την ActionResult, έτσι μπορεί να κάνει υπερκάλυψη (override) την μέθοδο ExecuteResult παίρνοντας ως παράμετρο τύπου ControllerContext. Ο ControllerContext δίνει πρόσβαση στα περιεχόμενα του Http Response με αποτέλεσμα να μπορούν να εκτελεστούν οι παρακάτω γραμμές κώδικα context.httpcontext.response.clear(); context.httpcontext.response.contenttype = "application/octet-stream"; context.httpcontext.response.addheader("content-disposition", "attachment; filename=" + filename); απλά μεταβάλλοντας την κεφαλίδα (header) της http απάντησης και θέτοντας την application/octet-stream 64

65 και επίσης στην επόμενη εντολή AddHeader("Content-Disposition", "attachment; filename=" + filename); δίνεται το όνομα του αρχείου που θα στείλουμε ως stream. Μέσα στο while loop διαβάζεται από το αρχείο το κομμάτι δεδομένων και τοποθετείται στο Output Stream του http response. context.httpcontext.response.outputstream.write(buffer, 0, length); Στη συνέχεια κλείνεται το response για να αποσταλούν τα δεδομένα στον αιτούντα context.httpcontext.response.end(); Οι δύο τελευταίες εντολές επαναλαμβάνονται μέχρι να διαβαστεί ολόκληρο το αρχείο. 5.4 Code Metrics Μια από τις πολλές επιλογές που προσφέρει το Visual Studio είναι η ανάλυση του κώδικα και η καταμέτρηση των συνολικών γραμμών κώδικα. Όπως παρουσιάζεται και στην εικόνα 30, ο συνολικός αριθμός γραμμών κώδικα είναι 1.136, σε αυτό τον αριθμό δεν συμπεριλαμβάνονται τα σχόλια, οι σελίδες cshtml αλλά ούτε και τα αρχεία script (.js) και μορφοποίησης (.css), καθώς μαζί με αυτά, ο συνολικός αριθμός γραμμών φτάνει περίπου τις γραμμές. Με αυτά τα δεδομένα, δεν θα μπορούσε να συμπεριληφθεί ή και να σχολιαστεί ολόκληρος ο κώδικας στο παρόν έγγραφο. Επιλέχτηκαν αντιπροσωπευτικά κομμάτια κώδικα ενδεικτικά της λειτουργίας του ASP.NET MVC μοντέλου αλλά και καίρια για την λειτουργία της εφαρμογής. 65

66 Εικόνα 30 - Total Lines of Code 66