Pages

Senin, 12 Januari 2015

Video Streaming Berbasis Web dengan XAMPP

1. Landasan Teori
1.1 Pengertian Video Streaming
    Video streaming adalah istilah yang sering kita gunakan saat melihat video diinternet melalui browser dimana kita tidak perlu men-download file video tersebut untuk dapat memutarnya. Istilah ini tersebut terdiri dari dua suku kata yaitu video dan streaming, secara istilah video berarti teknologi untuk menangkap, merekam, memproses, mentransmisikan dan menata ulang gambar bergerak, sedangkan streaming berarti proses penghantaran data dalam aliran berkelanjutan dan tetap yang memungkinkan pengguna mengakses dan menggunakan file sebelum data dihantar sepenuhnya.
   Jadi video streaming dapat diartikan transmisi file video secara bekelanjutan yang memungkinkan video tersebut diputar tanpa menunggu file video tersebut tersampaikan secara keseluruhan.
    Video streaming banyak diimplementasikan pada dunia pertelevisian untuk melakukan siaran dari website atau mengirimkan gambar siaran langsung melalui website atau disebut juga live streming. Jadi gambar yang didapatkan dari siaran langsung, sesegera mungkin ditransmisikan dan dapat diputar melalui internet.
(dikutip dari riccoroviandy.blogspot.com/2013/01/pengertian-video-streaming.html))

1.2 Pengenalan XAMPP 
    XAMPP  adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.


    Software yang merupakan software web server apache yang di dalamnya sudah terdapat database seperti mysql, php dan masih banyak lagi. Kelebihan software web server XAMPP ini di banding dengan software web server lain adalah dalam satu kali install software ini telah sekaligus terinstall Apache Web Server, MySQL Database Server, PHP Support.
Apache
Software ini bisa kita dapatkan secara gratis, dan bersifat open source. Atau dalam artian 
kita dapat menggunakan dan mengubah script secara gratis. Fungsi dari Apache adalah menampilkan halaman web sesuai dengan script php yang telah di buat sebelumnya.
PHP
Merupakan bahasa pemograman yang sering di gunakan untuk web server. PHP memungkinkan pengguna atau user untuk membuat web dinamis (dapat di ubah). PHP dapat berkerja di berbagai macam Operating System seperti, windows, linux, mac os, dan lainnya. Sama halnya dengan Apache, software ini juga bisa di dapatkan secara gratis.
MySQL
SQL atau Structured Query Language merupakan software yang khusus di gunakan untuk mengolah database. Hal ini memungkinkan SQL untuk dapat menambah, mengubah, menghapus data yang terdapat dalam database. SQL merupakan software yang bersifat rational atau dalam artian program ini menggunakan tabel data untuk memisahkan beberapa data yang memungkinkan untuk menghindari duplicate data.
PHPmyAdmin
Dengan fitur PHPmyAdmin ini, kita akan dapat dengan mudah membuat baris data ataupun database tanpa harus mengingat perintah-perintahnya. 
(dikutip dari http://id.wikipedia.org/wiki/XAMPP)
(dikutip dari http://grajaganseo.blogspot.com/2013/12/pengertian-xampp-dan-manfaatnya.html)

2. Langkah-Langkah Kerja
1. Lakukan penginstallan XAMPP pada Windows yang ada di PC


2. Jika installan selesai, selanjutnya buka XAMPP Control Panel maka akan tampak jenis -  jenis modul service yang disediakan oleh XAMPP. Kemudian aktifkan Module Apache dengan cara klik start pada Actions. Maka akan sesuai dengan tampilan seperti berikut :

-Gambar sebelum Module Apache diaktifkan


-Gambar setelah Module Apache diaktifkan


3. Selanjutnya masuk folder tempat penyimpanan XAMPP, untuk XAMPP yang ada di Windows Penulis terletak pada Computer kemudian Local Disk (C:) kemudian xampp2 kemudian htdocs, tambahkan folder baru dengan nama Video seperti tampilan berikut :

Tujuan dari penambahan folder video ini adalah sebagai tempat penyimpanan video dan file html yang akan berfungsi untuk proses streaming video lewat web.

4. Di dalam folder video, silahkan memasukkan file video yang akan di sharing dan format text html yang akan dimunculkan pada web nanti.


5. Untuk isi format text html yang diberi nama tes.html seperti tampilan berikut :


Catatan : Perlu diperhatikan bahwa judul video pada file html harus sama dengan nama file video yang akan dishare.

6. Video yang akan dishare selanjutnya akan diputar menggunakan aplikasi vlc. Lakukan pengecekan pada mozilla firefox apakah sudah aplikasi vlc-nya ter integrasi terhadap mozilla firefox dengan cara mengklik tools kemudian add-ons kemudian plugins. Jika sudah terintegrasi, akan keluar tampilan seperti berikut :


Catatan : Sebelumnya aplikasi VLC penulis belum ter integrasi karena VLC yang penulis install masih versi lama, sehingga harus diganti dengan versi baru agar bisa ter integrasi dengan mozilla firefox.

7. Selanjutnya kita mencoba melihat apakah file video yang anda share dapat diakses dengan memasukkan alamat webnya yaitu localhost/video/tes.html, maka akan muncul tampilan seperti berikut :


 8. Selanjutnya klik tombol play untuk menjalankan video streaming yang sharing tadi. Jika tampilan seperti berikut maka video streaming via web telah berhasil.


9. Jika langkah diatas untuk menampilkan satu file video, maka berikut merupakan langkah untuk menampilkan 3 file pilihan video yang dapat dipilih. Langkah - langkah yang perlu ditambahkan adalah menambahkan file html dan 2 file video lagi ke dalam folder video. File html yang ditambahkann terdiri dari list dimana berisi html untuk memilih video yang diinginkan dan juga html yang berisi content dari variasi video yang akan dishare. Berikut tampilan file html dan file video yang penulis tambahkan ke folder video :


10. Selanjutnya buat isi file html bernama list seperti tampilan berikut. Perlu diperhatikan bahwa judul video pada list html harus sama dengan judul file video yang disimpan pada folder video tadi.


11. Jika langkah - langkah diatas telah diikuti, maka dapat melakukan percobaan berhasil atau tidaknya konfigurasi yang dilakukan. Caranya masukkan dns pada browser seperti tampilan berikut :


12. Selain itu bisa juga mengakses video yang dishare orang lain dengan cara memasukkan alamat IP yang dimiliki PC orang tersebut. Berikut tampilan dari penggunaan IP Address dari Web punya orang lain :


Demikian langkah - langkah mengkonfigurasi atau membangun video streaming berbasis web dengan XAMPP, terima kasih dan semoga bermanfaat.

4 komentar:

  1. selain vlc apakah bisa diakses lewat hape?

    BalasHapus
  2. nomer nomer 172 dan seterusnya dapat dari mana

    BalasHapus
  3. ternyata bisa mengkonfigurasi atau membangun video streaming berbasis web dengan XAMPP, terima kasih dan sangat bermanfaat.
    My blog

    BalasHapus