About taking a photo with the webcam

p5.js Coding Questions
1

Hello my friends, I made an algorithm in which I have two buttons, one to take photo and one to save the photo taken.

I purposely did that, because I like to complicate things, you understand me, right? haha ha

The issue is that when I click on my take photo button I use a capture.get and pass this to a variable.

The problem is that when using this, my camera capture stops even though I re-call the variable capture and giving capture.loop to it again.

I was able to work around this problem by calling createCapture again and passing it back to my capture variable.

I do not know if it is the only possible solution, I would like something to make the camera return to normal after capture.get without using this method that I used to get around this situation, as it ends up adding more videos to the html.

I would like you to have a capture.start option or to have the capture.loop option work

Here is the code running online for you to look at as it was:
https://aprendendomais.000webhostapp.com/TirarFotoComButtonESalvar/

NOTE: You must have camerâ on the pc.

And here’s the code:

var capture;
var buttonTirarFoto;
var buttonSalvarFoto;
var fotoTirada;
var modo = 0;
var confirmarTakeSnap = false;


function setup() {
 createCanvas(windowWidth, windowHeight);
 capture = createCapture(VIDEO);
 capture.hide();
 
 buttonTirarFoto = createButton("Tirar Foto");
 buttonTirarFoto.position(width/2, height - 60); 
 buttonTirarFoto.mousePressed(takeSnap);
 
 buttonSalvarFoto = createButton("Salvar Foto");
 buttonSalvarFoto.position(width/2 - 100, height - 60);
 buttonSalvarFoto.mousePressed(saveSnap);
}

function draw() {    
  if(modo == 0){ 
    image(capture, width/2 + 25, 0);   
  }else if(modo == 1){
    background(255);
    image(fotoTirada, 0, 0, width, height);
    saveCanvas("minhaFoto", "jpg");
    background(255);
    modo = 0;
  }
}

function takeSnap(){
 image(capture, 20, 0);
 fotoTirada = capture.get();
 image(fotoTirada, 20, 0);
 
 capture = createCapture(VIDEO);
 capture.hide();
 
 confirmarTakeSnap = true;
}

function saveSnap(){
  if(confirmarTakeSnap){
   modo = 1;
  }
}

NOTE: You must import the DOM library to run the code.
Hugs!

1 Like
2

Hi willianxz,

Why do you want to get the new image of the camera when taking a snapshot? You already get the last image with your live feed so you can just use this image for the snapshot!

1 Like
3

True, I want to give the user the option to preview the photo before saving.

What I wanted to do and do was to have this button take picture, which when clicked fixed the image of the camera to the left of the screen.

What’s the difference ?, is that the user can click again the button to take photo and see if he really liked the photo, looking at the photo taken fixed to the left, if the user did not like the photo taken, he thought the picture was good.

After he has liked the photo taken, it is only him to click the save button, to save the photo that he is looking at the left.

The idea of ​​this algorithm is that the take photo button is just to take the same photo and the save button only to save the already taken photo.

No matter how you click the take photo button, no photo will be saved, just by clicking the save button.

What I could not improve was the question of when I use “fotoTirada = capture.get ()”, the live video to the right of the webcam stops working and turns a still image with the last video image of the camera.

To get around this problem I had to call again “capture = crateCapture (VIDEO)” so that it stays in live video, but this ends up creating more and more video tags in html, I do not know if there is another better way without having to call again “capture = createCapture (VIDEO)”

4

Hello my friends, I have managed to solve this problem by stumbling on a simple solution.

It was only to use the command tint (255);

I do not know why else this undoes the effect of freezing the webcam image when using capture.get ();

Now using the tint I can remove the dirty code I used to get around this freezing problem, as it was adding video tags each time I clicked the snapshot button.

Here is the updated code:

var capture;
var buttonTirarFoto;
var buttonSalvarFoto;
var fotoTirada;
var modo = 0;
var confirmarTakeSnap = false;


function setup() {
 createCanvas(windowWidth, windowHeight);
 capture = createCapture(VIDEO);
 capture.hide();
 
 buttonTirarFoto = createButton("Tirar Foto");
 buttonTirarFoto.position(width/2, height - 60); 
 buttonTirarFoto.mousePressed(takeSnap);
 
 buttonSalvarFoto = createButton("Salvar Foto");
 buttonSalvarFoto.position(width/2 - 100, height - 60);
 buttonSalvarFoto.mousePressed(saveSnap);
}

function draw() {    
  if(modo == 0){ 
    image(capture, width/2 + 25, 0);   
  }else if(modo == 1){
    background(255);
    image(fotoTirada, 0, 0, width, height);
    saveCanvas("minhaFoto", "jpg");
    background(255);
    modo = 0;
  }
}

function takeSnap(){
 tint(255);
 image(capture, 20, 0);
 fotoTirada = capture.get();
 image(fotoTirada, 20, 0);
 
 //Tive que usar esse codigo abaixo anteriormente para a camera nĂŁo travar ao usar o capture.get().
// capture = createCapture(VIDEO); consegui evitar de usar esse codigo que suja cada vez mais o html com novas tags de video
 //capture.hide(); colocando o tint ali em cima.
 
 confirmarTakeSnap = true;
}

function saveSnap(){
  if(confirmarTakeSnap){
   modo = 1;
  }
}

NOTE: Do not forget to import the DOM library.

Hugs and thanks for the attention!

5

@willianxz – do I understand right, that if you only remove the line tint(255) from the sketch above then you get freezing problems?

If so, that it odd behavior! It might be a bug, and worth reporting to the p5.js official repo as an issue. What do others think?

1 Like
6

@willianxz The program does not seem to freeze on my mac laptop when i comment out the tint(255);and i tried adjusting the value. Are you running one sketch at a time? something else is more likely consuming your cpu or memory.

1 Like
7

Here on my computer the problem will occur if I comment the line that has the tint () command, the webcam image will hang (freeze).

I do not know why, but using the tint () command undoes the webcam image freeze when using capture.get ()

I do not know if this is a bug, but I also find this behavior strange, although it may have to be used tint ().

I’m still learning how to deal with P5.js hehehe

Thank you all, hugs!