Modul Analisa Video Streaming dengan HTML 5

Ukuran: px

Mulai penontonan dengan halaman:

Download "Modul Analisa Video Streaming dengan HTML 5"

Hartanti Hardja
6 tahun lalu
Tontonan:

1 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

2 <html> <head> <title>file Video</title> </head> <body> <p> <video src="tcp_ip.mp4" controls> Browser tidak support. </video> </p> </body> </html> 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 : 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

Tuliskan Througput dari koneksi client-server tersebut. Untuk melakukan analisis parameter throughput, klik tab statistics summary.

3 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

4 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

5 Klik Finish Klik OK maka anda akan mendapatkan tampilan data seperti berikut ini : 5

6 Disamping kolom info lakukan perhitungan delay. Delay diperoleh dari selisih waktu antara paket data ke-1 dan ke-2, ke-2 dan ke-3, ke- 3 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 : <video src="tcp_ip.mp4" controls>, dimana nama tcp_ip,mp4 akan diganti dengan nama file video format lain. 3. Setiap server merubah file video yang ditayangkan, client mengkuti dengan melakukan langkah dan analisa yang sama dengan file video sebelumnya. 4. Hasil akhir dari file EXCELL adalah 3 sheet data dari masing-masing video yang di analisa. LAPORAN RESMI 1. Buat laporan terpisah pada dokumen WORD, dengan mencantumkan header adalah NAMA, NIM dan KELAS. 2. Isi laporan adalah : a. SCREEN SHOOT tampilan wireshark setiap file video yang ditayangkan (3 video 3 screen shoot) 6

7 b. Jawaban dari pertanyaan pada Bab D Analisa menggunakan Wireshark, serta data delay setiap video c. Kesimpulan hasil praktikum yang anda lakukan sesuai dengan tipe file video yang diputar pada server. 3. UPLOAD file Laporan (format WORD) dan file data delay (format EXCEL), ke tempat yg sudah disediakan di learning. 7

dokumen-dokumen yang mirip

MODUL 3 VIDEO STREAMING DGN HTML5

MODUL 3 VIDEO STREAMING DGN HTML5 TUJUAN PEMBELAJARAN: 1. Mengenalkan pada mahasiswa tentang konsep streaming pada HTML5 2. Mengenalkan pada mahasiswa tentang analisa paket dan perhitungan QoS DASAR TEORI