Process Video Locally, Accept Multiple video Resolutions and Canvas Recording #439

Forchapeatl · 2022-07-28T06:57:27Z

Fixes #418
Combines Process Video Locally , Accept Multiple video Resolutions and Canvas Recording

Related pending milestones

canvas assumes wrong div size upon fullscreen exit.
image files not loading when after Webrtc is intitialized
Relate Canvas resolution to device GPU.
Optimize local video files with size greater than 10MB.

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

PR is descriptively titled 📑 and links the original issue above 🔗
tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR
code is in uniquely-named feature branch and has no merge conflicts 📁
screenshots/GIFs are attached 📎 in case of UI updation
ask @publiclab/reviewers for help, in a comment below

gitpod-io · 2022-07-28T06:57:31Z

jywarren

Looking great, just some small changes!

jywarren · 2022-07-28T14:00:28Z

src/io/camera.js

    if (webRtcOptions.context === "webrtc") {
-      video = webRtcOptions.videoEl;
+      video = document.getElementById("webCamVideoEl");


Hi Forcha, this is looking really good. I wanted to note that these lines where we access an options parameter instead of directly using a string are intended to make it easy to point the entire system at a different HTML setup without having to change multiple spots within the code. So if it's possible to preserve these in all the changes you made that would be great. I'm happy to help explain how this gets set and how it works if that's helpful!

Thank you @jywarren. I have made the requested changes on line 91

+ video = webRtcOptions.videoEl; - video = document.getElementById("webCamVideoEl");

jywarren · 2022-07-28T14:02:41Z

src/ui/interface.js

-      reader.readAsDataURL(this.files[0]);
-      $('#preset-modal').modal('show');
+        reader.readAsDataURL(this.files[0]);        
+      }else{


There's a little bit of formatting cleanup we could do here maybe?

Yes alot has to be done here. Thank you, I keep on forgetting

Show image if is selected after Webrtc has been initialized.

Hide Video controls when image is selected.

Moved this thread to #441!

jywarren · 2022-07-28T14:03:46Z

src/io/camera.js

-    webRtcOptions.videoEl.setAttribute('autoplay', 'autoplay');
-    webRtcOptions.videoEl.setAttribute('playsinline', 'playsinline');
+    webRtcOptions.videoEl.setAttribute('id', 'webCamVideoEl');
+    var webCamVideoEl = document.getElementById('webCamVideoEl')


Here also we could set this from the constructor options! See my next comment below.

Please help me with the follow up

Please help me with the follow up comment.

Suggested change

var webCamVideoEl = document.getElementById('webCamVideoEl')

options.webcamVideoSelector = options.webcamVideoSelector || 'webcamVideoEl';

options.webcamVideoEl = document.getElementById(options.webcamVideoSelector);

webRtcOptions.videoEl.setAttribute('id', options.webcamVideoSelector);

How about this? So we can set it explicitly in the constructor, but it defaults to webcamVideoEl?

Also, in another PR, we add to the README to show exactly what can be set in the constructor. We can add a section to https://github.com/publiclab/infragram/#contributing -- following the general format of this example: https://github.com/publiclab/inline-markdown-editor/#usage

Does that make sense? What do you think?

Also watch out, the substitution feature of GitHub can only do one line so here I also missed modifying the line above, webRtcOptions.videoEl.setAttribute('id', 'webCamVideoEl');.

jywarren · 2022-07-31T23:31:34Z

src/ui/interface.js

-module.exports = function Interface(options) {
+module.exports = function Interface(options) {  
+
+  var isVideo = false, isCamera=false; var isOnCam;


Suggested change

var isVideo = false, isCamera=false; var isOnCam;

var isVideo = false,

isCamera = false,

isOnCam;

jywarren · 2022-07-31T23:31:51Z

src/ui/interface.js

-        img = new Image();
-        img.onload = function onImageLoad() {
-          options.processor.updateImage(this);
+      if ((this.files[0].type == 'image/jpeg')||(this.files[0].type == 'image/png')) {


Suggested change

if ((this.files[0].type == 'image/jpeg')||(this.files[0].type == 'image/png')) {

if ((this.files[0].type == 'image/jpeg') || (this.files[0].type == 'image/png')) {

Forchapeatl · 2022-08-08T23:48:25Z

I will address these issues separately.
Process video locally Closed in relation to #445

Create index3.html

3e5d9a1

Forchapeatl added 5 commits July 28, 2022 07:59

Update Infragram.js

0d99d51

Update camera.js

e38e930

Update interface.js

ddf6ebf

Create infragram3.js

979f6cb

Update index3.html

f4c752d

Forchapeatl added the gsoc Issues associated with Google Summer of Code(GSOC) label Jul 28, 2022

Forchapeatl changed the title ~~Create index3.html~~ Process Video Locally, Accept Multiple video Resolutions and Canvas Recording Jul 28, 2022

jywarren requested changes Jul 28, 2022

View reviewed changes

Update camera.js

1978e21

jywarren reviewed Jul 31, 2022

View reviewed changes

This was referenced Aug 4, 2022

Image files are unable to load after camera stream. #441

Open

added drag and drop functionality #440

Open

Forchapeatl closed this Aug 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Process Video Locally, Accept Multiple video Resolutions and Canvas Recording #439

Process Video Locally, Accept Multiple video Resolutions and Canvas Recording #439

Forchapeatl commented Jul 28, 2022 •

edited

Loading

gitpod-io bot commented Jul 28, 2022

jywarren left a comment

jywarren Jul 28, 2022

Forchapeatl Jul 28, 2022

jywarren Jul 28, 2022

Forchapeatl Jul 28, 2022 •

edited

Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

jywarren Aug 5, 2022

jywarren Jul 28, 2022

Forchapeatl Jul 28, 2022

Forchapeatl Jul 28, 2022

jywarren Jul 31, 2022 •

edited

Loading

jywarren Jul 31, 2022

jywarren Jul 31, 2022

Forchapeatl commented Aug 8, 2022

-    var webCamVideoEl = document.getElementById('webCamVideoEl')
+    options.webcamVideoSelector = options.webcamVideoSelector || 'webcamVideoEl';
+    options.webcamVideoEl = document.getElementById(options.webcamVideoSelector);
+    webRtcOptions.videoEl.setAttribute('id', options.webcamVideoSelector);

	if ((this.files[0].type == 'image/jpeg')\|\|(this.files[0].type == 'image/png')) {
	if ((this.files[0].type == 'image/jpeg') \|\| (this.files[0].type == 'image/png')) {

Process Video Locally, Accept Multiple video Resolutions and Canvas Recording #439

Process Video Locally, Accept Multiple video Resolutions and Canvas Recording #439

Conversation

Forchapeatl commented Jul 28, 2022 • edited Loading

gitpod-io bot commented Jul 28, 2022

jywarren left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Forchapeatl Jul 28, 2022 • edited Loading

Choose a reason for hiding this comment

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jywarren Jul 31, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Forchapeatl commented Aug 8, 2022

Forchapeatl commented Jul 28, 2022 •

edited

Loading

Forchapeatl Jul 28, 2022 •

edited

Loading

jywarren Jul 31, 2022 •

edited

Loading