tbhaxor/capture-profile-pic.html

## capture-profile-pic.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Capture Profile Pic</title>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <style>
      video {
        max-width: 240px;
        min-width: 240px;
        max-height: 240px;
        min-height: 240px;
      }
    </style>
  </head>
  <body>
    <video autoplay></video>
    <button id="capture">Capture Profile Pic</button>
    <p>Working</p>
    <p>Profile pic will display here</p>
    <canvas style="display: none;"></canvas>
    <div>
      <img />
    </div>
    <script>
      var img = document.querySelector("img");
      var canvas = document.querySelector("canvas");
      var video = document.querySelector("video");
      var button = document.querySelector("button");

      var streaming = false;
      var width = 240;
      var height = 240;

      video.addEventListener("canplay", (ev) => {
        if (!streaming) {
          height = video.videoHeight / (video.videoWidth / width);
          if (isNaN(height)) {
            height = width / (4 / 3);
          }
          video.width = height;
          video.height = width;
          canvas.width = width;
          canvas.height = height;
          streaming = true;
        }
      });

      function takeProfilePic() {
        var ctx = canvas.getContext("2d");
        if (width && height) {
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(video, 0, 0, width, height);
          var data = canvas.toDataURL("image/png");
          img.src = data;
        }
      }

      button.addEventListener("click", (e) => {
        e.preventDefault();
        takeProfilePic();
      });

      console.log(navigator);
      navigator.mediaDevices
        .getUserMedia({
          audio: false,
          video: true,
        })
        .then((stream) => {
          document.querySelector("p").textContent = "Connected";
          video = document.querySelector("video");
          video.srcObject = stream;
          video.play();
        })
        .catch((e) => {
          alert(e);
          document.querySelector("p").textContent = "Not Connected";
        });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Capture Profile Pic</title>
	<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
	<style>
	video {
	max-width: 240px;
	min-width: 240px;
	max-height: 240px;
	min-height: 240px;
	}
	</style>
	</head>
	<body>
	<video autoplay></video>
	<button id="capture">Capture Profile Pic</button>
	<p>Working</p>
	<p>Profile pic will display here</p>
	<canvas style="display: none;"></canvas>
	<div>
	<img />
	</div>
	<script>
	var img = document.querySelector("img");
	var canvas = document.querySelector("canvas");
	var video = document.querySelector("video");
	var button = document.querySelector("button");

	var streaming = false;
	var width = 240;
	var height = 240;

	video.addEventListener("canplay", (ev) => {
	if (!streaming) {
	height = video.videoHeight / (video.videoWidth / width);
	if (isNaN(height)) {
	height = width / (4 / 3);
	}
	video.width = height;
	video.height = width;
	canvas.width = width;
	canvas.height = height;
	streaming = true;
	}
	});

	function takeProfilePic() {
	var ctx = canvas.getContext("2d");
	if (width && height) {
	canvas.width = width;
	canvas.height = height;
	ctx.drawImage(video, 0, 0, width, height);
	var data = canvas.toDataURL("image/png");
	img.src = data;
	}
	}

	button.addEventListener("click", (e) => {
	e.preventDefault();
	takeProfilePic();
	});

	console.log(navigator);
	navigator.mediaDevices
	.getUserMedia({
	audio: false,
	video: true,
	})
	.then((stream) => {
	document.querySelector("p").textContent = "Connected";
	video = document.querySelector("video");
	video.srcObject = stream;
	video.play();
	})
	.catch((e) => {
	alert(e);
	document.querySelector("p").textContent = "Not Connected";
	});
	</script>
	</body>
	</html>