{"id":28423,"date":"2022-03-23T22:05:54","date_gmt":"2022-03-23T22:05:54","guid":{"rendered":"http:\/\/CCTV-video-effect-using-cloudinary-and-svelte-kit"},"modified":"2022-03-23T22:05:54","modified_gmt":"2022-03-23T22:05:54","slug":"cctv-video-effect-using-cloudinary-and-svelte-kit","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/","title":{"rendered":"Creating CCVT Video Effect"},"content":{"rendered":"

Introduction and setup<\/h2>\n

In this fun simple tutorial, we\u2019re going to be using Cloudinary<\/a> transformations and SvelteKit<\/a> to apply a CCTV effect to any video.<\/p>\n

For those who are not familiar, SvelteKit<\/a> is a Svelte<\/a> framework similar to Next.js. If you\u2019ve already written some Svelte code before, it\u2019s fairly easy to get up and running.<\/p>\n

You\u2019re going to need to have Node.js and NPM installed on your development environment if you want to follow along. It goes without saying that you need some working knowledge of Javascript. It\u2019s recommended that you be familiar with the basics of Svelte.<\/p>\n

\n

It\u2019s important to note that SvelteKit is still in the early development stages. Certain features may be missing or buggy. You can still find some workarounds. Some notable issues include file upload<\/a> and loading environment variables<\/a> during SSR. The latter is more of an issue with Vite<\/a> than with SvelteKit. It has, however, been addressed with Vite.js 2.7.<\/p>\n<\/blockquote>\n

To create a new SvelteKit project, you can run the following command in your terminal<\/p>\n

npm init svelte@next cctv-video-effect-with<\/span>-cloudinary\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
cctv-video-effect-with-cloudinary<\/code> is the name of our project. You can substitute this for any appropriate name. Just follow the prompts to complete the scaffolding. To keep things simple, choose Skeleton project<\/strong> template, No<\/strong> for typescript, Yes<\/strong> for ESLint, Yes<\/strong> for Prettier. You can, however, use whatever options you want.<\/p>\n
Cloudinary credentials<\/h3>\n
We need API keys to communicate with the cloudinary API. Open cloudinary<\/a> and create a free account if you do not have one yet. Proceed to log in then go to the console page<\/a>.<\/p>\n
\"Cloudinary<\/p>\n
Open the SvelteKit project we created in your favorite code editor. At the root of your project, create a file called .env.local<\/code>. We\u2019re going to be defining our environment variables in this file. Please read this FAQ<\/a> and this blog post<\/a> before proceeding.<\/p>\n
Paste the following code inside .env.local<\/code><\/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
Make sure to replace YOUR_CLOUD_NAME<\/code> YOUR_API_KEY<\/code> and YOUR_API_SECRET<\/code> with the Cloud name<\/strong>, API Key<\/strong> and API Secret<\/strong> values from the console page<\/a>.<\/p>\n
We also need to install the Cloudinary Node.js SDK<\/a>. Run the following command in your terminal, at the root of your project.<\/p>\n
npm install cloudinary\n<\/code><\/span><\/pre>\n
Video for upload.<\/h3>\n
I mentioned that we\u2019re not going to be selecting a video via a form, so we need a static video that we can use. It doesn\u2019t matter which video you use, you can just download a random video from the internet and save it inside static\/videos<\/code>. Make sure to take note of the file name. To make it easier later, you can rename it to video.mp4<\/code>. You can also get the full source code on my github<\/a> with a sample video already downloaded.<\/p>\n
Getting started.<\/h2>\n
The first thing we need is the code that we\u2019re going to use to communicate with the cloudinary SDK. Inside the src<\/code> folder, create a new folder called lib<\/code>. Create a new file named cloudinary.js<\/code> inside src\/lib<\/code> and paste the following code inside.<\/p>\n
import<\/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 = 'cctv-effect-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
Let\u2019s go over that code. We import the v2 API from the SDK. You can leave it as v2<\/code>, however, for readability, we rename it to cloudinary<\/code>.<\/p>\n
\/\/ import { v2 } from 'cloudinary';<\/span>\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> 'cloudinary'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We then proceed to initialize the SDK by calling the .config<\/code> method and passing the cloud name, api key, and api secret.<\/p>\n
cloudinary<\/span>.config<\/span>({\n\tcloud_name<\/span>: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME,\n\tapi_key: import.meta.env.VITE_CLOUDINARY_API_KEY,\n\tapi_secret: import.meta.env.VITE_CLOUDINARY_API_SECRET\n});\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The way we reference the environment variables looks a bit weird. If you\u2019re coming from Node.js, you\u2019re probably used to seeing something like<\/p>\n
process<\/span>.env<\/span>.VARIABLE_NAME<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
\n
Make sure not to use this syntax anywhere in your client-side code for sensitive variables.<\/p>\n<\/blockquote>\n
We also define a folder where cloudinary is going to store all our uploaded videos.<\/p>\n
The handleGetCloudinaryUpload<\/code> function calls the api.resource<\/code> method to get a single resource from cloudinary. Read about the API and options that you can pass here<\/a><\/p>\n
handleGetCloudinaryUploads<\/code> calls the api.resources<\/code> method to get all resources from a folder on cloudinary. Read about the API and options that you can pass here<\/a><\/p>\n
handleCloudinaryUpload<\/code> takes in an object that contains the path to the file that we want to upload and an optional transformation array. It calls the uploader.upload<\/code> method on the SDK to upload the file. Read the upload api reference<\/a>.<\/p>\n
handleCloudinaryDelete<\/code> deletes resources from cloudinary by passing an array of public IDs to the api.delete_resources<\/code> method. Read about it in the cloudianry admin docs<\/a>.<\/p>\n
That is it for the cloudinary bit.<\/p>\n
\n
Now let\u2019s create some endpoints that we can call from our front-end. A SvelteKit application can have both pages and endpoints. Any file inside the src\/routes<\/code> directory that ends with a .svelte<\/code> extension is automatically a page. On the other hand, any file inside src\/routes<\/code> that ends with a .js<\/code> or a .ts<\/code> extension is an endpoint.<\/p>\n
Create a folder called api<\/code> under src\/routes<\/code>. This folder will hold all of our endpoints. Since SvelteKit uses a file-based routing system, it means that all our endpoints will begin with \/api<\/code>.<\/p>\n
Create a folder called videos<\/code> under src\/routes\/api<\/code>. Inside src\/routes\/api\/videos<\/code> create a new file called index.js<\/code>. This file will handle HTTP requests to the endpoint \/api\/videos<\/code>. Paste the following code inside src\/routes\/api\/videos\/index.js<\/code><\/p>\n
import<\/span> { handleCloudinaryUpload, handleGetCloudinaryUploads } 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\tconsole<\/span>.error(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\tfunction<\/span> generateLayer<\/span>(text, gravity, color = '#ffffff'<\/span><\/span>) <\/span>{\n\t\treturn<\/span> [\n\t\t\t{\n\t\t\t\tcolor,\n\t\t\t\toverlay<\/span>: {\n\t\t\t\t\tfont_family<\/span>: 'Courier'<\/span>,\n\t\t\t\t\tfont_size<\/span>: 15<\/span>,\n\t\t\t\t\tfont_weight<\/span>: 'bold'<\/span>,\n\t\t\t\t\ttext\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tflags<\/span>: 'layer_apply'<\/span>,\n\t\t\t\tgravity,\n\t\t\t\tx<\/span>: '15'<\/span>,\n\t\t\t\ty<\/span>: '15'<\/span>\n\t\t\t}\n\t\t];\n\t}\n\n\ttry<\/span> {\n\t\tconst<\/span> date = new<\/span> Date<\/span>();\n\n\t\t\/\/ Path to the video.<\/span>\n\t\tconst<\/span> videoPath = 'static\/videos\/video.mp4'<\/span>;\n\n\t\t\/\/ Upload the video to Cloudinary<\/span>\n\t\tconst<\/span> uploadResponse = await<\/span> handleCloudinaryUpload({\n            path<\/span>: videoPath,\n            folder<\/span>: true<\/span>,\n            transformation<\/span>: [\n                \/\/ Crop the video<\/span>\n                {\n                    width<\/span>: 500<\/span>,\n                    crop<\/span>: 'scale'<\/span>\n                },\n                \/\/ Add a border<\/span>\n                {\n                    border<\/span>: '5px_solid_rgb:00ffffff'<\/span>\n                },\n                \/\/ Add some visual noise<\/span>\n                {\n                    effect<\/span>: 'noise:50'<\/span>\n                },\n                \/\/ Reduce the saturation<\/span>\n                {\n                    effect<\/span>: 'saturation:-100'<\/span>\n                },\n                \/\/ Modify the contrast<\/span>\n                {\n                    effect<\/span>: 'contrast:50'<\/span>\n                },\n                ...generateLayer(\n                    `${date.getDate()}<\/span>-${date.getMonth() + 1<\/span>}<\/span>-${date.getFullYear()}<\/span>`<\/span>,\n                    'north_west'<\/span>\n                ),\n                ...generateLayer('REC'<\/span>, 'north_east'<\/span>, '#ff0000'<\/span>),\n                ...generateLayer('Camera 1'<\/span>, 'south_east'<\/span>)\n            ]\n        });\n\n\t\treturn<\/span> {\n\t\t\tstatus<\/span>: 200<\/span>,\n\t\t\tbody<\/span>: {\n\t\t\t\tresult<\/span>: uploadResponse\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
In our case, when we receive GET requests we want to get all uploads by calling the handleGetCloudinaryUploads<\/code> function that we created earlier.<\/p>\n
When we receive POST requests we want to upload the video that we saved inside static\/videos<\/code>. Inside our post<\/code> function, we have a function called generateLayer<\/code>. This function will generate the transformation objects we need to pass to cloudinary. The transformation objects are passed to the transformation array in the handleCloudinaryUpload<\/code> function that we created earlier. This is then passed to the uploader.upload<\/code> method on the cloudinary SDK. Read about the transformation api<\/a>. Our CCTV video will have some text: the date, recording status, and camera number. These are the layers that we are generating using the generateLayer<\/code> function. Read this guide on adding text overlays to videos<\/a> with cloudinary transformations.<\/p>\n
If you downloaded a video to static\/videos<\/code> and gave it a name other than video.mp4<\/code> remember to change the following line to match the name of your video.<\/p>\n
\/\/ Path to the video.<\/span>\nconst<\/span> videoPath = 'static\/videos\/video.mp4'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The following piece of code is responsible for making the upload to cloudinary.<\/p>\n
\/\/ Upload the video to Cloudinary<\/span>\nconst<\/span> uploadResponse = await<\/span> handleCloudinaryUpload({\n    path<\/span>: videoPath,\n    folder<\/span>: true<\/span>,\n    transformation<\/span>: [\n        \/\/ Crop the video<\/span>\n        {\n            width<\/span>: 500<\/span>,\n            crop<\/span>: 'scale'<\/span>\n        },\n        \/\/ Add a border<\/span>\n        {\n            border<\/span>: '5px_solid_rgb:00ffffff'<\/span>\n        },\n        \/\/ Add some visual noise<\/span>\n        {\n            effect<\/span>: 'noise:50'<\/span>\n        },\n        \/\/ Reduce the saturation<\/span>\n        {\n            effect<\/span>: 'saturation:-100'<\/span>\n        },\n        \/\/ Modify the contrast<\/span>\n        {\n            effect<\/span>: 'contrast:50'<\/span>\n        },\n        ...generateLayer(\n            `${date.getDate()}<\/span>-${date.getMonth() + 1<\/span>}<\/span>-${date.getFullYear()}<\/span>`<\/span>,\n            'north_west'<\/span>\n        ),\n        ...generateLayer('REC'<\/span>, 'north_east'<\/span>, '#ff0000'<\/span>),\n        ...generateLayer('Camera 1'<\/span>, 'south_east'<\/span>)\n    ]\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We then return a successful response or an error. Read about this from the SvelteKit docs<\/a>.<\/p>\n
\n
Create a new file called [...id].js<\/code> under src\/routes\/api\/videos<\/code>. This file will handle all HTTP requests made to the endpoint \/api\/videos\/:id<\/code>. Paste the following code inside src\/routes\/api\/videos\/[...id].js<\/code>.<\/p>\n
import<\/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
This is very similar to src\/routes\/api\/videos\/index.js<\/code> save for the file name syntax and that we\u2019re handling GET requests and DELETE requests.<\/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
That\u2019s it for the backend.<\/p>\n
\n
Remember that client-side pages and components end in the extension .svelte<\/code>.<\/p>\n
Open src\/app.html<\/code> and add the following style tag 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    :root<\/span> {\n        --color-primary<\/span>: #ff00ff<\/span>;\n    }\n\n    * {\n        box-sizing<\/span>: border-box;\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
Create a file called __layout.svelte<\/code> inside src\/routes\/<\/code> folder. Paste the following code inside src\/routes\/__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>: #000000<\/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
<script<\/span>><\/span>\n\tfunction<\/span> tryAgain<\/span>(<\/span>) <\/span>{\n\t\twindow<\/span>.location.reload();\n\t}\n<\/span><\/script<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t<b<\/span>><\/span>Something went wrong<\/b<\/span>><\/span>\n\t<br<\/span> \/><\/span>\n\t<button<\/span> on:click<\/span>|preventDefault<\/span>={tryAgain}<\/span>><\/span>Try Again<\/button<\/span>><\/span>\n<\/div<\/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\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> { goto } from<\/span> '$app\/navigation'<\/span>;\n\n\texport<\/span> let<\/span> isLoading;\n\n\tasync<\/span> function<\/span> generateVideo<\/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\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>: 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<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t{#if isLoading}\n\t\t<div<\/span> class<\/span>=\"loading\"<\/span>><\/span>\n\t\t\t<i<\/span>><\/span>Loading. Please be patient.<\/i<\/span>><\/span>\n\t\t\t<hr<\/span> \/><\/span>\n\t\t<\/div<\/span>><\/span>\n\t{\/if}\n\t<h1<\/span>><\/span>CCTV Video effect with cloudinary<\/h1<\/span>><\/span>\n\t<p<\/span>><\/span>Apply CCTV effect to any video using cloudinary transformations<\/p<\/span>><\/span>\n\n\t<p<\/span>><\/span>You can change the video by editing the video, video.mp4 inside \/static\/videos\/<\/p<\/span>><\/span>\n\n\t<div<\/span> class<\/span>=\"actions\"<\/span>><\/span>\n\t\t<button<\/span> on:click<\/span>|preventDefault<\/span>={generateVideo}<\/span> disabled<\/span>={isLoading}<\/span>><\/span>Convert video<\/button<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n\n    <br<\/span> \/><\/span>\n    <p<\/span>><\/span>or<\/p<\/span>><\/span>\n    <br<\/span> \/><\/span>\n    <a<\/span> href<\/span>=\"\/videos\"<\/span>><\/span>View generated videos<\/a<\/span>><\/span>\n<\/div<\/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
The generateVideo<\/code> function is called when the user clicks on the Convert Video button. The function makes a POST request to the \/api\/videos<\/code> endpoint that we created. The endpoint will make the upload to cloudinary and apply the transformations we need to achieve the CCTV effect.<\/p>\n
\n
I am assuming that you\u2019re familiar with the syntax for svelte components. For this reason, I won\u2019t go into too much detail.<\/p>\n<\/blockquote>\n
\n
Create a folder called videos<\/code> under src\/routes\/videos<\/code>. Please note that this is a different videos folder from the one inside the api folder.<\/strong> Create a file called index.svelte<\/code> inside src\/routes\/videos<\/code> and paste the following code inside.<\/p>\n
<script<\/span>><\/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{#if videos.length > 0}\n\t<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t\t<div<\/span> class<\/span>=\"videos\"<\/span>><\/span>\n\t\t\t{#each videos as video (video.public_id)}\n\t\t\t\t<div<\/span> class<\/span>=\"video\"<\/span>><\/span>\n\t\t\t\t\t<div<\/span> class<\/span>=\"thumbnail\"<\/span>><\/span>\n\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<\/div<\/span>><\/span>\n\n\t\t\t\t\t<div<\/span> class<\/span>=\"actions\"<\/span>><\/span>\n\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<\/div<\/span>><\/span>\n\t\t\t\t<\/div<\/span>><\/span>\n\t\t\t{\/each}\n\t\t<\/div<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n{:else}\n\t<div<\/span> class<\/span>=\"no-videos\"<\/span>><\/span>\n\t\t<b<\/span>><\/span>No videos yet<\/b<\/span>><\/span>\n\t\t<br<\/span> \/><\/span>\n\t\t<a<\/span> href<\/span>=\"\/\"<\/span>><\/span>Generate video<\/a<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n{\/if}\n\n{#if isLoading && videos.length === 0}\n\t<div<\/span> class<\/span>=\"loading\"<\/span>><\/span>\n\t\t<b<\/span>><\/span>Loading...<\/b<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n{\/if}\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
\n
Let\u2019s now create a page to show individual videos. Create a new file called [...id].svelte<\/code> under src\/routes\/videos\/<\/code>. This syntax, just like the one for src\/routes\/api\/videos\/[...id].js<\/code>, is for multiple dynamic parameters, only this time we\u2019re doing it on the client-side. Paste the following 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> { 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<div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"video\"<\/span>><\/span>\n\t\t<video<\/span> src<\/span>={video.secure_url}<\/span> controls<\/span>><\/span>\n\t\t\t<track<\/span> kind<\/span>=\"captions\"<\/span> \/><\/span>\n\t\t<\/video<\/span>><\/span>\n\t\t<div<\/span> class<\/span>=\"actions\"<\/span>><\/span>\n\t\t\t<button<\/span> on:click<\/span>|preventDefault<\/span>={deleteVideo}<\/span> disabled<\/span>={isLoading}<\/span>><\/span>Delete<\/button<\/span>><\/span>\n\t\t<\/div<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n<\/div<\/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
The load<\/code> function, in this case, makes a GET request to the \/api\/videos\/:id<\/code> endpoint. This returns the video with the specified ID. For the component, we have also have a deleteVideo<\/code> function which makes a DELETE request to \/api\/videos\/:id<\/code> and deletes the video with the specified ID from cloudinary. For the component body, we just have a video element that shows the video to the user.<\/p>\n
\n
Good news! \ud83d\ude03 You made it to the end \ud83e\udd73. You can now run your application and try it out.<\/p>\n
npm run dev -- --open\n<\/code><\/span><\/pre>\n
\n
Remember that this is a simple implementation for demonstration purposes. You can make a few optimizations for a production environment. Also, keep in mind that SvelteKit is still early in development. Issues such as native file upload are being sorted out and might be ready with the first stable version.<\/p>\n<\/blockquote>\n
Codesandbox<\/h2>\n
The final project can be viewed on Codesandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Thank you for your time. You can find the full source code on my Github<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28424,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,382,376,371,303],"class_list":["post-28423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-player-video","tag-svelte","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nCreating CCVT Video Effect<\/title>\n<meta name=\"description\" content=\"Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.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\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating CCVT Video Effect\" \/>\n<meta property=\"og:description\" content=\"Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:05:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"650\" \/>\n\t<meta property=\"og:image:height\" content=\"417\" \/>\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\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating CCVT Video Effect\",\"datePublished\":\"2022-03-23T22:05:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Player Video\",\"Svelte\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\",\"name\":\"Creating CCVT Video Effect\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA\",\"datePublished\":\"2022-03-23T22:05:54+00:00\",\"description\":\"Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.js\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA\",\"width\":650,\"height\":417},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating CCVT Video Effect\"}]},{\"@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":"Creating CCVT Video Effect","description":"Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.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\/cctv-video-effect-using-cloudinary-and-svelte-kit\/","og_locale":"en_US","og_type":"article","og_title":"Creating CCVT Video Effect","og_description":"Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.js","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:05:54+00:00","og_image":[{"width":650,"height":417,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.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\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/"},"author":{"name":"","@id":""},"headline":"Creating CCVT Video Effect","datePublished":"2022-03-23T22:05:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA","keywords":["Guest Post","Player Video","Svelte","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/","name":"Creating CCVT Video Effect","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA","datePublished":"2022-03-23T22:05:54+00:00","description":"Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.js","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA","width":650,"height":417},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/cctv-video-effect-using-cloudinary-and-svelte-kit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating CCVT Video Effect"}]},{"@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\/v1681924540\/Web_Assets\/blog\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21\/63599dbe551c27614bdd2d3cc9fddf224aa51e9c-650x417-1_284244ba21.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28423","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=28423"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28423\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28424"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Let\u2019s talk about the first script tag. Note that this script tag is marked with context="module"<\/code>, this is because it\u2019s supposed to run before the component is rendered. If you\u2019ve used Next.js before, you probably know about getStaticProps<\/code> or getServerSideProps<\/code>. The load<\/code> function that is used inside this script tag is very similar to Next.js getStaticProps<\/code> or getServerSideProps<\/code>. One difference is that in SvelteKit, the method runs on both the server and the client. Have a read of these docs<\/a> to avoid some common pitfalls. Since the load function also runs on the client, avoid accessing sensitive environment variables here.<\/p>\n
The onMount<\/code> function is run when a svelte component is mounted to the DOM. Read about it here<\/a>. The function makes a GET request to our \/api\/videos<\/code> endpoint and fetches all uploaded videos. It then updates the video\u2019s array\/state with the result. On this page, we\u2019re not actually showing the videos because we don\u2019t want to load all those videos on one page. Instead, we\u2019re using a clever cloudinary trick to generate thumbnails for the videos<\/a>. By changing the extension of the video from .mp4<\/code> to .jpg<\/code>, cloudinary generates a thumbnail for us.<\/p>\n
This is what\u2019s called a layout component<\/a>. This component will be applied to every page. In case you\u2019re not familiar with svelte slots and component composition, check out this tutorial<\/a> from the svelte website. Similarly, we also need an error page layout<\/a> to show whenever there\u2019s an error. Create a file called __error.svelte<\/code> inside src\/routes<\/code> and paste the following code inside.<\/p>\n
Regarding the syntax, you need to understand rest parameters<\/a>. We could have used the syntax for dynamic routes and named it as [id].js<\/code> but this would have only matched \/api\/videos\/:id<\/code>. We want to match all routes that come after \/api\/videos\/<\/code> for example \/api\/videos\/:id<\/code>, \/api\/videos\/:id\/someAction<\/code>, \/api\/videos\/:id\/someAction\/:anotherId<\/code>. In other words, we want to use the rest parameters<\/a> syntax when we expect a route to have multiple dynamic parameters.<\/p>\n
Pay attention to the transformation array. The first thing we do is crop the video so that we have a consistent width for all videos. Read about this here<\/a>. Next, we add a border to our video. Read about how to do that here<\/a>. We then proceed to add some visual noise to the video. Read about how to do that here<\/a>. The other thing is to modify the saturation and contrast so that we have a black and white effect. Read about that here<\/a> and here<\/a>. We also have the last three transformations that are being generated by the generateLayer<\/code> function. The first displays the date at the top left, the second displays the text REC<\/strong> on the top right, and the third displays the text Camera 1<\/strong> on the bottom right.<\/p>\n
When handling requests of a particular verb\/type we need to export a function corresponding to the HTTP verb. For example, to handle GET requests we need to export a function called get<\/code>, to handle POST requests we need to export a function called post<\/code> and so on. The only exception is the DELETE verb where we use del<\/code> instead since delete is a reserved keyword. You can get more information on this in the docs<\/a>.<\/p>\n
Like I mentioned before, vite.js had some issue<\/a> with handling environment variables server-side. Read this guide<\/a> for more information on how Vite handles these variables.<\/p>\n
Let\u2019s understand the process, before proceeding. Ideally, you would want to allow the user to select a video file from their device, upload that video to cloudinary and apply the transformations. Because of the file upload issue that I mentioned earlier, we\u2019re not going to be doing this. Instead, we\u2019ll use a video file that is static. There\u2019s a workaround to the file upload here<\/a> in case you are interested.<\/p>\n