{"id":28199,"date":"2022-02-16T17:20:51","date_gmt":"2022-02-16T17:20:51","guid":{"rendered":"http:\/\/Auto-generate-Video-Slideshows-with-Cloudinary"},"modified":"2022-02-16T17:20:51","modified_gmt":"2022-02-16T17:20:51","slug":"auto-generate-video-slideshows-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/auto-generate-video-slideshows-with-cloudinary\/","title":{"rendered":"Auto-generate Video Slideshows"},"content":{"rendered":"

Build a Personal Image Slideshow<\/h1>\n

In this article, we will take advantage of a new feature provided by Cloudinary<\/a>, which is video slideshow generation. We will build an application that uses a webcam to capture images and generate a slideshow video with them.<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Cloudinary Setup<\/h2>\n

To store and manage media using the Cloudinary platform, we need to create an account<\/a>. In the account details section on your dashboard, you should see your Credentials, as shown below. In our case, we only need the Cloud name<\/strong>.<\/p>\n

\"\"<\/p>\n

Since all our uploads will be done on our client application, we need to create an unsigned upload preset. See here<\/a> for how to create an unsigned upload preset.<\/p>\n

\"\"<\/p>\n

Take note of your preset name because we will need it later. As seen in the image above, I created an unsigned upload preset called testpreset<\/code>, but you can use any name you like.<\/p>\n

Cloudinary provides us with two ways to generate slideshows. In our case, we will be using the delivery URL method, and this requires a CLT template file provided by Cloudinary. This template file will be used to generate our slideshows. We need to download the template file<\/a> and upload it to our Cloudinary account. See here<\/a> for how to upload an asset to Cloudinary using the media library.<\/p>\n

\"\"<\/p>\n

After a successful upload, you should see the template file appear in the list of your media files. Take note of the template file\u2019s publicID as seen above. We\u2019ll need it later when generating URLs for our slideshows.<\/p>\n

Project Setup<\/h2>\n

Run this command in your terminal to create a simple React application:<\/p>\n

    npx create-react-app my-slideshow-app\n<\/code><\/span><\/pre>\n
Next, run the following command in your terminal to install the dependencies we\u2019ll need for this project:<\/p>\n
    npm i axios react-webcam\n<\/code><\/span><\/pre>\n
The axios<\/strong> module will be the HTTP client, while react-webcam<\/strong> will be used to access the user\u2019s camera to capture images.<\/p>\n
Breaking Down Our Application<\/h2>\n
The essence of our application is to display a slideshow containing some images. These are the pieces that make up our app, along with their fundamental roles:<\/p>\n