alberanid/toot-my-t-shirt
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improve size of video

Browse source
This commit is contained in:
Davide Alberani 2018-12-01 11:59:20 +01:00
parent 90586a44d8
commit d2e75b77fa
4 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -4,6 +4,10 @@ A work-in-progress project for 35C3 (from an idea by itec)
Still not much to see here: the UI still sucks and very little feedback is given. Still not much to see here: the UI still sucks and very little feedback is given.
# Requirements
* Python 3
* Mastodon.py: https://github.com/halcy/Mastodon.py
# Run # Run

21
static/css/sb.css
View file

@ -1,4 +1,6 @@
#canvas-container { #canvas-container {
min-width: 640px;
min-height: 480px;
position: relative; position: relative;
display: none; display: none;
} }
@ -8,15 +10,13 @@
} }
#sb-video { #sb-video {
width: 640px; position: absolute;
height: 480px; top: 0px;
position: relative; left: 0px;
z-index: 100; z-index: 100;
} }
#sb-canvas { #sb-canvas {
width: 640px;
height: 480px;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -26,14 +26,9 @@
#sb-message { #sb-message {
visibility: hidden; visibility: hidden;
}
/*
#sb-message-text {
position: absolute;
left: 10px;
bottom: 20px;
z-index: 10000; z-index: 10000;
} }
*/
.btn {
margin-right: 10px;
}

6
static/index.html
View file

@ -32,13 +32,13 @@
</div> </div>
<div class="row"> <div class="row">
<div id="sb-message">
<span id="sb-message-text">will be gone in few seconds!</span>
</div>
<div id="canvas-container"> <div id="canvas-container">
<video id="sb-video" autoplay="true" muted="muted"></video> <video id="sb-video" autoplay="true" muted="muted"></video>
<canvas id="sb-canvas"></canvas> <canvas id="sb-canvas"></canvas>
</div> </div>
<div id="sb-message">
<span id="sb-message-text">will be gone in few seconds!</span>
</div>
</div> </div>
</div> </div>
</body> </body>

12
static/js/sb.js
View file

@ -52,7 +52,8 @@ var countdown = {
function runCamera(stream) { function runCamera(stream) {
console.log("initialize the camera"); console.log("initialize the camera");
var video = document.querySelector("#sb-video"); var video = document.querySelector("#sb-video");
video.width = video.offsetWidth; var container = document.querySelector("#canvas-container");
container.width = video.videoWidth;
video.onloadedmetadata = function() { video.onloadedmetadata = function() {
video.play(); video.play();
}; };
@ -134,8 +135,12 @@ function takePhoto() {
document.querySelector("#sb-message").style.visibility = "visible"; document.querySelector("#sb-message").style.visibility = "visible";
var video = document.querySelector("#sb-video"); var video = document.querySelector("#sb-video");
var canvas = document.querySelector("#sb-canvas"); var canvas = document.querySelector("#sb-canvas");
var context = canvas.getContext("2d");
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
/*
var tmpCanvas = document.createElement("canvas"); var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = video.offsetWidth; tmpCanvas.width = video.offsetWidth;
tmpCanvas.height = video.offsetHeight; tmpCanvas.height = video.offsetHeight;
@ -146,10 +151,11 @@ function takePhoto() {
canvas.width = canvas.offsetWidth; canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight; canvas.height = canvas.offsetHeight;
canvas.style.height = parseInt(canvas.offsetWidth * tmpRatio); canvas.style.height = parseInt(canvas.offsetWidth * tmpRatio);
var context = canvas.getContext("2d");
var scale = canvas.width / tmpCanvas.width; var scale = canvas.width / tmpCanvas.width;
context.scale(scale, scale); context.scale(scale, scale);
context.drawImage(tmpCanvas, 0, 0); context.drawImage(tmpCanvas, 0, 0);
*/
context.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);
document.querySelector("#send-photo-btn").classList.remove("disabled"); document.querySelector("#send-photo-btn").classList.remove("disabled");
document.querySelector("#cancel-photo-btn").classList.remove("disabled"); document.querySelector("#cancel-photo-btn").classList.remove("disabled");
countdown.start(5, cancelPhoto, updateSendCountdown); countdown.start(5, cancelPhoto, updateSendCountdown);