That means we can pass a set of transformations to it during image upload to tell it which transformations it should have readily cached. Upload it to the Cloudinary Media library and give it a name of overlay-photo.Ĭloudinary uses the concept of transformations to manipulate an image and comes with a wide variety of options. You can either use your own in the size 1200px width by 1600px height or download one here. In our case, it's going to be this overlayīefore we can start with the image manipulation, you'll have to upload the overlay to your Cloudinary media library. Change the aspect ratio to a 3x4 picture.In our case we'll want to do the following to the picture: Now that we have the Cloudinary SDK all set-up, it's time to work on the image manipulation. When you are done with both, hit save to apply the changes. Go to the Configure page of your Twilio Functions and in the Environment Variables section, add your CLOUDINARY_URL from the Cloudinary Dashboard.Īfterwards, scroll to the Dependencies section and add cloudinary with the version * to install the latest version. Start by installing the cloudinary SDK as a dependency and setting your Cloudinary credentials. Cloudinary combines both of these in one platform. We'll also need a URL that we can give Twilio to send the resulting image. It's great for our use case because we'll want to do some image manipulation on our picture. Manipulating the PictureĬloudinary is a platform for image management and manipulation. Let's see how we can modify it using Cloudinary. Press the "copy" button to copy the URL and open it in another tab and you can see the image you've sent. We might also have event.MediaUrl1 to event.MediaUrl9 available if more images have been sent but in our case we'll focus on the first one.įor now, we'll just log the URL, modify your Twilio Function accordingly and hit save:Īfterwards, send in a picture to the sandbox and check the logs at the bottom of your Function. Specifically in our case the event.MediaUrl0 is of interest because it will contain the URL of our image if one has been sent with the message. In Twilio Functions we can access these via the event object that is passed to our Function. When Twilio makes the HTTP request to your webhook, it will send a set of info around your message as part of that request. Now that we have our Twilio Function wired up, let's see how we can retrieve an image when we sent one. The response should always be "Hello World". You can test if everything is properly set up by texting any message to your WhatsApp sandbox. Scroll all the way to the bottom to save the changes. In a new tab, head over to the WhatsApp sandbox configuration screen and set the URL for "When a message comes in" to the path of your Twilio Function. ![]() Make sure to save the changes and copy the path to your Twilio Function. ![]() Once you created your new Function, give it a name like "WhatsApp Photobooth" and a path such as /photo. Inside the Twilio Console, head to the Functions section and create a new Twilio Function with the "Hello SMS" template. This allows us to host a serverless HTTP endpoint using Node.js. We could use any HTTP server for this, but in our case we'll use a Twilio Function. When a person sends a picture to our WhatsApp number (or Sandbox for that matter), Twilio will trigger a webhook request that we'll have to receive. If you prefer to view the next steps as a video to follow along, make sure to check out this video on YouTube:
0 Comments
Leave a Reply. |