Accessing webcam AND MICROPHONE in html

programming
1

I stumbled across this forum when I was in search of a way to get my webcam and microphone to play directly in a browser and found this article: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

Admittedly, I know almost nothing about creating html, but found some code posted that worked to get my webcam showing in my browser at full screen.

What I’d like to do (if possible) is to have it also record/playback audio through the browser as I speak into a microphone. Are there any simple additions I can make, or any articles I can be directed to to help me with that?

Here’s the code so far that just does the full screen webcam:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
 
<style>
#videoElement {
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
}
</style>
</head>
 
<body style="margin: 0; height: 100%; overflow: hidden; background-color:#000000;">
<div id="container">
	<video autoplay="true" id="videoElement">
	
	</video>
</div>
<script>
var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}
</script>
</body>
</html>