Skip to content

Instantly share code, notes, and snippets.

@darrenbarklie

darrenbarklie/frame-selfie.svg

Last active October 5, 2019 11:42
Show Gist options
  • Save darrenbarklie/7938a8350f8f90753d941e7fecc65734 to your computer and use it in GitHub Desktop.
Save darrenbarklie/7938a8350f8f90753d941e7fecc65734 to your computer and use it in GitHub Desktop.
Download ZIP
VSP Photo Capture
Display the source blob
Display the rendered blob
Raw
frame-selfie.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Photo</title>
<style>
body {
padding: 0;
margin: 0;
}
.container {
border: 2px solid black;
}
.container-viewfinder {
position: relative;
width: 600px;
height: 720px;
margin: 0 auto;
background-color: #004000;
}
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container-viewfinder">
<div class="overlay">
<img src="frame-selfie.svg" />
</div>
<video autoplay class="viewfinder"></video>
</div>
</div>
<script>
function hasGetUserMedia() {
return !!(
navigator.mediaDevices && navigator.mediaDevices.getUserMedia
);
}
if (hasGetUserMedia()) {
const constraints = {
// video: true
video: {
width: { ideal: 600 },
height: { ideal: 720 }
}
};
const captureVideoButton = document.querySelector(
"#screenshot .capture-button"
);
const video = document.querySelector("video");
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
video.srcObject = stream;
});
} else {
alert(
"Your browser or device doesn't support image capture. Please contact support."
);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment