Modul Analisa Video Streaming dengan HTML 5 Streaming adalah sebuah teknologi untuk memaninkan file video atau audio secara langsung ataupun dengan pre-recorder dari sebuah mesin server (web server). Dengan kata lain, file video ataupun audio yang terletak dalam sebuah server dapat secara langsung dijalankan pada UE sesaat setelah ada permintaan dari user, sehingga proses running aplikasi yang didownload berupa waktu yang lama dapat dihindari tanpa harus melakukan proses penyimpanan terlebih dahulu. Saat file video atau audio di stream, akan berbentuk sebuah buffer di komputer client, dan data video - audio tersebut akan bulai di download ke dalam buffer yang telah terbentuk pada mesin client. Dalam waktu sepersekian detik, buffer telah terisi penuh dan secara otomatis file videoaudio dijalankan oleh sistem. Sistem akan membaca informasi dari buffer dan tetap melakukan proses download file, sehingga proses streaming tetap berlangsung. Cara simple dan gampang memahaminya, Video adalah sebuah file yang biasanya adalah yang hanya dibuka dan dimainkan oleh aplikasi multimedia yang digunakan seperti Windows Media Player, Winamp, dan lain sebagainya, yang dimaksud dengan video streaming adalah Anda bisa melihat langsung video pada satu halaman web tanpa harus download terlebih dahulu,
A. Software Praktikum 1. Sisi Server i. Windows 7 + XAMPP ii. File Video dengan format : mp4, ogv, webm 2. Sisi Client i. Web Browser (mendukung HTML 5) ii. Wireshark
B. Yang dilakukan di sisi SERVER (Web HTML 5) 1. Pastikan terdapat XAMPP disisi server. 2. Di dalam folder C:\xampp\htdocs, buatlah sebuah folder baru dengan nama video. 3. Di dalam folder video tersebut buatlah file HTML 5 untuk menampilkan data video sebagai berikut :
1
File Video
4. Simpan sebagai file : index.html (masih berada di folder C:\xampp\htdocs\video) 5. Copykan seluruh file-file video yang sudah disediakan di learning ke dalam C:\xampp\htdocs\video (yg terpenting file video berada dalam satu folder bersama file index.html yang telah anda buat) 6. Aktifkan xampp dan web server siap diakses dari PC client.
C. Yang dilakukan di sisi CLIENT (Analisa QoS dengan wireshark ) 1. Buka web browser (Chrome), dan ketikkan IP Adress PC teman anda dengan diikuti nama folder video a. Contoh : http://192.168.10.5/video 2. Setelah berhasil akses video dari server, lakukan CLEAR HISTORY web browser anda, termasuk CLEAR Cookie. Kemudian TUTUP Web Browser. 3. Jalankan WIRESHARK a. Pilih tab edit preference (atau klik gambar obeng bersilang dibagian atas) b. Lalu pada pilihan 'user interface' klik 'columns' c. Pada pilihan paling bawah yaitu 'info' ganti ‘Field Type = information’ menjadi 'Field Type = time (format as specified)'. d. Klik ‘Apply’ dan ‘OK’ e. Pilih Tab ‘Capture’ | ‘Interfaces’ , Klik START pada baris yg sama dengan nama Ethernet PC anda tercantum. f. Maka Wireshark sekarang sudah dalam posisi Listening siap menangkap data yang lewat melalui Ethernet. 4. Buka kembali browser yang support html5 untuk koneksi ke server, akses kembali server seperti yang dilakukan pada langkah 1 di atas. 5. Jalankan video sampai selesai 6. Pastikan Wireshark telah menangkap data yang muncul. Contoh seperti gambar berikut :
2
7. Buat SCREEN SHOOT dari tampilan Wireshark yang sdh berhasil menangkap data. 8. Setelah video selesai,stop wireshark, dengan memilih Tab ‘Capture’ | ‘Interfaces’ ..klik STOP.
D. Analisa paket data pada wireshark (pada sisi CLIENT) 1. Tuliskan Througput dari koneksi client-Server tersebut. Untuk melakukan analisis parameter throughput, klik tab ‘statistics’ | ‘summary’. Cari informasi seperti gambar berikut :
2. Catat delay yang dihasilkan. Untuk mencari delay Masih dalam posisi Wireshark stop dan menampilkan data hasil capture.
Pilih Tab 'File' | 'export' | ‘file’ lalu save as type csv (*.csv). Beri nama file analisa1. Klik ‘Save’. 3
Buka microsoft office EXCEL untuk membuka file yg telah disimpan.
Pilih tab ‘Data’ | ‘From Text’, pilih ‘All File’ dan cari file analisa1.csv. Import. sehingga akan muncul tampilan sebagai berikut :
Klik ‘Next’
Pilih ‘Comma’ dan klik Next.
4
Klik ‘Finish’
Klik ‘OK’ maka anda akan mendapatkan tampilan data seperti berikut ini :
5
Disamping kolom info lakukan perhitungan delay. Delay diperoleh dari selisih waktu antara paket data ke-1 dan ke-2, ke-2 dan ke-3, ke3 dan ke-4, dst. Untuk kemudian di hitung rata-rata keseluruhannya, maka akan didapat delay total dari komunikasi videao client-server tersebut. (perhatikan petunjuk instruktur untuk hal ini)
E. Langkah Lanjutan 1. Ulangi proses yang dilakukan di SERVER dan CLIENT untuk video dengan format yang lain (yang telah disediakan). 2. File index.html pada sisi Server akan dirubah pada baris :
