Previous

createCapture()

The function createCapture() enables p5.js to connect to the default camera of your computer and thus display the result in the screen.

Inside this function, we should specify the type of media. In this case, this is video, thus we write createCapture(VIDEO)

If we want to display the video on the canvas we use the image() function. 

In order to hide the video created outside the canvas element we use nameofvideo.hide();. 

Example 

Here is an example code where p5.js uses your webcam: 

let camVideo;
function setup(){
  createCanvas(600,800);
  // make the connection to the webcam
  camVideo = createCapture('VIDEO');
  //set background color
  background(244,98,44);

}
function draw(){
  
}

You can see the result of the above code here

Exercise

  1. Open your Visual Studio editor and the p5yourName folder.
  2. Open the file ex812.js in your editor and save it as ex1023.js
  3. Open the file ex812.html in your editor and save it as ex1023.html
  4. In the ex1023.html file, update the link to ex1023.js  from exersice812.js
  5. Go to the index.html file and create, under Module 10, a link to the ex1023.html  file with the title "createCapture()".

Modify the ex1023.jsfile and use as a base the above example and the theory in order to hide the initial video that is outside the canvas and display the video only inside the canvas. You can see here an example.

Answer:

let camVideo;
function setup(){
  createCanvas(600,600);
  // make the connection to the webcam
  camVideo = createCapture('VIDEO');
  background(244,98,44);
  //hide initial video
  camVideo.hide();

}
function draw(){
  // display video on the canvas
  image(camVideo,0,0);
}

Do a Git commit with the message "createCapture()".

Previous