From 08693dbfdca944775a191d5b98c96c5436ffdd2a Mon Sep 17 00:00:00 2001 From: FORCHA Date: Fri, 24 Jun 2022 11:49:09 +0100 Subject: [PATCH 1/3] Update interface.js - Included logic to accept multiple video resolutions. - Included logic to record and download canvas. --- src/ui/interface.js | 61 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/src/ui/interface.js b/src/ui/interface.js index a77d4073..8362a5e1 100644 --- a/src/ui/interface.js +++ b/src/ui/interface.js @@ -135,4 +135,65 @@ module.exports = function Interface(options) { $("[rel=popover]").popover() return true; }); +//Start Handle multiple webcam resolutions + function changeResolution(w, h){ + document.getElementById('image').setAttribute("width",w); + document.getElementById('image').setAttribute("height",h); + } + $('#qvga').click(function(e){ + changeResolution('100px','100px') + }); + $('#vga').click(function(e){ + changeResolution('800px','600px') + }); + $('#hd').click(function(e){ + changeResolution('2400px','1800px') + }) + $('#full-hd').click(function(e){ + changeResolution('6000px','4000px') + }); +//End Handling of Multiple webcam resolutions + +//Start Canvas Recording and Download + +const canvas = document.getElementById('image'); +const ctx = canvas.getContext('2d'); +var x = 0; +const stream = canvas.captureStream(); // grab our canvas MediaStream +const rec = new MediaRecorder(stream); + +function exportVid(blob) { + const vid = document.createElement('video'); + vid.src = URL.createObjectURL(blob); + vid.controls = true; + vid.style.display='none'; + document.body.appendChild(vid); + const a = document.createElement('a'); + a.style.display = 'none'; + a.href = vid.src; + a.download = 'infragramVideo.mp4'; + document.body.appendChild(a); + a.click(); + setTimeout(() => { + document.body.removeChild(a); + URL.revokeObjectURL(vid.src); + }, 100); +} +$('#startRecord').click(function(e){ + const chunks = []; + + rec.ondataavailable = e => chunks.push(e.data); + rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/h264'})); + rec.start(); + document.getElementById('startRecord').style.display='none'; + document.getElementById('stopRecord').style.display='block'; +}) +$('#stopRecord').click(function(e){ + rec.stop(); + document.getElementById('stopRecord').style.display='none'; + document.getElementById('startRecord').style.display='block'; + document.getElementById('downloadButton').style.display='block'; +}) + +//End Canvas Recording and Download } From ff413698a0c31f9e5d3f0decf2b36f52f47498e9 Mon Sep 17 00:00:00 2001 From: FORCHA Date: Tue, 28 Jun 2022 18:11:01 +0100 Subject: [PATCH 2/3] Create index3.html --- index3.html | 299 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 299 insertions(+) create mode 100644 index3.html diff --git a/index3.html b/index3.html new file mode 100644 index 00000000..aad608a4 --- /dev/null +++ b/index3.html @@ -0,0 +1,299 @@ + + + + + Infragram | by Public Lab - Home + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Infragram logo image. Infragram by Public Lab

+ +

Analyze plant health with near-infrared imagery! Learn more & mod a camera, or buy a modded camera.

+ +
+
+ Support Public Lab’s mission to provide this platform freely to the whole world! + Join our Software Stewards with a $5/month donation. +
+ +
+ +
+

QUICK START

+
+ + +
+
+
+

1. SOURCE (CAMERAS)

+
+ + + +
+
+ +
    +
    +
    +
    +
    +
+
+ +
+ +
+

2. CONVERT/ANALYZE (ABOUT INFRAGRAMMAR)

+ + +
+ + +
+ + + + + +
+ +
+

3. COLORIZE

+
+ + + + + +
+
+ +
+

4. OVERLAY

+
+
+ +
+ +
+
+ + + + + + + +
+ +
+ +
+
+ +
+

1. Choose an input above: select an image, or choose live video.

+

2. Choose an analysis mode or click PRESETS.

+

3. Colorize your results (optional).

+

Click this message to hide it.

+
+ + + + + + +
+ +
+ +

Q&A

+ +

Ask and answer questions to peer-troubleshoot this system:

+ + + +
+ + + +
+ + + + From 80044ef80c738c0d1892791bd5015fadf8694576 Mon Sep 17 00:00:00 2001 From: FORCHA Date: Tue, 28 Jun 2022 18:12:08 +0100 Subject: [PATCH 3/3] Update infragram.js --- dist/infragram.js | 193 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 143 insertions(+), 50 deletions(-) diff --git a/dist/infragram.js b/dist/infragram.js index bbd3d83e..36a124f7 100644 --- a/dist/infragram.js +++ b/dist/infragram.js @@ -399,8 +399,10 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i function initialize() { getUserMedia(webRtcOptions, success, deviceError); // iOS Safari 11 compatibility: https://github.com/webrtc/adapter/issues/685 - webRtcOptions.videoEl.setAttribute('autoplay', 'autoplay'); - webRtcOptions.videoEl.setAttribute('playsinline', 'playsinline'); + webRtcOptions.videoEl.setAttribute('id', 'webCamVideoEl'); + var webCamVideoEl = document.getElementById('webCamVideoEl'); + webCamVideoEl.setAttribute('autoplay', 'autoplay'); + webCamVideoEl.setAttribute('playsinline', 'playsinline'); window.webcam = webRtcOptions; // this is weird but maybe used for flash fallback? canvas = options.canvas || document.getElementById("image"); @@ -478,9 +480,11 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i function success(stream) { var video; + window.localStream = stream; + isCamera = true; if (webRtcOptions.context === "webrtc") { - video = webRtcOptions.videoEl; + video = document.getElementById("webCamVideoEl"); if (navigator.mozGetUserMedia) { video.mozSrcObject = stream; @@ -532,45 +536,6 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i // This file was adapted from infragram-js: // http://github.com/p-v-o-s/infragram-js. module.exports = function File(options, processor) { - var _getMouseEvent = function getMouseEvent() { - var getParams = function getParams() { - return { - bubbles: false, - cancelable: false, - screenX: 0, - screenY: 0, - clientX: 0, - clientY: 0 - }; - }; - - try { - // eslint-disable-next-line no-new - new MouseEvent("t"); - - _getMouseEvent = function getMouseEvent() { - return function (eventType) { - var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getParams(); - return new MouseEvent(eventType, params); - }; - }; - } catch (e) { - // Polyfills DOM4 MouseEvent - _getMouseEvent = function getMouseEvent() { - return function (eventType) { - var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getParams(); - var mouseEvent = document.createEvent("MouseEvent"); // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent - - mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, // the event's mouse click count - params.screenX, params.screenY, params.clientX, params.clientY, false, false, false, false, 0, null); - return mouseEvent; - }; - }; - } - - return _getMouseEvent(); - }; - function downloadImage() { var event, format, lnk; // create an "off-screen" anchor tag @@ -587,14 +552,9 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i lnk.download = new Date().toISOString().replace(/:/g, "_") + "." + format; // create a "fake" click-event to trigger the download if (document.createEvent) { - var mouseEvent = _getMouseEvent(); - - lnk.dispatchEvent(mouseEvent("click", { - screenX: 0, - screenY: 0, - clientX: 0, - clientY: 0 - })); + event = document.createEvent("MouseEvents"); + event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + lnk.dispatchEvent(event); } else if (lnk.fireEvent) { lnk.fireEvent("onclick"); } @@ -1457,6 +1417,8 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i }, {}], 15: [function (require, module, exports) { module.exports = function Interface(options) { + var isVideo = false, + isCamera = false; options.imageSelector = options.imageSelector || "#image-container"; options.fileSelector = options.fileSelector || "#file-sel"; @@ -1546,6 +1508,12 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i return true; }); $("#webcam-activate").click(function () { + if (isVideo) { + $("#localVideo").remove(); + } + + isVideo = false; + isCamera = true; $('.choose-prompt').hide(); $("#save-modal-btn").show(); $("#save-zone").show(); @@ -1554,6 +1522,63 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i $('#preset-modal').modal('show'); return true; }); + $("#local-video-activate").click(function () { + if (isCamera) { + localStream.getVideoTracks()[0].stop(); + } + + isCamera = false; + + if (!isVideo) { + //Prevent Creation of Duplicate video Elements + localVideo = document.createElement('video'); + localVideo.setAttribute("src", "../video.mp4"); + localVideo.setAttribute("id", "localVideo"); + localVideo.style.display = "none"; + localVideo.style.width = "100px"; + localVideo.style.height = "50px"; + document.getElementById("video-container").appendChild(localVideo); + localVideo.play(); + localVideo.muted = true; + localVideo.loop = true; + document.getElementById("localVideoControls").style.display = "block"; //Attach video Element tocustom Sleek Bar + + localVideo.ontimeupdate = function () { + var percentage = localVideo.currentTime / localVideo.duration * 100; + $("#custom-seekbar span").css("width", percentage + "%"); + }; + } + + isVideo = true; + $('.choose-prompt').hide(); + $("#save-modal-btn").show(); + $("#save-zone").show(); + save_infragrammar_inputs(); + $('#preset-modal').modal('show'); + return true; + }); //Start video controls + + $("#custom-seekbar").on("click", function (e) { + localVideo = document.getElementById('localVideo'); + var offset = $(this).offset(); + var left = e.pageX - offset.left; + var totalWidth = $("#custom-seekbar").width(); + var percentage = left / totalWidth; + var vidTime = localVideo.duration * percentage; + localVideo.currentTime = vidTime; + }); + $("#localVideoPlayPause").on("click", function (e) { + localVideo = document.getElementById('localVideo'); + + if (localVideo.paused) { + localVideo.play(); + document.getElementById("localVideoPlayPause").innerHTML = ''; + } else { + localVideo.pause(); + document.getElementById("localVideoPlayPause").innerHTML = ''; + } + }); //End video controls + $("#snapshot").click(function () { options.camera.getSnapshot(); return true; @@ -1590,7 +1615,75 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i $("[rel=tooltip]").tooltip(); $("[rel=popover]").popover(); return true; + }); //Start Handle multiple webcam resolutions + + function changeResolution(w, h) { + document.getElementById('image').setAttribute("width", w); + document.getElementById('image').setAttribute("height", h); + } + + $('#qvga').click(function (e) { + changeResolution('100px', '100px'); + }); + $('#vga').click(function (e) { + changeResolution('800px', '600px'); + }); + $('#hd').click(function (e) { + changeResolution('2400px', '1800px'); + }); + $('#full-hd').click(function (e) { + changeResolution('6000px', '4000px'); + }); //End Handling of Multiple webcam resolutions + //Start Canvas Recording and Download + + var canvas = document.getElementById('image'); + var ctx = canvas.getContext('2d'); + var x = 0; + var stream = canvas.captureStream(); // grab our canvas MediaStream + + var rec = new MediaRecorder(stream); + + function exportVid(blob) { + var vid = document.createElement('video'); + vid.src = URL.createObjectURL(blob); + vid.controls = true; + vid.style.display = 'none'; + document.body.appendChild(vid); + var a = document.createElement('a'); + a.style.display = 'none'; + a.href = vid.src; + a.download = 'infragramVideo.mp4'; + document.body.appendChild(a); + a.click(); + setTimeout(function () { + document.body.removeChild(a); + URL.revokeObjectURL(vid.src); + }, 100); + } + + $('#startRecord').click(function (e) { + var chunks = []; + + rec.ondataavailable = function (e) { + return chunks.push(e.data); + }; + + rec.onstop = function (e) { + return exportVid(new Blob(chunks, { + type: 'video/h264' + })); + }; + + rec.start(); + document.getElementById('startRecord').style.display = 'none'; + document.getElementById('stopRecord').style.display = 'block'; }); + $('#stopRecord').click(function (e) { + rec.stop(); + document.getElementById('stopRecord').style.display = 'none'; + document.getElementById('startRecord').style.display = 'block'; + document.getElementById('downloadButton').style.display = 'block'; + }); //End Canvas Recording and Download }; }, { "../color/colormaps": 5,