-
-
Save jaretburkett/b1b0d514d2b14ac27ed636e6897c8816 to your computer and use it in GitHub Desktop.
| <!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> |
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!
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
Hi, one of the changes necessary today is to comment line 114 and make the stream attribution like this:
The setTimeout on line 115 points to something not declared, also =)
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