{"id":28417,"date":"2022-03-23T22:05:42","date_gmt":"2022-03-23T22:05:42","guid":{"rendered":"http:\/\/Build-A-Virtual-Photo-Booth-with-Redwood"},"modified":"2022-03-23T22:05:42","modified_gmt":"2022-03-23T22:05:42","slug":"build-a-virtual-photo-booth-with-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/","title":{"rendered":"Build A Virtual Photo Booth"},"content":{"rendered":"

There are a lot of useful tools built into the browser that we don\u2019t take advantage of as much as we could. Working with WebRTC<\/a> is one of those tools that doesn\u2019t come up as often as it could.<\/p>\n

Do you have an app where a user can upload photos or videos? Why not let them capture that media right there on your site instead of getting them to dig up a photo from somewhere? Or maybe you want to make some kind of custom video call app. WebRTC is one tool you can use to do that.<\/p>\n

In this tutorial, you\u2019ll learn how to build a full-stack photo booth app that applies filters to images and videos and uploads them to Cloudinary, while saving a link to them in your own database. Hopefully at the end of this, you\u2019ll have a better understanding of how WebRTC works and one of the use cases for it.<\/p>\n

Setting up the tools we need<\/h2>\n

There are a few things we need to have in place before we get started on code. First, we\u2019ll be using a PostgreSQL database locally. If you don\u2019t have that installed, you can download it for free here<\/a>.<\/p>\n

Next, you\u2019ll need to have a Cloudinary account set up so you can upload the images and get the URL for your database. If you don\u2019t have a Cloudinary account, you can make a free one here<\/a>.<\/p>\n

The last thing we need to do is initialize the Redwood app we\u2019re going to build. Open a terminal and run the following command.<\/p>\n

yarn create redwood-app --typescript photobooth\n<\/code><\/span><\/pre>\n
This will create a number of files and directories with different pre-built functionality. We\u2019ll do all of our work in the api<\/code> and web<\/code> directories. The api<\/code> directory holds all of the work for the back-end and the web<\/code> directory contains all of the front-end code.<\/p>\n
Let\u2019s start by adding the business logic for the app on the back-end.<\/p>\n
Writing the database model<\/h2>\n
For this app, we want to upload the images a user takes to Cloudinary and then save the URL to the database. This is one of the ways you can have this image available in different parts of your web app.<\/p>\n
Go to the api > db<\/code> folder and open the schema.prisma<\/code> file. This is where we\u2019ll define the tables and relations for our database. Let\u2019s start by updating the provider<\/code> to postgresql<\/code> instead of sqlite<\/code>.<\/p>\n
Then you\u2019ll see the reference to DATABASE_URL<\/code>. This is an environment variable that defines the database connection string. So open the .env<\/code> file in the root of the project and uncomment the DATABASE_URL<\/code> line and update it with your connection string. It might look something like this.<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/photobooth<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will let the app establish a connection to the database so you can work with the data you want to store. Now back in the schema.prisma<\/code> file, let\u2019s write our photo model. You can delete the example model and then add the following code.<\/p>\n
model Photo {\n  id     Int    @id @default<\/span>(autoincrement())\n  url    String<\/span> @unique\n  userId String<\/span> @unique\n  user   User   @relation(fields: [userId], references<\/span>: [id])\n}\n\nmodel User {\n  id    String<\/span> @id @default<\/span>(uuid())\n  name  String<\/span>\n  photo Photo?\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ve defined a couple of models to show how these photos might be related to a specific user. The photos will have their own attributes and will be associated with a user based on the userId<\/code>. Then we have a user model defined that has a few attributes.<\/p>\n
Seeding the database<\/h3>\n
Since we aren\u2019t going to build out the functionality to manage users, we\u2019re going to add a default user to the database so that we have an id to reference when we\u2019re ready to upload pictures.<\/p>\n
In the api > db<\/code> directory, you\u2019ll see a seed.js<\/code> file. This is where we\u2019ll add the default user\u2019s information. There is a lot of commented out code in the main<\/code> function. Feel free to delete everything in the main<\/code> function and add this code.<\/p>\n
const<\/span> data = [\n  { name<\/span>: 'alice'<\/span> },\n]\n\nreturn<\/span> Promise<\/span>.all(\n  data.map(async<\/span> (user) => {\n    const<\/span> record = await<\/span> db.user.create({\n      data<\/span>: { name<\/span>: user.name },\n    })\n    console<\/span>.log(record)\n  })\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This adds one user record to the database. With the models and seed data ready, we can run a migration to get these changes to the database.<\/p>\n
Running the migration<\/h3>\n
In your terminal, run the following commands.<\/p>\n
yarn rw primsa migrate dev\nyarn rw prisma db seed\n<\/code><\/span><\/pre>\n
This will create the database and add two tables defined by our photo and user models. Then we add the default user to the database. That covers everything we need for our database. Now we can move on to the GraphQL back-end.<\/p>\n
Working with types and resolvers in GraphQL<\/h2>\n
Since we\u2019re working in the Redwood framework, there are a lot of commands we can use to generate a lot of the code we need. Normally to make a GraphQL back-end, you have to manually check that your types match the database schema exactly and that your resolvers call the right methods to trigger database changes.<\/p>\n
We\u2019re going to run a couple of commands that will create the types and resolvers we need for both models.<\/p>\n
yarn rw g sdl user\nyarn rw g sdl --crud photo\n<\/code><\/span><\/pre>\n
Take a look in the api > src > graphql<\/code> directory and you\u2019ll see two new files. These sdl files have the types for the queries and mutations we need to use for our GraphQL resolvers. Open the photos.sdl.ts<\/code> file and you\u2019ll see all of the types for the functionality we need to work with photos.<\/p>\n
You\u2019ll see similar types in the users.sdl.ts<\/code> file, but since we added the --crud<\/code> flag to the photo command we get a little extra functionality done for us. Now let\u2019s look at the resolvers.<\/p>\n
Go to api > src > services<\/code> and you\u2019ll see a couple of new folders. These folders have two test related files and one file with the resolvers for that respective table. Open photos.ts<\/code> and you\u2019ll see all of the resolvers for the CRUD functionality.<\/p>\n
This is one of my favorite things about Redwood. If you want to get a functional app quickly, it generates all of the code you need. With those two commands, we\u2019re done building the back-end.<\/p>\n
Now we can turn our attention to the front-end where some of the fun stuff happens.<\/p>\n
Generating the page for our photo booth<\/h2>\n
First thing we need to do on the front-end is generate the page that will hold the photo booth. There\u2019s a handy Redwood command to do this. In your terminal, run this command.<\/p>\n
yarn rw g page photobooth \/\n<\/code><\/span><\/pre>\n
This will create a new folder in web > src > pages<\/code> called PhotoboothPage<\/code>. In that folder, you\u2019ll find a test file, a Storybook<\/a> file, and the page component. It also updates the Routes.tsx<\/code> file to make this the home page route.<\/p>\n
Open the Photobooth.tsx<\/code> file in web > src > pages > PhotoboothPage<\/code> because this is where we\u2019ll be doing all of the coding. Let\u2019s start by deleting all of the imports and the code inside the PhotoboothPage<\/code> component.<\/p>\n
Writing the create mutation<\/h3>\n
Then we\u2019ll add the mutation to create new photo entries in our database. That means we\u2019ll import a mutation hook at the top of the file and right beneath it, we\u2019ll define the mutation.<\/p>\n
import<\/span> { useMutation } from<\/span> '@redwoodjs\/web'<\/span>\n\nconst<\/span> CREATE_PHOTO_MUTATION = gql`\n  mutation CreatePhotoMutation($input: CreatePhotoInput!) {\n    createPhoto(input: $input) {\n      id\n    }\n  }\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
const<\/span> [createPhoto] = useMutation(CREATE_PHOTO_MUTATION)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all for the mutation! Now we\u2019ll add another import so we can use a few different hooks. So at the top of the file, right below the useMutation<\/code> import, add the following.<\/p>\n
import<\/span> { useEffect, useRef, useState } from<\/span> 'react'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we\u2019ll add a few states and refs we\u2019ll be using. Inside the component, below the createPhoto<\/code> method, add this.<\/p>\n
const<\/span> videoRef = useRef()\nconst<\/span> canvasRef = useRef()\nconst<\/span> [mediaStream, setMediaStream] = useState(null<\/span>)\nconst<\/span> [src, setSrc] = useState(null<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
videoRef<\/code> is how we\u2019ll interact with the video element that will show the user\u2019s camera in the browser. This is where we get to play with the WebRTC stuff. canvasRef<\/code> is how we\u2019ll take a snapshot of the current frame of the video when the user wants to capture the picture.<\/p>\n
mediaStream<\/code> is how we\u2019ll get the feed from a user\u2019s camera. src<\/code> is the image data for the snapshot a user takes. It lets us show the user the image as soon as they take the picture.<\/p>\n
Let\u2019s write out the functions we need before we start adding elements to the page.<\/p>\n
Getting everything wired up<\/h3>\n
We want to request access to the user\u2019s camera as soon as they land on our page. To do that, we\u2019ll use the useEffect<\/code> hook. Beneath the last state declaration in the component, add this code.<\/p>\n
useEffect(()<\/span> =><\/span> {\n  async<\/span> function<\/span> enableStream<\/span>(<\/span>) <\/span>{\n    const<\/span> stream = await<\/span> navigator.mediaDevices.getUserMedia({\n      video<\/span>: true<\/span>,\n      audio<\/span>: false<\/span>,\n    })\n    setMediaStream(stream)\n  }\n\n  if<\/span> (!mediaStream) {\n    enableStream()\n  }\n}, [mediaStream])\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is where we get to use the WebRTC stuff! Calling getUserMedia<\/code> with the options we passed opens a user\u2019s camera but doesn\u2019t open their mic. We don\u2019t need access to their mic to take a picture. This goes into some data ethics with us taking the least amount of information from a user we need.<\/p>\n
Now when the page loads or there are any changes to the user\u2019s camera settings, the media stream will be updated. The next thing we need to do is set the media stream in the video element we\u2019ll make shortly. For now, add this code below the hook we just finished.<\/p>\n
if (mediaStream && videoRef.current && !videoRef.current.srcObject) {\n  videoRef.current.srcObject = mediaStream\n}\n<\/code><\/span><\/pre>\n
This checks that we have a media stream and a video element available. Then it sets the source of the video element to the media stream. This is how we show the camera in the browser.<\/p>\n
Next we have a small function to make the video play once the user has given us permission. This goes below the video check we just added.<\/p>\n
const<\/span> handleCanPlay = ()<\/span> =><\/span> {\n  videoRef.current.play()\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we have the largest function in our component. It will handle the upload to Cloudinary and the mutation to add the photo record to the database.<\/p>\n
const<\/span> uploadImage = async<\/span> (imgSrc) => {\n  const<\/span> uploadApi = `https:\/\/api.cloudinary.com\/v1_1\/${cloudName}<\/span>\/image\/upload`<\/span>\n\n  const<\/span> formData = new<\/span> FormData()\n  formData.append('file'<\/span>, imgSrc)\n  formData.append('upload_preset'<\/span>, uploadPreset)\n\n  const<\/span> cloudinaryRes = await<\/span> fetch(uploadApi, {\n    method<\/span>: 'POST'<\/span>,\n    body<\/span>: formData,\n  })\n\n  const<\/span> input = {\n    url<\/span>: cloudinaryRes.url,\n    userId<\/span>: '1efeb34e-287f-11ec-9621-0242ac130002'<\/span>,\n  }\n\n  createPhoto({\n    variables<\/span>: { input },\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, there\u2019s the upload API. You can get your cloud name from your Cloudinary dashboard. You might want to grab an upload preset while you\u2019re in the dashboard as well. That\u2019s where the uploadPreset<\/code> value comes from in the form data. The file<\/code> value will be the image data we get from the canvas.<\/p>\n
Then we make a fetch<\/code> request to the Cloudinary endpoint and take the url<\/code> to store in the database. You can find the userId<\/code> for the seeded user we made earlier directly in your Postgres instance and just paste it in there. At the very end, we add the photo record to the database.<\/p>\n
Only one more function left! We\u2019re going to get the image data from the canvas.<\/p>\n
const<\/span> takePicture = ()<\/span> =><\/span> {\n  const<\/span> context = canvasRef.current.getContext('2d'<\/span>)\n\n  context.drawImage(videoRef.current, 0<\/span>, 0<\/span>, 580<\/span>, 320<\/span>)\n\n  const<\/span> src = canvasRef.current.toDataURL()\n  setSrc(src)\n\n  uploadImage(src)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This gets the context of the canvas element so that we can capture the video frame and get the image data. Then we call the uploadImage<\/code> method we just wrote.<\/p>\n
We\u2019re finished with all of the functions now! All that\u2019s is rendering elements on the page.<\/p>\n
Rendering elements for the photo booth<\/h2>\n
We finally get to add that beautiful return statement. This is the last bit of code we need to write to get everything working. This will be the last thing inside the PhotoboothPage<\/code> component.<\/p>\n
return<\/span> (\n  <><\/span>\n    <h1<\/span>><\/span>Photobooth<\/h1<\/span>><\/span>\n    <video<\/span>\n      id<\/span>=\"video\"<\/span>\n      ref<\/span>={videoRef}<\/span>\n      onCanPlay<\/span>={handleCanPlay}<\/span>\n      autoPlay<\/span>\n      playsInline<\/span>\n      muted<\/span>\n    ><\/span>\n      Video stream not available.\n    <\/video<\/span>><\/span>\n    <button<\/span> onClick<\/span>={takePicture}<\/span>><\/span>Take photo<\/button<\/span>><\/span>\n    <canvas<\/span>\n      style<\/span>={{<\/span> display:<\/span> 'none<\/span>' }}\n      ref<\/span>={canvasRef}<\/span>\n      width<\/span>={580}<\/span>\n      height<\/span>={320}<\/span>\n    ><\/span><\/canvas<\/span>><\/span>\n    <img<\/span>\n      id<\/span>=\"photo\"<\/span>\n      alt<\/span>=\"The screen capture will appear in this box.\"<\/span>\n      src<\/span>={src}<\/span>\n    \/><\/span>\n  <\/><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The <video><\/code> element has the videoRef<\/code> we setup earlier and it calls the handleCanPlay<\/code> function we wrote to start up the video stream. Then we have a button that lets users take pictures when they\u2019re ready.<\/p>\n
Next is the <canvas><\/code> element with our canvasRef<\/code> as a prop. Lastly, there\u2019s the <img><\/code> element that lets users see the image they just took.<\/p>\n
Now we can run the app and finally see all of our hard work in action! In your terminal, run this command.<\/p>\n
yarn rw dev\n<\/code><\/span><\/pre>\n
Your browser should open and ask you for permission to access your camera. Once you give it permission, you should see something like this.<\/p>\n
\"showing<\/p>\n
If you take a picture, it\u2019ll look similar to this.<\/p>\n
\"the<\/p>\n
We\u2019re done and now you know how to get started with WebRTC! I\u2019ll leave any style work to you, but hopefully you see how this could be useful.<\/p>\n
Finished code<\/h2>\n
If you want to check out the complete front-end and back-end code, you can see everything in the photobooth<\/code> folder of this repo<\/a>.<\/p>\n
You can also check out the front-end in this Code Sandbox<\/a>.<\/p>\n
Conclusion<\/h2>\n
There are times when you\u2019ll run into these kinds of seemingly obscure use cases for different web functionality, but they can be super handy. You might end up working on a video chat app for doctors or handle some facial recognition software for a security company.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28418,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371,303],"class_list":["post-28417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nBuild A Virtual Photo Booth<\/title>\n<meta name=\"description\" content=\"Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build A Virtual Photo Booth\" \/>\n<meta property=\"og:description\" content=\"Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:05:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build A Virtual Photo Booth\",\"datePublished\":\"2022-03-23T22:05:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\",\"name\":\"Build A Virtual Photo Booth\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:05:42+00:00\",\"description\":\"Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA\",\"width\":5806,\"height\":3868},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build A Virtual Photo Booth\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build A Virtual Photo Booth","description":"Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Build A Virtual Photo Booth","og_description":"Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:05:42+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/"},"author":{"name":"","@id":""},"headline":"Build A Virtual Photo Booth","datePublished":"2022-03-23T22:05:42+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/","name":"Build A Virtual Photo Booth","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA","datePublished":"2022-03-23T22:05:42+00:00","description":"Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA","width":5806,"height":3868},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-photo-booth-with-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build A Virtual Photo Booth"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924556\/Web_Assets\/blog\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3\/c5e3e4adfc23de224ecd03a9aec2d50640ae806c-5806x3868-1_28418dbbb3.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28417"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28417\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28418"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
This uses a Redwood wrapper on Apollo<\/a> to work with the mutation we\u2019ve defined. Inside of the PhotoboothPage<\/code> component, we\u2019ll use this hook and definition to make a function we can use to execute the upload when a user takes a photo.<\/p>\n