[wip] Batch of enhancements
This commit is contained in:
Alban
parent
9aa91985c9
commit
13888ccf38
7 changed files with 5804 additions and 147 deletions
5623
js/adapter-latest.js
Normal file
5623
js/adapter-latest.js
Normal file
File diff suppressed because it is too large
Load diff
74
js/camera.js
Normal file
74
js/camera.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/*
|
||||
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by a BSD-style license
|
||||
* that can be found in the LICENSE file in the root of the source
|
||||
* tree.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const videoElement = document.querySelector('video');
|
||||
const videoSelect = document.querySelector('select#videoSource');
|
||||
const resizableElements = document.querySelectorAll(".video_sized")
|
||||
const selectors = [ videoSelect];
|
||||
|
||||
|
||||
function gotDevices(deviceInfos) {
|
||||
// Handles being called several times to update labels. Preserve values.
|
||||
const values = selectors.map(select => select.value);
|
||||
selectors.forEach(select => {
|
||||
while (select.firstChild) {
|
||||
select.removeChild(select.firstChild);
|
||||
}
|
||||
});
|
||||
for (let i = 0; i !== deviceInfos.length; ++i) {
|
||||
const deviceInfo = deviceInfos[i];
|
||||
const option = document.createElement('option');
|
||||
option.value = deviceInfo.deviceId;
|
||||
if (deviceInfo.kind === 'videoinput') {
|
||||
option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
|
||||
videoSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
selectors.forEach((select, selectorIndex) => {
|
||||
if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
|
||||
select.value = values[selectorIndex];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
|
||||
|
||||
|
||||
function gotStream(stream) {
|
||||
window.stream = stream; // make stream available to console
|
||||
videoElement.srcObject = stream;
|
||||
let track = stream.getTracks()[0]
|
||||
let settings = track.getSettings()
|
||||
resizableElements.forEach( el => { el.width = settings.width; el.height = settings.height; } )
|
||||
// Refresh button list in case labels have become available
|
||||
return navigator.mediaDevices.enumerateDevices();
|
||||
}
|
||||
|
||||
function handleError(error) {
|
||||
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
|
||||
}
|
||||
|
||||
function start() {
|
||||
if (window.stream) {
|
||||
window.stream.getTracks().forEach(track => {
|
||||
track.stop();
|
||||
});
|
||||
}
|
||||
const videoSource = videoSelect.value;
|
||||
const constraints = {
|
||||
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
|
||||
};
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
|
||||
}
|
||||
|
||||
|
||||
videoSelect.onchange = start;
|
||||
|
||||
start();
|
||||
160
js/canvas.js
160
js/canvas.js
|
|
@ -5,8 +5,11 @@ $(document).ready(function(){
|
|||
var url = document.location.origin
|
||||
var cropper = null
|
||||
var snap = null
|
||||
var width;
|
||||
var height;
|
||||
|
||||
Cropper.setDefaults({
|
||||
viewMode: 1,
|
||||
autoCropArea: 0.9
|
||||
})
|
||||
|
||||
// Grab elements, create settings, etc.
|
||||
var canvas = document.getElementById('canvas');
|
||||
|
|
@ -22,114 +25,28 @@ $(document).ready(function(){
|
|||
**/
|
||||
function doSnap(){
|
||||
cropper && cropper.destroy()
|
||||
let width = video.width
|
||||
let height = video.height
|
||||
context.drawImage(video, 0, 0, width, height);
|
||||
snap = context.createImageData(width, height);
|
||||
snap.data.set( context.getImageData(0, 0, width, height).data )
|
||||
binary(context)
|
||||
$("#result").show()
|
||||
// Animation removed: it was causing problems with the send button. Fix.
|
||||
//$('html, body').animate({scrollTop: $("#result").offset().top}, 2000);
|
||||
|
||||
cropper = new Cropper(canvas,{
|
||||
viewMode: 3,
|
||||
autoCropArea: 1
|
||||
});
|
||||
cropper = new Cropper(canvas);
|
||||
}
|
||||
|
||||
function doContrast(){
|
||||
cropper && cropper.destroy()
|
||||
let cropperData = {}
|
||||
if( cropper ){
|
||||
cropperData = cropper.getData()
|
||||
cropper.destroy()
|
||||
}
|
||||
context.putImageData(snap,0,0)
|
||||
binary(context)
|
||||
cropper = new Cropper(canvas,{
|
||||
viewMode: 3,
|
||||
autoCropArea: 1
|
||||
});
|
||||
}
|
||||
|
||||
// https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
|
||||
|
||||
var videoElement = document.querySelector('video');
|
||||
var videoSelect = document.querySelector('select#videoSource');
|
||||
videoSelect.onchange = getStream;
|
||||
getStream().then(getDevices).then(gotDevices);
|
||||
|
||||
function getDevices() {
|
||||
// AFAICT in Safari this only gets default devices until gUM is called :/
|
||||
return navigator.mediaDevices.enumerateDevices();
|
||||
}
|
||||
|
||||
function gotDevices(deviceInfos) {
|
||||
window.deviceInfos = deviceInfos; // make available to console
|
||||
for (const deviceInfo of deviceInfos) {
|
||||
const option = document.createElement('option');
|
||||
option.value = deviceInfo.deviceId;
|
||||
option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
|
||||
videoSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getStream() {
|
||||
if (window.stream) {
|
||||
window.stream.getTracks().forEach(track => {
|
||||
track.stop();
|
||||
});
|
||||
}
|
||||
const videoSource = videoSelect.value;
|
||||
const constraints = {
|
||||
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
|
||||
};
|
||||
return navigator.mediaDevices.getUserMedia(constraints).
|
||||
then(gotStream).catch(handleError);
|
||||
}
|
||||
|
||||
function gotStream(stream) {
|
||||
window.stream = stream; // make stream available to console
|
||||
videoSelect.selectedIndex = [...videoSelect.options].
|
||||
findIndex(option => option.text === stream.getVideoTracks()[0].label);
|
||||
videoElement.srcObject = stream;
|
||||
}
|
||||
|
||||
function handleError(error) {
|
||||
console.error('Error: ', error);
|
||||
}
|
||||
// https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
|
||||
function setCameraResolution( track ){
|
||||
width = track.getSettings().width
|
||||
height = track.getSettings().height
|
||||
$("#video").attr("width",width)
|
||||
$("#video").attr("height",height)
|
||||
$("#canvas").attr("width",width)
|
||||
$("#canvas").attr("height",height)
|
||||
}
|
||||
|
||||
// Put video listeners into place
|
||||
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
|
||||
//video.src = window.URL.createObjectURL(stream);
|
||||
video.srcObject = stream;
|
||||
setCameraResolution(stream.getVideoTracks()[0])
|
||||
video.play();
|
||||
});
|
||||
}
|
||||
/* Legacy code below! */
|
||||
else if(navigator.getUserMedia) { // Standard
|
||||
navigator.getUserMedia(mediaConfig, function(stream) {
|
||||
setCameraResolution(stream.getVideoTracks()[0])
|
||||
video.src = stream;
|
||||
video.play();
|
||||
}, errBack);
|
||||
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
|
||||
navigator.webkitGetUserMedia(mediaConfig, function(stream){
|
||||
setCameraResolution(stream.getVideoTracks()[0])
|
||||
video.src = window.webkitURL.createObjectURL(stream);
|
||||
video.play();
|
||||
}, errBack);
|
||||
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
|
||||
navigator.mozGetUserMedia(mediaConfig, function(stream){
|
||||
setCameraResolution(stream.getVideoTracks()[0])
|
||||
video.src = window.URL.createObjectURL(stream);
|
||||
video.play();
|
||||
}, errBack);
|
||||
cropper = new Cropper(canvas);
|
||||
setTimeout( () => { cropper.setData(cropperData) ; },30)
|
||||
}
|
||||
|
||||
// Trigger photo take
|
||||
|
|
@ -169,13 +86,15 @@ $(document).ready(function(){
|
|||
}
|
||||
$("#result").hide()
|
||||
|
||||
$( "#slider" ).slider({
|
||||
var slider = $( "#slider" ).slider({
|
||||
range: false,
|
||||
values: [ binary_level ],
|
||||
value: 100,
|
||||
animate: 300,
|
||||
min : 0,
|
||||
max : 255,
|
||||
change: function(event,ui){
|
||||
binary_level = ui.value
|
||||
console.log(`binary_level:${binary_level}`)
|
||||
doContrast()
|
||||
}
|
||||
});
|
||||
|
|
@ -185,6 +104,7 @@ $(document).ready(function(){
|
|||
$("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')
|
||||
|
||||
$.ajax({
|
||||
timeout: 3000,
|
||||
url: url + "/image",
|
||||
method:"POST",
|
||||
dataType: "json",
|
||||
|
|
@ -199,7 +119,7 @@ $(document).ready(function(){
|
|||
$("#messages").html(`<div class="alert alert-danger" role="alert">Something went wrong: ${msg}</div>`)
|
||||
return
|
||||
}
|
||||
$("#messages").html(`<div class="alert alert-success" role="alert">OK, your image will be on ${d.hash_name}</div>`)
|
||||
$("#messages").html(`<div class="alert alert-success" role="alert">OK, your image will be available in a few seconds as <a href="#${d.hash_name}" class="hash_name btn btn-sm btn-secondary">${d.hash_name}</a></div>`)
|
||||
imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []
|
||||
imageList.push(d.hash_name)
|
||||
localStorage.setItem("imageList",JSON.stringify(imageList))
|
||||
|
|
@ -215,8 +135,7 @@ $(document).ready(function(){
|
|||
var simuCanvas = document.getElementById("simuCanvas");
|
||||
var ctx = simuCanvas.getContext("2d");
|
||||
var lastpoint = { x: 0, y: 0, color: 0};
|
||||
ctx.clearRect(0,0,400,400);
|
||||
var zoom = 0.5;
|
||||
var zoom = 1;
|
||||
//ctx.save
|
||||
|
||||
Point = function( l ){
|
||||
|
|
@ -232,7 +151,7 @@ $(document).ready(function(){
|
|||
pointsList = document.pointsList
|
||||
if (pointsList.length > 0)
|
||||
{
|
||||
ctx.clearRect(0,0,400,400);
|
||||
ctx.clearRect(0,0,simuCanvas.width,simuCanvas.height);
|
||||
lastpoint = new Point(pointsList[0])
|
||||
for (var i = 0; i < pointsList.length; i+=1)
|
||||
{
|
||||
|
|
@ -263,20 +182,22 @@ $(document).ready(function(){
|
|||
$("#preview").show()
|
||||
|
||||
html = ''
|
||||
for( id in imageList){
|
||||
for( id in imageList.reverse()){
|
||||
hash_name = imageList[id]
|
||||
html += `<li><a href="#${hash_name}" class="hash_name" rel="${hash_name}">${hash_name}</a></li>`
|
||||
html += `<li class="list-group-item"><a href="#${hash_name}" class="hash_name btn-sm btn btn-secondary" rel="${hash_name}">${hash_name}</a></li>`
|
||||
}
|
||||
$("#imageList").html(`<ul>${html}</ul>`)
|
||||
$("#imageList").html(`<ul class="list-group">${html}</ul>`)
|
||||
|
||||
}
|
||||
refreshImageList()
|
||||
|
||||
$("#imageList").on("click",function(e){
|
||||
var el = e.target
|
||||
var hash_name = $(el).attr("rel")
|
||||
var showImage = function(e){
|
||||
var el = $(e.target)
|
||||
if( ! el.hasClass("hash_name") ) { return; }
|
||||
var hash_name = el.attr("rel")
|
||||
var u = `${url}/hash_name/${hash_name}`
|
||||
$.ajax({
|
||||
timeout: 3000,
|
||||
url: `${url}/hash_name/${hash_name}`,
|
||||
dataType: "json",
|
||||
|
||||
|
|
@ -293,8 +214,21 @@ $(document).ready(function(){
|
|||
.fail(function(d,m,jq){
|
||||
$("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
|
||||
})
|
||||
}
|
||||
|
||||
$("#imageList").on("click", showImage)
|
||||
$("#messages").on("click", showImage)
|
||||
|
||||
$(".contrast").on("click",function(el){
|
||||
let btn = el.target
|
||||
let val = Number($(btn).attr("rel"))
|
||||
let new_binary_level = binary_level + val;
|
||||
console.log(`new_binary_level:${new_binary_level}`)
|
||||
if( new_binary_level >= 0 && new_binary_level <= 255){
|
||||
binary_level = new_binary_level
|
||||
$("#slider").slider("option","value",binary_level)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue