Web API HTMLMediaElement captureStream() Method
source link: https://www.geeksforgeeks.org/web-api-htmlmediaelement-capturestream-method/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Web API HTMLMediaElement captureStream() Method
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.
<!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.
<!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:
“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank
With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.
So get ready for salary hike only with our Full Stack Development Course.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK