Skip to content

Instantly share code, notes, and snippets.

@jaretburkett

jaretburkett/SimpleWebcam.html

Created August 20, 2017 22:46
Show Gist options
  • Save jaretburkett/b1b0d514d2b14ac27ed636e6897c8816 to your computer and use it in GitHub Desktop.
Save jaretburkett/b1b0d514d2b14ac27ed636e6897c8816 to your computer and use it in GitHub Desktop.
Download ZIP
A simple webcam viewer that can be flipped both vertically and horizontally
Raw
SimpleWebcam.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Simple Webcam Viewer</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.menu {
height: 100%;
width: 50px;
background: #444;
float: left;
}
#view {
background: #000;
height: 100%;
width: calc(100% - 50px);
float: left;
}
video {
width: 100%;
height: 100%;
}
.btn {
margin: 10px 5px;
width: 40px;
text-align: center;
background: #737373;
height: 40px;
line-height: 43px;
color: #fff;
border-radius: 5px;
font-size: 20px;
}
.flipped-x {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.flipped-y {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.flipped-x.flipped-y {
-moz-transform: scaleX(-1) scaleY(-1);
-o-transform: scaleX(-1) scaleY(-1);
-webkit-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1);
}
</style>
</head>
<body>
<div class="menu">
<div class="btn flipx">
<i class="fa fa-arrows-h" aria-hidden="true"></i>
</div>
<div class="btn flipy">
<i class="fa fa-arrows-v" aria-hidden="true"></i>
</div>
</div>
<div id="view" data-active="false">
<video autoplay></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function () {
start();
$('.flipx').click(function () {
$('video').toggleClass('flipped-x');
});
$('.flipy').click(function () {
$('video').toggleClass('flipped-y');
});
});
function start() {
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getUserMedia({video: true}, onReady, console.error);
function onReady(stream) {
var view = document.querySelector("#view");
var video = document.querySelector("#view > video");
view.dataset.active = true;
video.src = window.URL.createObjectURL(stream);
setTimeout(fitVideo, 500); // meh
}
}
</script>
</body>
</html>
@MarioCavero
Copy link

MarioCavero commented Jun 29, 2023 •
edited
Loading

Did you manage to solve this? @lampsbr

But I would like to know if it's possible to change the aspect ratio of the videostream. Like I'm asking for vertical resolution in getUserMedia, but I only get landscape modes to deal with

I am also looking for this! I have tried setting manual heights and widths, but the video remains with an aspect ratio of more width than height... I think it might be related to

video: {
        facingMode: "user",
        width: { ideal: 360 },
        height: { ideal: 480 },
      },

facingMode, user is front camera, environment is rear camera. Found an interesting question about aspect ratio!

@lampsbr
Copy link

lampsbr commented Jun 29, 2023

Hi @MarioCavero ! I was unable to make all cameras obbey the aspect ratio I ask for. I tested some situations where you can keep querying for the inverted aspect ratio and after a few tries the browser api will give you a stream with ratio you want, but for my use case I didn't think it was suitable.

So I ended up with a different solution, since I only need a small resolution I show the center of the video stream in my page, like a 400px X 200px rectangle, and the rest of the video stream (let's say a vertical 9:16 720x1280px stream) is hidden behind some div.

Ugly but that's what I needed. I can try to provide a code sample if you want =D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment