Web API HTMLMediaElement captureStream() Method

0 0 1 minute read

The HTMLMediaElement API provides the properties and methods required to implement fundamental media-related capabilities that are common to audio and video. The captureStream() method is used to perform a real-time capture of the content being rendered in the media element.

Syntax:

captureStream()

Parameters: This method doesn’t accept any parameter.

Return Value: It returns the MediaStream object, which can be utilized for other media processing code, as a source for audio and/or video.

Example 1: This example illustrates the basic usage of the HTMLMediaElement.captureStream() method.

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align: center;"> 
    <h1 style="color:green"> 
        zambiatek 
    </h1> 
    <h3> 
        HTMLMediaElement API captureStream method 
    </h3> 
    <video id="video" 
           style="height: 250px;  
                  width: 400px;"  
           onplay="playHandler()" crossorigin controls 
           src="zambiatek.mp4"> 
        Browser not supported 
    </video> 
    <script> 
        function playHandler() { 
            let video = document.getElementById('video'); 
            let stream = video.captureStream(); 
            console.log(stream); 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: This example illustrates the use of the HTMLMediaElement.captureStream() method, where we are extracting the audio from its video.

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align: center;"> 
    <h1 style="color:green"> 
        zambiatek 
    </h1> 
    
    <h3>  
        HTMLMediaElement API captureStream method 
    </h3> 
    
      <video id="video" 
           style="height: 250px;  
                  width: 400px;"  
           onplay="playHandler()" crossorigin controls 
           src="zambiatek.mp4"> 
        Browser not supported 
    </video> 
    
    <script> 
        function playHandler() { 
            let video = document.getElementById('video'); 
            let videoStream = video.captureStream(); 
            const audioTrack = videoStream.getAudioTracks()[0]; 
            const audioStream = new MediaStream(); 
            audioStream.addTrack(audioTrack); 
            const audio = document.createElement("audio"); 
            audio.controls = true; 
            document.body.append(audio); 
            audio.srcObject = audioStream; 
            audio.volume = 1.0; 
        } 
    </script> 
</body> 
  
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!