Process Video Locally Infragram.org #421

Forchapeatl · 2022-06-19T21:41:59Z

Process Video Locally
Fixes #418
found at https://forchapeatl.github.io/infragram/index2.html

a2a4f5d9-4f0d-4496-af2b-11858bdb12a8.mp4

Allow conversion of entire video.
Implement video controls on canvas.

TEST RESULTS

Passed Test cases

video can be sleeked through muted / looped / paused and played.
video can be processed.
Video processing works before and after camera has been on.

Failed Test cases

Accommodate large video files > 10MB.

Hello @jywarren @TildaDares @stephaniequintana
The demo video is processed locally , but it might take a while for the video to load up the github page
It seems to work only after camera has been turned on.This bug is taking a while.

I plead you give me a week with the bug while I proceed to other mile stones.
Is the code base readable (in terms of variable declarations)

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

welcome · 2022-06-19T21:42:01Z

Thanks for opening this pull request! This space is protected by our Code of Conduct - and we're here to help.
Dangerbot will test out your code and reply in a bit with some pointers and requests.
There may be some errors, but don't worry! We'll work through them with you! 👍🎉😄

One thing that can help to get started is to make sure you've included a link back to the original issue you're solving, in the format fixes #0000 (for example). And to make sure the PR title describes what you're trying to do! (often it can be the same as the issue title) Thanks! 🙌

Then, you can say hello in our chatroom & share a link to this PR to get a review! 👋 ✅

gitpod-io · 2022-06-19T21:42:03Z

jywarren · 2022-06-20T06:32:50Z

Hi! I hope to have a chance to give this a thorough read through in the next day, but I wonder if the camera start bug has to do with having to wait until it's initialized; there may be a need to listen for the right event?

jywarren · 2022-06-20T06:34:31Z

index3.html

+          processor: 'webgl'
+        });
+
+        openInPl = function openInPl() {


I guess we should move this into a shareable .js file or into the library itself... Just an idea?

Please help me with more details on this file. I can't seem to find a file named sharable.js in the infragram directory , I am somehow confused on the mentioned library. Please for some detail on this idea.

Sorry I'm typing from phone, I just meant a separate js file we can include into the different html files... A shareable file. Thanks!

Okay. Noted

jywarren · 2022-06-20T06:35:28Z

index3.html

+          <br style="clear:both;" />
+
+        </div>
+        <div id="localVideoControls" style="display:none;">


So let's clearly label and explain these to @stephaniequintana who may be soon integrating this code into the new UI!

jywarren · 2022-06-20T06:38:17Z

dist/infragram3.js

@@ -0,0 +1,2213 @@
+ isVideo = false,isCamera=false; // Turns off camera feed


Ah ok! Did you make changes to a copy of dist/infragram.js? So what may be better is to look where in /src/ you want to make the changes, and do them there... Then they'll generate a new dist/infragram.js when we run grunt build. Does that make sense? It compiles the code into /dist/. @cesswairimu or @TildaDares both have experience with this too! No worries we'll help if it doesn't make sense.

yes the grunt build command makes sense, thank you.

jywarren · 2022-06-21T05:17:56Z

Hi @Forchapeatl - i wanted to try to help you pull apart the new code you've added to the /dist/infragram.js file, and so I made a new PR just to get a good 'diff' view -- at https://github.com/publiclab/infragram/pull/422/files?diff=unified&w=1

What I'm going to try to do is comment on each section and point to where those changes could be made in the /src/ directory. Let's try to make the changes there!

jywarren · 2022-06-21T05:33:08Z

OK - it's not too complex - there are about 6 or so sections which need to be copied into corresponding code in /src/io/camera.js and /src/ui/interface.js -- press "load diff" and you'll see my comments at https://github.com/publiclab/infragram/pull/422/files?diff=unified&w=1 !

If you make those changes in the Forchapeatl-patch-1 branch, then run grunt build, you'll generate a new version of the compiled file called dist/infragram.js. Check that file in and then remove /dist/infragram3.js, and point index3.html at /dist/infragram.js, and we should be OK!

Forchapeatl · 2022-06-21T08:55:12Z

okay @jywarren ,thank you

Set "Id" on Webrtc video ELement

- Included logic to process video locally - Included logic for video controls (loop/mute/pause/play and seek)

Forchapeatl · 2022-06-23T18:40:01Z

Hello @jywarren , @cesswairimu , @TildaDares the code base has been structured as requested on https://github.com/publiclab/infragram/pull/422/files?diff=unified&w=1

jywarren · 2022-06-23T18:49:01Z

This looks excellent @Forchapeatl -- can you run grunt build and check in the updated dist/.... files? Then I'm going to give it a quick test in GitPod and we should be able to merge -- great work!!

jywarren · 2022-06-23T18:49:37Z

No rush as it's very late here so I won't get to it until tomorrow. Congrats on the changes, they were complex!

Forchapeatl · 2022-06-24T09:57:03Z

Thank you, @jywarren

jywarren · 2022-06-25T08:59:42Z

Hi @Forchapeatl I didn't see the dist files added again, just wanted to check if you needed any help?

Forchapeatl · 2022-06-25T13:54:23Z

Hello @jywarren , all is well with grunt. This PR functionality is a bit limited / buggy . Please I will include the dist file once I am done with these limitations / bugs.

Video processing works only after camera has been on.
Accommodate large video files > 10MB.

Please permit me redirect you to another PR #427

jywarren · 2022-06-28T12:09:10Z

Video processing works only after camera has been on.
Accommodate large video files > 10MB.

No problem, but I think the 10MB might be a tough one - i'm not sure how you're storing it but if it's in localStorage, there is a hard JS limit on how much can be stored. If you think it's a big issue, we could push people into the workflow of recording on their device, then uploading the recording and converting it, rather than recording live within the website. What do you think? So people would upload a video file in the same way as they would have uploaded a still image. @stephaniequintana also curious what you think about that workflow as an alternative. It could be simpler and could sidestep some of these issues?

jywarren · 2022-06-28T12:10:25Z

Oh darn i'm being silly - this is a prerecorded video, and you're just saying that there was a 10mb limit to the processing of that "upload" - but was my idea correct that it was due to a localStorage file size limitation?

jywarren · 2022-06-28T12:12:15Z

I want to say that we have processed larger images in https://github.com/publiclab/image-sequencer/ or https://github.com/jywarren/webgl-distort/ - I could be wrong, but I think we were just keeping such larger amounts of data in memory, or in the HTML DOM itself. Where is the 10mb limit happening?

jywarren · 2022-06-28T12:13:11Z

src/ui/interface.js

+        localVideo.style.display = "none"               
+        localVideo.style.width = "100px";   
+        localVideo.style.height = "50px";    
+        document.getElementById("video-container").appendChild(localVideo);


It looks like everything is happening in the DOM here. Did you get a particular error you can share?

https://github.com/publiclab/infragram/blob/Forchapeatl-patch-1/src/Infragram.js#L38-L39

Sorry about the mix up @jywarren . I meant that HD videos have a slower frame rate transition on the Infragram canvas.

For example, HD video makes better frame transitions with the below settings

if (options.processor.type == "webgl") interval = 1; else interval = 15;

I see, ok! What did you think about making this driven by frame conversion completion instead of interval?

Forchapeatl · 2022-07-17T13:19:18Z

Video Processing works now works without clicking the webcam button.

ad91639c-8660-4214-9962-ce3025b8bad1.mp4

jywarren · 2022-07-19T16:18:55Z

Wow excellent! @Forchapeatl how are you thinking in terms of what should be ready to merge next? Thank you!

Forchapeatl · 2022-07-20T04:37:05Z

You 're welcome @jywarren

jywarren · 2022-10-11T07:08:04Z

Ok no worries and great to see the other pr! My internet isn't great here so I hope to review tomorrow. If you can get some feedback from another mentor or a fellow intern before then that's great too!

…

On Sat, Jun 25, 2022, 7:54 PM FORCHA ***@***.***> wrote: Hello @jywarren <https://github.com/jywarren> , all is well with grunt. The functionality is a bit buggy . Please I will include the dist file once I am done with these bugs. Video processing works only after camera has been on. Accommodate large video files > 10MB. Permit me redirect you to another PR #427 <#427> — Reply to this email directly, view it on GitHub <#421 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J6TKV4D7DQGFPYLAPTVQ4FRXANCNFSM5ZG7WCCA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Forchapeatl added 3 commits June 19, 2022 22:27

Create index3.html

a18fe9b

Create infragram3.js

2425c4e

Update index3.html

3f5f87a

Forchapeatl added enhancement in progress discussion ideas to discuss and refine before deciding whether to do them or not gsoc Issues associated with Google Summer of Code(GSOC) labels Jun 19, 2022

jywarren reviewed Jun 20, 2022

View reviewed changes

Forchapeatl added 3 commits June 23, 2022 19:31

Delete infragram3.js

710ed65

Update camera.js

65c1104

Set "Id" on Webrtc video ELement

Update interface.js

9d9b6e9

- Included logic to process video locally - Included logic for video controls (loop/mute/pause/play and seek)

Update index3.html

618cdff

jywarren reviewed Jun 28, 2022

View reviewed changes

stephaniequintana mentioned this pull request Jul 7, 2022

V2 functions connect #431

Merged

5 tasks

Update camera.js

dd16e80

Forchapeatl added 3 commits July 17, 2022 13:58

Update Infragram.js

2571d03

Update interface.js

c28f13c

Update infragram.js

a10f37c

stephaniequintana mentioned this pull request Jul 22, 2022

Update index2.html stephaniequintana/infragram#1

Open

Forchapeatl closed this Jul 28, 2022

Forchapeatl mentioned this pull request Jul 28, 2022

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

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Process Video Locally Infragram.org #421

Process Video Locally Infragram.org #421

Forchapeatl commented Jun 19, 2022 •

edited

Loading

welcome bot commented Jun 19, 2022

gitpod-io bot commented Jun 19, 2022

jywarren commented Jun 20, 2022

jywarren Jun 20, 2022

Forchapeatl Jun 20, 2022 •

edited

Loading

jywarren Jun 20, 2022

Forchapeatl Jun 20, 2022

Forchapeatl Jun 20, 2022

jywarren Jun 20, 2022

jywarren Jun 20, 2022

Forchapeatl Jun 20, 2022

jywarren commented Jun 21, 2022

jywarren commented Jun 21, 2022

Forchapeatl commented Jun 21, 2022

Forchapeatl commented Jun 23, 2022 •

edited

Loading

jywarren commented Jun 23, 2022

jywarren commented Jun 23, 2022

Forchapeatl commented Jun 24, 2022

jywarren commented Jun 25, 2022

Forchapeatl commented Jun 25, 2022 •

edited

Loading

jywarren commented Jun 28, 2022

jywarren commented Jun 28, 2022

jywarren commented Jun 28, 2022

jywarren Jun 28, 2022

Forchapeatl Jun 28, 2022

jywarren Jul 2, 2022

Forchapeatl commented Jul 17, 2022

jywarren commented Jul 19, 2022

Forchapeatl commented Jul 20, 2022

jywarren commented Oct 11, 2022 via email

		@@ -0,0 +1,2213 @@
		isVideo = false,isCamera=false; // Turns off camera feed

Process Video Locally Infragram.org #421

Process Video Locally Infragram.org #421

Conversation

Forchapeatl commented Jun 19, 2022 • edited Loading

welcome bot commented Jun 19, 2022

gitpod-io bot commented Jun 19, 2022

jywarren commented Jun 20, 2022

Choose a reason for hiding this comment

Forchapeatl Jun 20, 2022 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jywarren commented Jun 21, 2022

jywarren commented Jun 21, 2022

Forchapeatl commented Jun 21, 2022

Forchapeatl commented Jun 23, 2022 • edited Loading

jywarren commented Jun 23, 2022

jywarren commented Jun 23, 2022

Forchapeatl commented Jun 24, 2022

jywarren commented Jun 25, 2022

Forchapeatl commented Jun 25, 2022 • edited Loading

jywarren commented Jun 28, 2022

jywarren commented Jun 28, 2022

jywarren commented Jun 28, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Forchapeatl commented Jul 17, 2022

jywarren commented Jul 19, 2022

Forchapeatl commented Jul 20, 2022

jywarren commented Oct 11, 2022 via email

Forchapeatl commented Jun 19, 2022 •

edited

Loading

Forchapeatl Jun 20, 2022 •

edited

Loading

Forchapeatl commented Jun 23, 2022 •

edited

Loading

Forchapeatl commented Jun 25, 2022 •

edited

Loading