{"id":28007,"date":"2022-03-23T22:36:51","date_gmt":"2022-03-23T22:36:51","guid":{"rendered":"http:\/\/Edit-green-screen-videos-using-cloudinary-and-Sveltekit"},"modified":"2022-03-23T22:36:51","modified_gmt":"2022-03-23T22:36:51","slug":"edit-green-screen-videos-using-cloudinary-and-sveltekit","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/","title":{"rendered":"Edit Green Screen Videos"},"content":{"rendered":"

Introduction<\/h2>\n

Have you ever watched one of those programming videos where the person\u2019s face is overlayed over their computer screen? That\u2019s made possible using green screens. They\u2019re widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won\u2019t go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video<\/a> or this one<\/a>. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial we\u2019ll be using Cloudinary<\/a> and SvelteKit<\/a>. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.<\/p>\n

Codesandbox<\/h2>\n

The final project can be viewed on Codesandbox<\/a>.<\/p>\n<\/div>\n \n

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

You can find the full source code on my Github<\/a> repository.<\/p>\n

Prerequisites and setup<\/h2>\n

Before moving on further, it\u2019s important to note that working knowledge of Javascript is required for this tutorial. In addition to that, familiarity with Svelte<\/a> and SvelteKit<\/a> is recommended although not necessary. You can easily pick up the concepts. You also need to have Node.js and NPM installed on your development environment<\/p>\n

\n

DISCLAIMER: Svelte and more specifically SvelteKit, is at a very early stage and a few features are missing or require workarounds. Some notable features include file upload and loading environment variables during SSR or in the endpoint routes. You can check out this<\/a> and this<\/a> issues for more information and insight.<\/p>\n<\/blockquote>\n

Let\u2019s first create a new [SvelteKit] project. Run the following command in your terminal<\/p>\n

npm init svelte@next green-screen-videos-with<\/span>-cloudinary\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You\u2019ll be prompted for a few more options and then the CLI will scaffold a SvelteKit starter project for you. If you want to use the same options that I did, choose Skeleton project<\/strong> template, No<\/strong> for typescript, Yes<\/strong> for ESLint, Yes<\/strong> for Prettier. Follow the steps on the terminal to change the directory into your new project and install dependencies. Finally, open the project in your favorite code editor.<\/p>\n
Cloudinary API Keys<\/h3>\n
Cloudinary offers APIs for upload of media, optimization, transformation, and delivery of uploaded media. We need API keys to communicate with their API. Luckily, you can easily get started with a free account. Please note that resources for a free account are limited, so use the API sparingly. Create a new cloudinary<\/a> account if you do not already have one and log in. Navigate to the console page<\/a>. Here you\u2019ll find the Cloud name<\/code>, API Key<\/code>, and API Secret<\/code>.<\/p>\n
\"Cloudinary<\/p>\n
Create a new file named .env.local<\/code> at the root of your project and paste the following code inside.<\/p>\n
VITE_CLOUDINARY_CLOUD_NAME=YOUR_CLOUD_NAME\nVITE_CLOUDINARY_API_KEY=YOUR_API_KEY\nVITE_CLOUDINARY_API_SECRET=YOUR_API_SECRET\n<\/code><\/span><\/pre>\n
Replace YOUR_CLOUD_NAME<\/code> YOUR_API_KEY<\/code> and YOUR_API_SECRET<\/code> with the Cloud name<\/code>, API Key<\/code> and API Secret<\/code> values from the console page<\/a>.<\/p>\n
Yes, these are environment variables. Now I know I mentioned that SvelteKit did not have full support for environment variables. Have a look at this Github issue<\/a> to understand what I meant. It\u2019s more of an issue with Vite.js<\/a>, a build tool that Svelte uses, than with SvelteKit. I\u2019d also highly recommend you read this FAQ<\/a> and this blog post<\/a> before proceeding any further.<\/p>\n
To finish up the setup, let\u2019s install the dependencies<\/p>\n
Dependencies\/Libraries used<\/h3>\n
Run the following command to install the required dependencies.<\/p>\n
npm run install cloudinary\n<\/code><\/span><\/pre>\n
Sample videos for upload<\/h3>\n
Since SvelteKit doesn\u2019t directly support file upload yet, we\u2019re going to be using static files that we have pre-downloaded. I downloaded this<\/a> video for the foreground then just got a random video for the background. You can find these videos in the GitHub repo<\/a>.<\/p>\n
Getting started<\/h2>\n
Create a new folder called lib<\/code> under the src<\/code> folder and create a new file called cloudinary.js<\/code> inside src\/lib<\/code>. Paste the following code inside src\/lib\/cloudinary.js<\/code>.<\/p>\n
\/\/ src\/lib\/cloudinary.js<\/span>\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> 'cloudinary'<\/span>;\n\ncloudinary.config({\n\tcloud_name<\/span>: import<\/span>.meta.env.VITE_CLOUDINARY_CLOUD_NAME,\n\tapi_key<\/span>: import<\/span>.meta.env.VITE_CLOUDINARY_API_KEY,\n\tapi_secret<\/span>: import<\/span>.meta.env.VITE_CLOUDINARY_API_SECRET\n});\n\nconst<\/span> CLOUDINARY_FOLDER_NAME = 'green-screen-videos\/'<\/span>;\n\n\/**\n * Get cloudinary upload\n *\n * @param {string} id\n * @returns {Promise}\n *\/<\/span>\nexport<\/span> const<\/span> handleGetCloudinaryUpload = (id<\/span>) =><\/span> {\n\treturn<\/span> cloudinary.api.resource(id, {\n\t\ttype<\/span>: 'upload'<\/span>,\n\t\tprefix<\/span>: CLOUDINARY_FOLDER_NAME,\n\t\tresource_type<\/span>: 'video'<\/span>\n\t});\n};\n\n\/**\n * Get cloudinary uploads\n * @returns {Promise}\n *\/<\/span>\nexport<\/span> const<\/span> handleGetCloudinaryUploads = ()<\/span> =><\/span> {\n\treturn<\/span> cloudinary.api.resources({\n\t\ttype<\/span>: 'upload'<\/span>,\n\t\tprefix<\/span>: CLOUDINARY_FOLDER_NAME,\n\t\tresource_type<\/span>: 'video'<\/span>\n\t});\n};\n\n\/**\n * Uploads a video to cloudinary and returns the upload result\n *\n * @param {{path: string; transformation?:TransformationOptions;publicId?: string; folder?: boolean; }} resource\n *\/<\/span>\nexport<\/span> const<\/span> handleCloudinaryUpload = (resource<\/span>) =><\/span> {\n\treturn<\/span> cloudinary.uploader.upload(resource.path, {\n\t\t\/\/ Folder to store video in<\/span>\n\t\tfolder<\/span>: resource.folder ? CLOUDINARY_FOLDER_NAME : null<\/span>,\n\t\t\/\/ Public id of video.<\/span>\n\t\tpublic_id<\/span>: resource.publicId,\n\t\t\/\/ Type of resource<\/span>\n\t\tresource_type<\/span>: 'auto'<\/span>,\n\t\t\/\/ Transformation to apply to the video<\/span>\n\t\ttransformation<\/span>: resource.transformation\n\t});\n};\n\n\/**\n * Deletes resources from cloudinary. Takes in an array of public ids\n * @param {string[]} ids\n *\/<\/span>\nexport<\/span> const<\/span> handleCloudinaryDelete = (ids<\/span>) =><\/span> {\n\treturn<\/span> cloudinary.api.delete_resources(ids, {\n\t\tresource_type<\/span>: 'video'<\/span>\n\t});\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
CLOUDINARY_FOLDER_NAME<\/code> is the name of the cloudinary folder where we want to store all our uploaded videos. Storing all our similar uploads to one folder will make it easier for us to fetch all resources in a particular folder.<\/p>\n
handleGetCloudinaryUpload<\/code> and handleGetCloudinaryUploads<\/code> call the api.resource<\/code> and the api.resources<\/code> methods respectively. These are usually for getting either a single resource using its public id, or getting all resources in a folder. You can find more information on the two APIs in the official docs<\/a>.<\/p>\n
handleCloudinaryUpload<\/code> calls the uploader.upload<\/code> method on the SDK to upload a file, in this case, a video. It takes in an object that contains the path to the file and a transformation array. Read the upload api reference<\/a> for more information on the options you can pass.<\/p>\n
handleCloudinaryDelete<\/code> deletes resources from cloudinary by passing an array of public IDs to the api.delete_resources<\/code> method. Read more about it in the official docs<\/a>.<\/p>\n
Next, we need some API endpoints. SvelteKit uses a file-based routing system. Any file ending in a .js<\/code> or a .ts<\/code> extension in the src\/routes<\/code> folder becomes an endpoint. Read about this in the SvelteKit docs<\/a>.<\/p>\n
We want all our APIs to have the \/api\/<\/code> prefix so let\u2019s create a new folder called api<\/code> under src\/routes<\/code>. Inside of src\/routes\/api<\/code> create a folder called videos<\/code>. Create two files inside src\/routes\/api\/videos<\/code>, one called [...id].js<\/code> and another called index.js<\/code>. The files will map to the endpoints \/api\/videos\/<\/code> and \/api\/videos\/:id<\/code>.<\/p>\n
Paste the following inside src\/routes\/api\/videos\/index.js<\/code><\/p>\n
\/\/ src\/routes\/api\/videos\/index.js<\/span>\n\nimport<\/span> {\n\thandleCloudinaryDelete,\n\thandleCloudinaryUpload,\n\thandleGetCloudinaryUploads\n} from<\/span> '$lib\/cloudinary'<\/span>;\n\nexport<\/span> async<\/span> function<\/span> get<\/span>(<\/span>) <\/span>{\n\ttry<\/span> {\n\t\tconst<\/span> uploads = await<\/span> handleGetCloudinaryUploads();\n\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: 200<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\tresult<\/span>: uploads\n\t\t\t}\n\t\t};\n\t} catch<\/span> (error) {\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: error?.statusCode ?? 400<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\terror\n\t\t\t}\n\t\t};\n\t}\n}\n\nexport<\/span> async<\/span> function<\/span> post<\/span>(<\/span>) <\/span>{\n\ttry<\/span> {\n\t\t\/\/ Path to the foreground video. This is the video with the solid background color<\/span>\n\t\tconst<\/span> foregroundVideoPath = 'static\/videos\/foreground.mp4'<\/span>;\n\n\t\t\/\/ The solid background color of the foreground video<\/span>\n\t\tconst<\/span> foregroundChromaKeyColor = '#6adb47'<\/span>;\n\n\t\t\/\/ Upload the foreground video to Cloudinary<\/span>\n\t\tconst<\/span> foregroundUploadResponse = await<\/span> handleCloudinaryUpload({\n\t\t\tpath<\/span>: foregroundVideoPath,\n\t\t\tfolder<\/span>: false<\/span>\n\t\t});\n\n\t\t\/\/ Path to the background video. This is the video that will be placed in the background<\/span>\n\t\tconst<\/span> backgroundVideoPath = 'static\/videos\/background.mp4'<\/span>;\n\n\t\t\/\/ Upload the background video to Cloudinary<\/span>\n\t\tconst<\/span> backgroundUploadResponse = await<\/span> handleCloudinaryUpload({\n\t\t\tpath<\/span>: backgroundVideoPath,\n\t\t\tfolder<\/span>: true<\/span>,\n\t\t\ttransformation<\/span>: [\n\t\t\t\t{\n\t\t\t\t\twidth<\/span>: 500<\/span>,\n\t\t\t\t\tcrop<\/span>: 'scale'<\/span>\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\toverlay<\/span>: `video:${foregroundUploadResponse.public_id}<\/span>`<\/span>\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tflags<\/span>: 'relative'<\/span>,\n\t\t\t\t\twidth<\/span>: '0.6'<\/span>,\n\t\t\t\t\tcrop<\/span>: 'scale'<\/span>\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcolor<\/span>: foregroundChromaKeyColor,\n\t\t\t\t\teffect<\/span>: 'make_transparent:20'<\/span>\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tflags<\/span>: 'layer_apply'<\/span>,\n\t\t\t\t\tgravity<\/span>: 'north'<\/span>\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tduration<\/span>: '15.0'<\/span>\n\t\t\t\t}\n\t\t\t]\n\t\t});\n\n\t\t\/\/ Delete the foreground video from Cloudinary, We don't need it anymore<\/span>\n\t\tawait<\/span> handleCloudinaryDelete([foregroundUploadResponse.public_id]);\n\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: 200<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\tresult<\/span>: backgroundUploadResponse\n\t\t\t}\n\t\t};\n\t} catch<\/span> (error) {\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: error?.statusCode ?? 400<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\terror\n\t\t\t}\n\t\t};\n\t}\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
get<\/code> calls handleGetCloudinaryUploads<\/code> to get all the resources that have been uploaded to our folder in cloudinary.<\/p>\n
post<\/code> is where the magic happens. We first need the path to both the foreground video and the background video. You can download these videos from [here](https:\/\/res.cloudinary.com\/hackit-africa\/video\/upload\/v1637232264\/videos-svelte\/background.mp4<\/a> and Here<\/a> then save them inside static\/videos<\/code> folder. The foreground video is the green screen video(the video whose background we want to make transparent). We also define the background color that\u2019s in the foreground video in the foregroundChromaKeyColor<\/code> variable. We then upload the foreground video to cloudinary then followed by the background video. We then use Cloudinary\u2019s transformation to overlay the previously uploaded foreground video over the background video and also make the green background transparent. There\u2019s a guide showing how to make a video transparent using cloudinary. Here\u2019s the link<\/a>. Finally we delete the foreground video from cloudinary since we don\u2019t need it anymore.<\/p>\n
Paste the following code inside src\/routes\/api\/videos\/[...id].js<\/code>.<\/p>\n
\/\/ src\/routes\/api\/videos\/[...id].js<\/span>\n\nimport<\/span> { handleCloudinaryDelete, handleGetCloudinaryUpload } from<\/span> '$lib\/cloudinary'<\/span>;\n\nexport<\/span> async<\/span> function<\/span> get<\/span>({ params }<\/span>) <\/span>{\n\ttry<\/span> {\n\t\tconst<\/span> result = await<\/span> handleGetCloudinaryUpload(params.id);\n\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: 200<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\tresult\n\t\t\t}\n\t\t};\n\t} catch<\/span> (error) {\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: error?.statusCode ?? 400<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\terror\n\t\t\t}\n\t\t};\n\t}\n}\n\nexport<\/span> async<\/span> function<\/span> del<\/span>({ params }<\/span>) <\/span>{\n\ttry<\/span> {\n\t\tconst<\/span> result = await<\/span> handleCloudinaryDelete([params.id]);\n\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: 200<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\tresult\n\t\t\t}\n\t\t};\n\t} catch<\/span> (error) {\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: error?.statusCode ?? 400<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\terror\n\t\t\t}\n\t\t};\n\t}\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re just handling two HTTP verbs here, i.e. get and delete.<\/p>\n
get<\/code> calls handleGetCloudinaryUpload<\/code> to get a specific resource using its public ID.<\/p>\n
del<\/code> passes a public id to handleCloudinaryDelete<\/code> and deletes the resource with that public ID.<\/p>\n
Let\u2019s move on to the front end. For the frontend, SvelteKit also uses file-based routing. Files that are inside the src\/routes<\/code> directory and end in the extension .svelte<\/code> are treated as pages\/components. Check out this<\/a> documentation on page routing.<\/p>\n
Open src\/app.html<\/code> and add the following to the head.<\/p>\n
<style<\/span>><\/span>\n    body<\/span> {\n        font-family<\/span>: sans-serif;\n        margin<\/span>: 0<\/span>;\n        padding<\/span>: 0<\/span>;\n    }\n\n    * {\n        box-sizing<\/span>: border-box;\n        --color-primary<\/span>: #0070f3<\/span>;\n    }\n\n    button<\/span> {\n        padding<\/span>: 0<\/span> 20px<\/span>;\n        height<\/span>: 50px<\/span>;\n        border<\/span>: 1px<\/span> solid #ccc<\/span>;\n        background-color<\/span>: #ffffff<\/span>;\n        font-size<\/span>: 1.2rem<\/span>;\n        font-weight<\/span>: bold;\n        cursor<\/span>: pointer;\n    }\n\n    button<\/span>:disabled<\/span> {\n        background-color<\/span>: #cfcfcf<\/span>;\n    }\n\n    button<\/span>:hover<\/span>:not(<\/span>[disabled]<\/span>) {\n        color<\/span>: #ffffff<\/span>;\n        background-color<\/span>: var<\/span>(--color-primary);\n    }\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
It\u2019s just some simple styles that we want to have globally. Next, create a new folder under src<\/code> and call it components<\/code>. This folder will hold all of our shared components. Create a new file under src\/components<\/code> and name it Layout.svelte<\/code>. Paste the following code inside of src\/components\/Layout.svelte<\/code>.<\/p>\n
<nav<\/span>><\/span>\n\t<ul<\/span>><\/span>\n\t\t<li<\/span>><\/span><a<\/span> href<\/span>=\"\/\"<\/span>><\/span>Home<\/a<\/span>><\/span><\/li<\/span>><\/span>\n\t\t<li<\/span>><\/span><a<\/span> href<\/span>=\"\/videos\"<\/span>><\/span>Videos<\/a<\/span>><\/span><\/li<\/span>><\/span>\n\t<\/ul<\/span>><\/span>\n<\/nav<\/span>><\/span>\n\n<main<\/span>><\/span>\n\t<slot<\/span> \/><\/span>\n<\/main<\/span>><\/span>\n\n<style<\/span>><\/span>\n\tnav<\/span> {\n\t\tbackground-color<\/span>: #333333<\/span>;\n\t\tcolor<\/span>: #fff<\/span>;\n\t\tdisplay<\/span>: flex;\n\t\theight<\/span>: 100px<\/span>;\n\t}\n\n\tnav<\/span> ul<\/span> {\n\t\tdisplay<\/span>: flex;\n\t\tflex<\/span>: 1<\/span>;\n\t\tjustify-content<\/span>: center;\n\t\talign-items<\/span>: center;\n\t\tlist-style<\/span>: none;\n\t\tgap<\/span>: 8px<\/span>;\n\t\tmargin<\/span>: 0<\/span>;\n\t\tpadding<\/span>: 0<\/span>;\n\t}\n\n\tnav<\/span> ul<\/span> li<\/span> a<\/span> {\n\t\tpadding<\/span>: 10px<\/span> 20px<\/span>;\n\t\tcolor<\/span>: #000000<\/span>;\n\t\tdisplay<\/span>: block;\n\t\tbackground-color<\/span>: #ffffff<\/span>;\n\t\ttext-decoration<\/span>: none;\n\t\tfont-weight<\/span>: bold;\n\t}\n\n\tnav<\/span> ul<\/span> li<\/span> a<\/span>:hover<\/span> {\n\t\tcolor<\/span>: #ffffff<\/span>;\n\t\tbackground-color<\/span>: var<\/span>(--color-primary);\n\t}\n<\/span><\/style<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Paste the following code inside src\/routes\/index.svelte<\/code>.<\/p>\n
<script<\/span>><\/span>\n\timport<\/span> Layout from<\/span> '..\/components\/Layout.svelte'<\/span>;\n\timport<\/span> { goto } from<\/span> '$app\/navigation'<\/span>;\n\n\tlet<\/span> isLoading = false<\/span>;\n\n\tasync<\/span> function<\/span> onGenerate<\/span>(<\/span>) <\/span>{\n\t\ttry<\/span> {\n\t\t\tisLoading = true<\/span>;\n\n\t\t\tconst<\/span> response = await<\/span> fetch('\/api\/videos'<\/span>, {\n\t\t\t\tmethod<\/span>: 'post'<\/span>\n\t\t\t});\n\t\t\tconst<\/span> data = await<\/span> response.json();\n\t\t\tif<\/span> (!response.ok) {\n\t\t\t\tthrow<\/span> data;\n\t\t\t}\n\n\t\t\tgoto('\/videos\/'<\/span>, { replaceState<\/span>: false<\/span> });\n\t\t} catch<\/span> (error) {\n\t\t\tconsole<\/span>.error(error);\n\t\t} finally<\/span> {\n\t\t\tisLoading = false<\/span>;\n\t\t}\n\t}\n<\/span><\/script<\/span>><\/span>\n\n<Layout<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t\t{#if isLoading}\n\t\t\t<div<\/span> class<\/span>=\"loading\"<\/span>><\/span>\n\t\t\t\t<i<\/span>><\/span>Loading. Please be patient.<\/i<\/span>><\/span>\n\t\t\t\t<hr<\/span> \/><\/span>\n\t\t\t<\/div<\/span>><\/span>\n\t\t{\/if}\n\n\t\t<h1<\/span>><\/span>Make green screen videos transparent using Cloudinary + Svelte<\/h1<\/span>><\/span>\n\n\t\t<p<\/span>><\/span>\n\t\t\tWhile we're referring to them as green screen videos, you can really do this with any video\n\t\t\tthat has a solid background color.\n\t\t<\/p<\/span>><\/span>\n\n\t\t<p<\/span>><\/span>\n\t\t\tYou can change the background and foreground videos by editing the videos inside\n\t\t\t\/static\/videos\/\n\t\t<\/p<\/span>><\/span>\n\n\t\t<p<\/span>><\/span>Tap on the button below to edit the files in \/static\/videos\/<\/p<\/span>><\/span>\n\n\t\t<button<\/span> on:click<\/span>|preventDefault<\/span>={onGenerate}<\/span> disabled<\/span>={isLoading}<\/span>><\/span>GENERATE VIDEO<\/button<\/span>><\/span>\n\n\t\t<br<\/span> \/><\/span>\n\t\t<p<\/span>><\/span>or<\/p<\/span>><\/span>\n\t\t<br<\/span> \/><\/span>\n\t\t<a<\/span> href<\/span>=\"\/videos\"<\/span>><\/span>View generated videos<\/a<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n<\/Layout<\/span>><\/span>\n\n<style<\/span>><\/span>\n\tdiv<\/span>.loading<\/span> {\n\t\tcolor<\/span>: var<\/span>(--color-primary);\n\t}\n\tdiv<\/span>.wrapper<\/span> {\n\t\tmin-height<\/span>: 100vh<\/span>;\n\t\twidth<\/span>: 100%<\/span>;\n\t\tdisplay<\/span>: flex;\n\t\tflex-flow<\/span>: column;\n\t\tjustify-content<\/span>: center;\n\t\talign-items<\/span>: center;\n\t\tbackground-color<\/span>: #ffffff<\/span>;\n\t}\n<\/span><\/style<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
When the user taps on the button, the onGenerate<\/code> function makes a POST request to the \/api\/videos<\/code> endpoint that we created earlier. This uploads the two videos then navigate to the videos page that we\u2019ll create shortly. I won\u2019t go much into the syntax of svelte components since that\u2019s something you can easily grasp from the svelte documentation and other tutorials.<\/p>\n
Next, we need pages to display all videos and specific videos. Create a new folder called videos<\/code> under src\/routes<\/code>. Please note that this is a different videos folder from the one inside the api folder.<\/strong> Then create two files under src\/routes\/videos<\/code>, one called index.svelte<\/code> and another [...id].svelte<\/code>.<\/p>\n
Paste the following code inside of src\/routes\/videos\/index.svelte<\/code><\/p>\n
<script<\/span>><\/span>\n\timport<\/span> Layout from<\/span> '..\/..\/components\/Layout.svelte'<\/span>;\n\timport<\/span> { onMount } from<\/span> 'svelte'<\/span>;\n\n\tlet<\/span> isLoading = false<\/span>;\n\tlet<\/span> videos = [];\n\n\tonMount(async<\/span> () => {\n\t\ttry<\/span> {\n\t\t\tisLoading = true<\/span>;\n\n\t\t\tconst<\/span> response = await<\/span> fetch('\/api\/videos'<\/span>, {\n\t\t\t\tmethod<\/span>: 'GET'<\/span>\n\t\t\t});\n\n\t\t\tconst<\/span> data = await<\/span> response.json();\n\n\t\t\tif<\/span> (!response.ok) {\n\t\t\t\tthrow<\/span> data;\n\t\t\t}\n\n\t\t\tvideos = data.result.resources;\n\t\t} catch<\/span> (error) {\n\t\t\tconsole<\/span>.error(error);\n\t\t} finally<\/span> {\n\t\t\tisLoading = false<\/span>;\n\t\t}\n\t});\n<\/span><\/script<\/span>><\/span>\n\n<Layout<\/span>><\/span>\n\t{#if videos.length > 0}\n\t\t<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t\t\t<div<\/span> class<\/span>=\"videos\"<\/span>><\/span>\n\t\t\t\t{#each videos as video (video.public_id)}\n\t\t\t\t\t<div<\/span> class<\/span>=\"video\"<\/span>><\/span>\n\t\t\t\t\t\t<div<\/span> class<\/span>=\"thumbnail\"<\/span>><\/span>\n\t\t\t\t\t\t\t<img<\/span> src<\/span>={video.secure_url.replace(<\/span>'.mp4<\/span>', '.jpg<\/span>')} alt<\/span>={video.secure_url}<\/span> \/><\/span>\n\t\t\t\t\t\t<\/div<\/span>><\/span>\n\n\t\t\t\t\t\t<div<\/span> class<\/span>=\"actions\"<\/span>><\/span>\n\t\t\t\t\t\t\t<a<\/span> href<\/span>={<\/span>`\/videos<\/span>\/${video.public_id<\/span>}`}><\/span>Open Video<\/a<\/span>><\/span>\n\t\t\t\t\t\t<\/div<\/span>><\/span>\n\t\t\t\t\t<\/div<\/span>><\/span>\n\t\t\t\t{\/each}\n\t\t\t<\/div<\/span>><\/span>\n\t\t<\/div<\/span>><\/span>\n\t{:else}\n\t\t<div<\/span> class<\/span>=\"no-videos\"<\/span>><\/span>\n\t\t\t<b<\/span>><\/span>No videos yet<\/b<\/span>><\/span>\n\t\t\t<br<\/span> \/><\/span>\n\t\t\t<a<\/span> href<\/span>=\"\/\"<\/span>><\/span>Generate video<\/a<\/span>><\/span>\n\t\t<\/div<\/span>><\/span>\n\t{\/if}\n\n\t{#if isLoading && videos.length === 0}\n\t\t<div<\/span> class<\/span>=\"loading\"<\/span>><\/span>\n\t\t\t<b<\/span>><\/span>Loading...<\/b<\/span>><\/span>\n\t\t<\/div<\/span>><\/span>\n\t{\/if}\n<\/Layout<\/span>><\/span>\n\n<style<\/span>><\/span>\n\tdiv<\/span>.wrapper<\/span> div<\/span>.videos<\/span> {\n\t\tdisplay<\/span>: flex;\n\t\tflex-flow<\/span>: row wrap;\n\t\tgap<\/span>: 20px<\/span>;\n\t\tpadding<\/span>: 20px<\/span>;\n\t}\n\n\tdiv<\/span>.wrapper<\/span> div<\/span>.videos<\/span> div<\/span>.video<\/span> {\n\t\tflex<\/span>: 0<\/span> 1<\/span> 400px<\/span>;\n\t\tborder<\/span>: #ccc<\/span> 1px<\/span> solid;\n\t\tborder-radius<\/span>: 5px<\/span>;\n\t}\n\n\tdiv<\/span>.wrapper<\/span> div<\/span>.videos<\/span> div<\/span>.video<\/span> div<\/span>.thumbnail<\/span> {\n\t\twidth<\/span>: 100%<\/span>;\n\t}\n\n\tdiv<\/span>.wrapper<\/span> div<\/span>.videos<\/span> div<\/span>.video<\/span> div<\/span>.thumbnail<\/span> img<\/span> {\n\t\twidth<\/span>: 100%<\/span>;\n\t}\n\n\tdiv<\/span>.wrapper<\/span> div<\/span>.videos<\/span> div<\/span>.video<\/span> div<\/span>.actions<\/span> {\n\t\tpadding<\/span>: 10px<\/span>;\n\t}\n\n\tdiv<\/span>.loading<\/span>,\n\tdiv<\/span>.no-videos<\/span> {\n\t\theight<\/span>: calc<\/span>(100vh<\/span> - 100px<\/span>);\n\t\tdisplay<\/span>: flex;\n\t\tflex-flow<\/span>: column;\n\t\talign-items<\/span>: center;\n\t\tjustify-content<\/span>: center;\n\t}\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Paste the following code inside src\/routes\/videos\/[...id].svelte<\/code><\/p>\n
<script<\/span> context<\/span>=\"module\"<\/span>><\/span>\n\texport<\/span> async<\/span> function<\/span> load<\/span>({ page, fetch }<\/span>) <\/span>{\n\t\ttry<\/span> {\n\t\t\tconst<\/span> response = await<\/span> fetch(`\/api\/videos\/${page.params.id}<\/span>`<\/span>, {\n\t\t\t\tmethod<\/span>: 'GET'<\/span>\n\t\t\t});\n\n\t\t\tconst<\/span> data = await<\/span> response.json();\n\n\t\t\tif<\/span> (!response.ok) {\n\t\t\t\tthrow<\/span> data;\n\t\t\t}\n\n\t\t\treturn<\/span> {\n\t\t\t\tprops<\/span>: {\n\t\t\t\t\tvideo<\/span>: data.result\n\t\t\t\t}\n\t\t\t};\n\t\t} catch<\/span> (error) {\n\t\t\treturn<\/span> {\n\t\t\t\tstatus<\/span>: error?.statusCode ?? 400<\/span>,\n\t\t\t\terror<\/span>: error?.message ?? 'Something went wrong'<\/span>\n\t\t\t};\n\t\t}\n\t}\n<\/span><\/script<\/span>><\/span>\n\n<script<\/span>><\/span>\n\timport<\/span> Layout from<\/span> '..\/..\/components\/Layout.svelte'<\/span>;\n\timport<\/span> { goto } from<\/span> '$app\/navigation'<\/span>;\n\n\tlet<\/span> isLoading = false<\/span>;\n\texport<\/span> let<\/span> video;\n\n\tasync<\/span> function<\/span> deleteVideo<\/span>(<\/span>) <\/span>{\n\t\ttry<\/span> {\n\t\t\tisLoading = true<\/span>;\n\t\t\tconst<\/span> response = await<\/span> fetch(`\/api\/videos\/${video.public_id}<\/span>`<\/span>, {\n\t\t\t\tmethod<\/span>: 'DELETE'<\/span>\n\t\t\t});\n\n\t\t\tconst<\/span> data = await<\/span> response.json();\n\n\t\t\tif<\/span> (!response.ok) {\n\t\t\t\tthrow<\/span> data;\n\t\t\t}\n\n\t\t\tgoto('\/videos'<\/span>, { replaceState<\/span>: true<\/span> });\n\t\t} catch<\/span> (error) {\n\t\t\tconsole<\/span>.error(error);\n\t\t} finally<\/span> {\n\t\t\tisLoading = false<\/span>;\n\t\t}\n\t}\n<\/span><\/script<\/span>><\/span>\n\n<Layout<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t\t<div<\/span> class<\/span>=\"video\"<\/span>><\/span>\n\t\t\t<video<\/span> src<\/span>={video.secure_url}<\/span> controls<\/span>><\/span>\n\t\t\t\t<track<\/span> kind<\/span>=\"captions\"<\/span> \/><\/span>\n\t\t\t<\/video<\/span>><\/span>\n\t\t\t<div<\/span> class<\/span>=\"actions\"<\/span>><\/span>\n\t\t\t\t<button<\/span> on:click<\/span>|preventDefault<\/span>={deleteVideo}<\/span> disabled<\/span>={isLoading}<\/span>><\/span>Delete<\/button<\/span>><\/span>\n\t\t\t<\/div<\/span>><\/span>\n\t\t<\/div<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n<\/Layout<\/span>><\/span>\n\n<style<\/span>><\/span>\n\tdiv<\/span>.wrapper<\/span> {\n\t\tmin-width<\/span>: 100vh<\/span>;\n\t\tdisplay<\/span>: flex;\n\t\tjustify-content<\/span>: center;\n\t\talign-items<\/span>: center;\n\t}\n\n\tdiv<\/span>.wrapper<\/span> div<\/span>.video<\/span> {\n\t\twidth<\/span>: 80%<\/span>;\n\t}\n\n\tdiv<\/span>.wrapper<\/span> div<\/span>.video<\/span> video<\/span> {\n\t\twidth<\/span>: 100%<\/span>;\n\t\tobject-fit<\/span>: fill;\n\t}\n<\/span><\/style<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In this case, we use load to make GET a call to the \/api\/videos\/:id<\/code> endpoint to get the video with that specific ID. That\u2019s about it for the front end. We need one more thing, a custom error page.<\/p>\n
Create a file called __error.svelte<\/code> under src\/routes<\/code> and paste the following code inside.<\/p>\n
<script<\/span>><\/span>\n\timport<\/span> Layout from<\/span> '..\/components\/Layout.svelte'<\/span>;\n\n\tfunction<\/span> tryAgain<\/span>(<\/span>) <\/span>{\n\t\twindow<\/span>.location.reload();\n\t}\n<\/span><\/script<\/span>><\/span>\n\n<Layout<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t\t<b<\/span>><\/span>Something went wrong<\/b<\/span>><\/span>\n\t\t<br<\/span> \/><\/span>\n\t\t<button<\/span> on:click<\/span>|preventDefault<\/span>={tryAgain}<\/span>><\/span>Try Again<\/button<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n<\/Layout<\/span>><\/span>\n\n<style<\/span>><\/span>\n\t.wrapper<\/span> {\n\t\tdisplay<\/span>: flex;\n\t\tflex-direction<\/span>: column;\n\t\talign-items<\/span>: center;\n\t\tjustify-content<\/span>: center;\n\t\theight<\/span>: calc<\/span>(100vh<\/span> - 100px<\/span>);\n\t}\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
And that\u2019s it for this tutorial. You can run your app by running the following in your terminal.<\/p>\n
npm run dev -- --open   \n<\/code><\/span><\/pre>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28008,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,175,376,371,303],"class_list":["post-28007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-jamstack","tag-svelte","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nEdit Green Screen Videos<\/title>\n<meta name=\"description\" content=\"Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.\" \/>\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\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Edit Green Screen Videos\" \/>\n<meta property=\"og:description\" content=\"Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:36:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"636\" \/>\n\t<meta property=\"og:image:height\" content=\"278\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Edit Green Screen Videos\",\"datePublished\":\"2022-03-23T22:36:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA\",\"keywords\":[\"Guest Post\",\"JAMStack\",\"Svelte\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\",\"name\":\"Edit Green Screen Videos\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA\",\"datePublished\":\"2022-03-23T22:36:51+00:00\",\"description\":\"Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA\",\"width\":636,\"height\":278},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Edit Green Screen Videos\"}]},{\"@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":"Edit Green Screen Videos","description":"Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.","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\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/","og_locale":"en_US","og_type":"article","og_title":"Edit Green Screen Videos","og_description":"Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:36:51+00:00","og_image":[{"width":636,"height":278,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/"},"author":{"name":"","@id":""},"headline":"Edit Green Screen Videos","datePublished":"2022-03-23T22:36:51+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA","keywords":["Guest Post","JAMStack","Svelte","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/","name":"Edit Green Screen Videos","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA","datePublished":"2022-03-23T22:36:51+00:00","description":"Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA","width":636,"height":278},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/edit-green-screen-videos-using-cloudinary-and-sveltekit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Edit Green Screen Videos"}]},{"@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\/v1681925694\/Web_Assets\/blog\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741\/f5734e77f849cbe87ac242bb08a64edaedc000bc-636x278-1_2800844741.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28007","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=28007"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28007\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28008"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you\u2019ve used Next.js before, you probably know about getStaticProps<\/code> or getServerSideProps<\/code>. The load<\/code> function that we\u2019ve used here is similar to those. In SvelteKit, however, the load method is called on both Server Side Rendering and Client-Side Rendering. There are a few things you should be wary of when using load. I highly recommend you have a read of these docs<\/a>.<\/p>\n
Here we\u2019re using onMount<\/code> to make a GET request to the \/api\/videos<\/code> endpoint when the component mounts. Read about onMount<\/code> here<\/a>. For the video thumbnails, all we have to do is replace the .mp4 extension with .jpg and Cloudinary automatically gives us a thumbnail of that video. Clicking on a video takes you to the \/videos\/:id<\/code> page that we\u2019ll be creating next.<\/p>\n
Here we just have a nav at the top and the main element where the body of our pages will go. If you\u2019re not familiar with svelte slots and component composition, check out this tutorial<\/a> from the svelte website.<\/p>\n
To understand why we named our file [...id].js<\/code> instead of [id].js<\/code>, have a look at the rest parameters docs<\/a>. These allow us to match all paths following the api\/videos\/:id<\/code> instead of just api\/videos\/:id<\/code>. For example, say we have an endpoint \/api\/videos\/folder\/videoid<\/code>, if we just use [id].js<\/code> it will only match to \/api\/videos\/folder<\/code>.<\/p>\n
To handle requests of a particular verb\/type we need to export a function corresponding to the HTTP verb. For example, to handle GET requests we export a function called get<\/code>. The only exception is the DELETE verb where we use del<\/code> instead since delete is a reserved keyword. This is all covered in the docs<\/a>.<\/p>\n
At the top, we import the v2 API from the cloudinary SDK and rename it to cloudinary<\/code>. We then call the .config<\/code> method to initialize it with our API credentials. Note how we import the environment variables. Read this<\/a> for more information on that.<\/p>\n