saiprasad1996/videostreamcapture.html

## videostreamcapture.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=720, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Audio recording test</title>
</head>
<body>

    <video id="src" src="chrome.webm"></video>

    <video id="dest"></video>
    <audio controls id="audio"></audio>

    <button id="start" onclick="start()">start</button>
    <button id="stop" onclick="stop()">stop</button>
    <button id="play" onclick="play()">play</button>

    <script type="text/javascript">

        let stream = null;
        let chunks = [];
        let recorder = null;

        let srcvideo = document.getElementById('src')
        let destvideo = document.getElementById('dest')
        let audiotag = document.getElementById('audio')

        async function start(){
            let datastream = srcvideo.captureStream()
            stream = new MediaStream([...datastream.getAudioTracks()])
            recorder = new MediaRecorder(stream,{mimeType:'audio/webm'})
            srcvideo.play()
            recorder.start()
            recorder.addEventListener('dataavailable',(event)=>{
                chunks.push(event.data)
            })


            recorder.addEventListener('stop',()=>{
                srcvideo.stop()
                const blob = new Blob(chunks)
                let url = URL.createObjectURL(blob,{type:'audio/webm'})
                audiotag.src = url

            })
        }

        function stop(){
            recorder.stop()
        }

        function play(){
            audiotag.play()
        }


    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=720, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Audio recording test</title>
	</head>
	<body>

	<video id="src" src="chrome.webm"></video>

	<video id="dest"></video>
	<audio controls id="audio"></audio>

	<button id="start" onclick="start()">start</button>
	<button id="stop" onclick="stop()">stop</button>
	<button id="play" onclick="play()">play</button>

	<script type="text/javascript">

	let stream = null;
	let chunks = [];
	let recorder = null;

	let srcvideo = document.getElementById('src')
	let destvideo = document.getElementById('dest')
	let audiotag = document.getElementById('audio')

	async function start(){
	let datastream = srcvideo.captureStream()
	stream = new MediaStream([...datastream.getAudioTracks()])
	recorder = new MediaRecorder(stream,{mimeType:'audio/webm'})
	srcvideo.play()
	recorder.start()
	recorder.addEventListener('dataavailable',(event)=>{
	chunks.push(event.data)
	})


	recorder.addEventListener('stop',()=>{
	srcvideo.stop()
	const blob = new Blob(chunks)
	let url = URL.createObjectURL(blob,{type:'audio/webm'})
	audiotag.src = url

	})
	}

	function stop(){
	recorder.stop()
	}

	function play(){
	audiotag.play()
	}





	</script>
	</body>
	</html>