prof3ssorSt3v3/media-capture.html

## media-capture.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Video &amp; Audio Input</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css">
    <style>
        p>audio,
        p>video,
        p>img{
            max-width:90%;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 Video &amp; Audio Input</h1>
        <h2>Capturing Media with HTML</h2>
    </header>
    <main>
        <form action="#" id="myform" enctype="multipart/form-data">
            <label for="capture">Capture Media</label>

            <input type="file"
            id="capture"
            accept="image/*,video/*,audio/*"
            capture
            multiple />

            <br/>
            <input type="submit" value="Process" />
        </form>
        <p><img src="" id="img" alt="from phone"/></p>
        <p>
            <audio src="" id="audio" controls></audio>
        </p>
        <p>
            <video src="" id="video" controls></video>
        </p>
    </main>
    <script>

        document.addEventListener('DOMContentLoaded', (ev)=>{
            let form = document.getElementById('myform');
            //get the captured media file
            let input = document.getElementById('capture');

            input.addEventListener('change', (ev)=>{
                console.dir( input.files[0] );
                if(input.files[0].type.indexOf("image/") > -1){
                    let img = document.getElementById('img');
                    img.src = window.URL.createObjectURL(input.files[0]);
                }
                else if(input.files[0].type.indexOf("audio/") > -1 ){
                    let audio = document.getElementById('audio');
                    audio.src = window.URL.createObjectURL(input.files[0]);
                }
                else if(input.files[0].type.indexOf("video/") > -1 ){
                    let video = document.getElementById('video');
                    video.src=window.URL.createObjectURL(input.files[0]);
                }


            })

        })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HTML5 Video & Audio Input</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="main.css">
	<style>
	p>audio,
	p>video,
	p>img{
	max-width:90%;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>HTML5 Video & Audio Input</h1>
	<h2>Capturing Media with HTML</h2>
	</header>
	<main>
	<form action="#" id="myform" enctype="multipart/form-data">
	<label for="capture">Capture Media</label>

	<input type="file"
	id="capture"
	accept="image/,video/,audio/*"
	capture
	multiple />

	<br/>
	<input type="submit" value="Process" />
	</form>
	<p><img src="" id="img" alt="from phone"/></p>
	<p>
	<audio src="" id="audio" controls></audio>
	</p>
	<p>
	<video src="" id="video" controls></video>
	</p>
	</main>
	<script>

	document.addEventListener('DOMContentLoaded', (ev)=>{
	let form = document.getElementById('myform');
	//get the captured media file
	let input = document.getElementById('capture');

	input.addEventListener('change', (ev)=>{
	console.dir( input.files[0] );
	if(input.files[0].type.indexOf("image/") > -1){
	let img = document.getElementById('img');
	img.src = window.URL.createObjectURL(input.files[0]);
	}
	else if(input.files[0].type.indexOf("audio/") > -1 ){
	let audio = document.getElementById('audio');
	audio.src = window.URL.createObjectURL(input.files[0]);
	}
	else if(input.files[0].type.indexOf("video/") > -1 ){
	let video = document.getElementById('video');
	video.src=window.URL.createObjectURL(input.files[0]);
	}


	})

	})
	</script>
	</body>
	</html>