Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a custom event to capture frame before requestAnimationFrame #65

Closed
wants to merge 1 commit into from

Conversation

kt-12
Copy link

@kt-12 kt-12 commented Dec 23, 2017

I have added a CustomEvent before_frame_render just before requestAnimationFrame. Reason is given bellow.

I was trying to capture a frame and send it to sever using an ajax call.
Initially, I tried to use pretick but it just gave me all pixel transparent frame, showing buffer was empty at that point. I then tried tick event and even that resulted in the same transparent image, again showing buffer was empty at that point too.

Adding an event just before requestAnimationFrame helped me capture the frame and send it to sever.

I am still trying to understand the working of requestAnimationFrame and why pretick didn't do the trick.
I assume pretick is just before it starts adding pixels to the frame and tick is just after it has removed pixels from the frame.

The snippet I used to capture and send the frame :

var captureFrame = false;
//for doing something just before render
window.addEventListener('before_frame_render', function(){        
 if(window.captureFrame == true){
  if (captureFrame) {
        captureFrame = false;                      //captureFrame is false until the next click
        var awecanvas = document.getElementById('awe_canvas-0');
        awecanvas.getContext("webgl", {preserveDrawingBuffer: true}); //preserves the  buffer
        var dataURL = awecanvas.toDataURL();
         $.ajax({
          type: "POST",
          url: "saveImage.php",
          data: {
            imgBase64: dataURL,
            }
          }).done(function(str) {  // response 
          });
      }
    }
  });

//On click of capture button
 document.getElementById("capture").addEventListener("click", function(){ 
      captureFrame = true;
 });

@awe-media
Copy link
Owner

Thanks for your contribution. This github repos is now focused on supporting the development of apps using awe.js on the awe.media platform. You can still access our older awe.js library as the deprecated branch, however we no longer support that code.

@awe-media awe-media closed this Mar 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants