Secara singkat MediaStream adalah sebuah interface yang mewakili konten media yang dapat diisi ataupun didalamnya terdapat MediaStreamTrack. Agar mudah memahaminya kita sebut saja MediaStream adalah sebuah container yang dapat menampung banyak tracks dan track tersebut berupa Audio ataupun Video. Jika di visualisasikan maka gambarannya seperti yang tertera diatas.
Pendahuluan
Dalam dunia digital yang terus berkembang, penggunaan media multimedia seperti audio dan video telah menjadi bagian integral dari pengalaman online kita. MediaStream adalah salah satu fitur penting dalam pengembangan aplikasi web yang memungkinkan kita untuk mengakses dan memanipulasi data audio dan video secara real-time. Dalam artikel ini, kita akan menjelajahi konsep MediaStream, bagaimana cara kerjanya, dan berbagai penerapannya dalam pengembangan aplikasi web.
MediaStream adalah antarmuka dalam WebRTC (Web Real-Time Communication) yang digunakan untuk mengakses aliran data media, seperti audio atau video, dari perangkat pengguna. MediaStream memungkinkan aplikasi web untuk mengakses dan mengelola data media real-time, sehingga memungkinkan komunikasi audio dan video langsung antara perangkat yang berbeda melalui web.
Dalam sebuah MediaStream terdiri dari salah satu atau beberapa trek media, seperti trek audio atau trek video. Setiap trek media berisi aliran data media yang terkait, misalnya, trek audio akan berisi data audio, sedangkan trek video akan berisi data video. MediaStream juga dapat mengandung trek tambahan, seperti trek data yang digunakan untuk mengirim metadata atau data lainnya.
Definisi dan Konsep Dasar
MediaStream adalah antarmuka JavaScript yang memungkinkan aplikasi web untuk mengakses, merekam, dan memutar data audio dan video. Konsep dasar dalam MediaStream meliputi:
- Track: MediaStream terdiri dari satu atau lebih track, yaitu entitas yang mewakili aliran data audio atau video. Setiap track dapat memiliki jenis yang berbeda, seperti audio atau video, dan memiliki parameter dan properti yang terkait.
- MediaStream API: MediaStream API adalah kumpulan metode dan properti yang digunakan untuk mengakses, mengontrol, dan memanipulasi MediaStream. API ini memungkinkan kita untuk merekam, memutar, mengatur volume, atau melakukan operasi lain pada aliran data audio dan video.
- GetUserMedia: Metode GetUserMedia() adalah salah satu fitur utama dari MediaStream API. Metode ini digunakan untuk meminta izin pengguna dan mengakses perangkat media seperti mikrofon dan kamera. Dengan menggunakan GetUserMedia(), kita dapat merekam audio dan video secara langsung dari perangkat pengguna.
Apa Fungsinya?
Fungsi dari MediaStream ini adalah untuk berkomunikasi dengan media yang tersedia pada device / perangkat. Contohnya adalah komputer ataupun handphone pasti memiliki yang namanya camera dan microphone. Jika kita ingin mengakses salah satu ataupun kedua hardware tersebut maka kita bisa menggunakan fitur ini.
Penerapan MediaStream dalam Pengembangan Aplikasi Web
MediaStream memiliki berbagai penerapan dalam pengembangan aplikasi web, di antaranya:
- Video Conference: Dengan menggunakan MediaStream, aplikasi web dapat memungkinkan pengguna untuk melakukan konferensi video secara real-time. Hal ini memungkinkan kolaborasi jarak jauh, pertemuan bisnis, atau komunikasi tatap muka yang lebih dekat.
- Perekaman Audio dan Video: MediaStream memungkinkan aplikasi web untuk merekam audio dan video langsung dari perangkat pengguna melalui GetUserMedia(). Fitur ini dapat digunakan untuk membuat aplikasi perekaman suara, pengenalan suara, atau aplikasi pengeditan video yang sederhana.
- Augmented Reality (AR) dan Virtual Reality (VR): MediaStream memainkan peran penting dalam pengembangan aplikasi AR dan VR di web. Dengan mengakses kamera perangkat pengguna, MediaStream memungkinkan pengalaman visual dan interaktif yang imersif dalam aplikasi web.
- Analisis Media: Dengan MediaStream, aplikasi web dapat menganalisis data audio dan video secara real-time. Misalnya, penggunaan MediaStream dalam aplikasi deteksi emosi, pengenalan wajah, atau pengenalan suara.
Adapun beberapa method yang dapat digunakan pada MediaStream adalah sebagai berikut :
- addTrack : Digunakan saat ingin menambahkan track ke dalam MediaStream.
- removeTrack : Digunakan untuk menghapus track yang tersedia di MediaStream.
- clone : Digunakan untuk melakukan cloning / menggandakan interface MediaStream.
- getTrackById : Digunakan untuk mengambil track berdasarkan ID yang ditentukan.
- getTracks : Digunakan untuk mengambil seluruh track yang tersedia.
- getAudioTracks : Digunakan untuk mengambil seluruh track hanya yang bertipe audio.
- getVideoTracks : Digunakan untuk mengambil seluruh track hanya yang bertipe video.
Bagaimana Cara Penggunaannya?
Sebagai contoh kita ingin implementasikan ke dalam aplikasi sederhana menggunakan HTML.
Source Code #1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediaStream</title>
</head>
<body>
<!-- Video element -->
<video id="local-video" style="border: 1px solid blue;" height="300" width="600"></video>
<!-- / Video element -->
<p>
<button type="button" onclick="loadStream()">Buka Webcam</button>
<button type="button" onclick="loadStream(false)">Buka Screen Sharing</button>
</p>
<script type="text/javascript">
const getMediaDevice = (audio, video, webcam = true) => {
if (webcam) {
return navigator.mediaDevices.getUserMedia({
audio,
video,
})
} else {
return navigator.mediaDevices.getDisplayMedia({
audio,
video,
})
}
}
const videoElement = document.getElementById('local-video');
const loadStream = (webcam = true) => {
getMediaDevice(true, true, webcam).then((mediaStream) => {
videoElement.srcObject = mediaStream;
videoElement.play();
});
}
</script>
</body>
</html>
Output :
Penjelasan Source Code #1 :
Pada function getMediaDevice saya membuat sebuah conditional function yang mana jika nilai dari parameter webcam ada true maka akan mengambil webcam device tapi jika nilainya berisikan false maka akan mengambil screen / layar yang kita gunakan.
Maka dari source code #1 jika kita jalankan akan menampilkan mengambil serta menampilkan audio dan video yang diambil. Lalu bagaimana jika kita ingin mengambil hanya video saja? nah berikut ini source code yang bisa kalian terapkan :
Source code #2 :
const loadStream = (webcam = true) => {
const localStream = new MediaStream();
getMediaDevice(true, true, webcam).then((stream) => {
const audioTrack = stream.getAudioTracks(); // extract audio tracks
const videoTrack = stream.getVideoTracks(); // extract video tracks
localStream.addTrack(videoTrack[0]);
videoElement.srcObject = localStream;
videoElement.play();
});
}
Penjelasan Source Code #2 :
Pada source code kedua kita melakukan ekstrak tracks dari MediaStream kemudian memasukkan track yang kita ambil ke dalam penampung MediaStream yang baru yang di inisialisasikan pada variabel const localStream = new MediaStream(); lalu mengganti nilai pada videoElement.srcObject menjadi videoElement.srcObject = localStream;
Keuntungan MediaStream
Penggunaan MediaStream dalam pengembangan aplikasi web memiliki beberapa keuntungan, antara lain:
- Akses Perangkat: MediaStream memungkinkan akses langsung ke perangkat media seperti kamera dan mikrofon pengguna. Hal ini memberikan fleksibilitas dalam penggunaan media audio dan video dalam aplikasi web.
- Real-time: MediaStream memungkinkan pemrosesan dan manipulasi data audio dan video secara real-time. Hal ini penting dalam pengembangan aplikasi yang memerlukan interaksi dan respons cepat.
- Kompatibilitas: MediaStream didukung oleh sebagian besar browser modern, sehingga memungkinkan pengembang untuk membuat aplikasi web yang kompatibel dengan banyak platform.
Kesimpulan
MediaStream adalah fitur yang kuat dalam pengembangan aplikasi web yang memungkinkan akses, manipulasi, dan pemrosesan data audio dan video secara real-time. Dengan menggunakan MediaStream, kita dapat membuat aplikasi yang interaktif, seperti konferensi video, perekaman audio dan video, AR dan VR, serta aplikasi analisis media. Dukungan yang luas dari browser modern menjadikan MediaStream sebagai alat yang penting dalam menghadirkan pengalaman multimedia yang kaya dalam aplikasi web kita.
Refrensi :