MediaStream in HTML5

The MediaStream represents synchronized streams of media content in HTML5. It provides access to audio and video tracks from sources like microphones and webcams. When there are no audio tracks, it returns an empty array, and for video streams, if a webcam is connected, stream.getVideoTracks() returns an array containing MediaStreamTrack objects representing the webcam stream.

Getting User Media Access

The navigator.mediaDevices.getUserMedia() method is the modern way to access media streams. It returns a Promise that resolves with a MediaStream object:

<button onclick="startAudio()">Start Audio</button>
<div id="output"></div>

<script>
async function startAudio() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({audio: true});
        
        // Create audio context
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        
        // Create audio source from stream
        const mediaStreamSource = audioContext.createMediaStreamSource(stream);
        
        // Connect to destination (speakers)
        mediaStreamSource.connect(audioContext.destination);
        
        document.getElementById('output').innerHTML = 'Audio stream started successfully!';
    } catch (error) {
        document.getElementById('output').innerHTML = 'Error: ' + error.message;
    }
}
</script>

Accessing Video Stream

You can also access video streams from the user's camera:

<button onclick="startVideo()">Start Video</button>
<video id="videoElement" width="320" height="240" autoplay muted></video>

<script>
async function startVideo() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({video: true});
        const video = document.getElementById('videoElement');
        
        video.srcObject = stream;
        
        // Check video tracks
        const videoTracks = stream.getVideoTracks();
        console.log('Video tracks found:', videoTracks.length);
        
    } catch (error) {
        console.log('Error accessing video:', error.message);
    }
}
</script>

Working with MediaStream Tracks

MediaStream objects contain tracks that can be manipulated individually:

<button onclick="analyzeStream()">Analyze Stream</button>
<div id="trackInfo"></div>

<script>
async function analyzeStream() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            audio: true, 
            video: true
        });
        
        const audioTracks = stream.getAudioTracks();
        const videoTracks = stream.getVideoTracks();
        
        let info = `<h3>Stream Analysis:</h3>`;
        info += `<p>Audio tracks: ${audioTracks.length}</p>`;
        info += `<p>Video tracks: ${videoTracks.length}</p>`;
        
        if (audioTracks.length > 0) {
            info += `<p>Audio track label: ${audioTracks[0].label}</p>`;
        }
        
        if (videoTracks.length > 0) {
            info += `<p>Video track label: ${videoTracks[0].label}</p>`;
        }
        
        document.getElementById('trackInfo').innerHTML = info;
        
    } catch (error) {
        document.getElementById('trackInfo').innerHTML = 'Error: ' + error.message;
    }
}
</script>

MediaStream Methods

Key methods available on MediaStream objects:

Browser Compatibility

Modern browsers support navigator.mediaDevices.getUserMedia(). For older browsers, you may need to use the legacy navigator.getUserMedia() with vendor prefixes.

Conclusion

MediaStream provides powerful access to user's audio and video devices in HTML5. Use the modern Promise-based getUserMedia() API for reliable media stream handling in web applications.