Web API HTMLMediaElement captureStream() Method

Last Updated : 22 Jul, 2024

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">
        GeeksforGeeks
    </h1>
    <h3>
        HTMLMediaElement API captureStream method
    </h3>
    <video id="video" 
           style="height: 250px; 
                  width: 400px;" 
           onplay="playHandler()" crossorigin controls
           src="GeeksforGeeks.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">
        GeeksforGeeks
    </h1>
  
    <h3> 
        HTMLMediaElement API captureStream method
    </h3>
  
      <video id="video" 
           style="height: 250px; 
                  width: 400px;" 
           onplay="playHandler()" crossorigin controls
           src="GeeksforGeeks.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:

Web StyleElement API | StyleElement media property

aayushmohansinha

Improve

Article Tags :

Web API HTMLMediaElement captureStream() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?