{"id":27735,"date":"2022-08-15T07:03:21","date_gmt":"2022-08-15T07:03:21","guid":{"rendered":"http:\/\/enhance-videos-audio-quality-in-nuxtjs"},"modified":"2025-04-16T14:46:24","modified_gmt":"2025-04-16T21:46:24","slug":"enhance-videos-audio-quality-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/","title":{"rendered":"Enhance Videos&#039; Audio Quality in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Interactivity is fast becoming a norm in building applications. Integrating this interactivity is sometimes an arduous task for developers. Over time, solutions have been created to take care of these tasks while developers focus on other aspects of the application development. An example of this solution is the <a href=\"https:\/\/dolby.io\/\">Dolby APIs<\/a>. Dolby provides a range of APIs for converting digital media formats or enhancing audio quality to produce high-quality media and communications.<\/p>\n<p>In this article, we\u2019ll use the Dolby API, <a href=\"https:\/\/cloudinary.com\/\">Cloudinary,<\/a> and <a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.<\/p>\n<p>Nuxt.js is a Vue.js based, open-source JavaScript library that improves building server-rendered Vue.js applications, leading to more performant web applications.<\/p>\n<p>Cloudinary is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/enhance-audio-video-quality-vq6fmp\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/enhance-audio-video-quality-vq6fmp?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Enhance audio quality of videos in NuxtJs\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>GitHub<\/h2>\n<p>Check out the complete source code <a href=\"https:\/\/github.com\/MoeRayo\/nuxt-video-qaulity\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js<\/li>\n<li>Basic knowledge of JavaScript<\/li>\n<li>Familiarity with Nuxt.js<\/li>\n<li>A Cloudinary account (sign up for a free account <a href=\"https:\/\/cloudinary.com\/signup\">here<\/a>)<\/li>\n<li>A Dolby account for audio processing (Signup is completely <a href=\"https:\/\/dolby.io\/signup\">free<\/a>)<\/li>\n<\/ul>\n<h2>Creating a Nuxt.js project<\/h2>\n<p>Use <code>npx create-nuxt-app &lt;project-name&gt;<\/code> in your terminal to create a new Nuxt.js project.<\/p>\n<p>The process of scaffolding the project provides a list of options, which should look like this:\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660289122\/e-622f762c6cb5ad0068bc82c6\/mdmxwejvagwj2u3vfszl.png\" alt=\"Scaffolding project options\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"676\" height=\"218\"\/><\/p>\n<p>After successful project creation, navigate into your directory and start the application by running the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span>\nnpm run dev\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Nuxt.js will start a hot-reloading development environment accessible by default at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h2>Setting up Cloudinary Upload Widget<\/h2>\n<p>We need to set up a Cloudinary upload widget, which will be responsible for uploading our videos to Cloudinary. To do this, we will add the link in the <code>head<\/code> object of our project\u2019s <code>nuxt.config.js<\/code>. This adds the script to be used globally in the application.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">head<\/span>: {\n    <span class=\"hljs-attribute\">script<\/span>: &#91;\n      {\n        src: <span class=\"hljs-string\">'https:\/\/upload-widget.cloudinary.com\/global\/all.js'<\/span>\n      }\n    ],\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we will update the <code>pages\/index.vue<\/code> with the configuration needed to use the Cloudinary upload widget.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"br3 bg-white ba dark-gray b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv4 tc\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f4 link dim br3 pv2 ph2 mb2 dib white bg-navy ba b--navy pointer mt3 mt0-l inline-flex items-center\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"openUploadModal\"<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"isInitial\"<\/span>&gt;<\/span>\n        Upload video\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"url.length &gt; 0\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tc ma\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"url\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pa3 db w-100 br3 b--navy ba f4\"<\/span> <span class=\"hljs-attr\">disabled<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f4 link dim br3 pv2 ph2 mb2 dib white bg-navy ba b--navy pointer mt3 inline-flex items-center\"<\/span>&gt;<\/span>Enhance Video<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>  \n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  data(){\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">''<\/span>,\n      <span class=\"hljs-attr\">isInitial<\/span>: <span class=\"hljs-literal\">true<\/span>,\n      <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">'**'<\/span>,\n      <span class=\"hljs-attr\">uploadPreset<\/span>: <span class=\"hljs-string\">'**'<\/span>,\n    }\n  },\n  <span class=\"hljs-attr\">methods<\/span>: {\n    openUploadModal() {\n      <span class=\"hljs-built_in\">window<\/span>.cloudinary.openUploadWidget(\n        { <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-keyword\">this<\/span>.cloudName,\n          <span class=\"hljs-attr\">uploadPreset<\/span>: <span class=\"hljs-keyword\">this<\/span>.uploadPreset\n        },\n        (error, result) =&gt; {\n          <span class=\"hljs-keyword\">if<\/span> (!error &amp;&amp; result &amp;&amp; result.event === <span class=\"hljs-string\">\"success\"<\/span>) {\n            <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'Done uploading..: '<\/span>, result.info);\n            <span class=\"hljs-keyword\">this<\/span>.isInitial = <span class=\"hljs-literal\">false<\/span>;\n            <span class=\"hljs-keyword\">this<\/span>.url = result.info.url;\n            <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-keyword\">this<\/span>.url)\n          }\n        }\n      ).open();\n    },\n  }\n}\n<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We achieved the following from the code snippet above:<\/p>\n<ul>\n<li>Added a method called <code>openUploadModal<\/code>, executed when the <strong>Upload Video<\/strong> button is triggered<\/li>\n<li>Added a data property to manage the error, the <code>cloudName<\/code>, <code>uploadPreset<\/code>, and <code>url<\/code>\n<\/li>\n<li>Included a state variable of <code>isInitial<\/code> in our data property to handle the upload state<\/li>\n<\/ul>\n<p>Upon clicking the <strong>Upload Video<\/strong> button, we\u2019ll see the interface below. We can now upload a video, get the <code>url<\/code>, and use this returned <code>url<\/code> in the following stages.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660289478\/e-622f762c6cb5ad0068bc82c6\/cjnydxcwsllw4n9hhlwh.png\" alt=\"cloudinary upload widget interface\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1406\" height=\"872\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660289549\/e-622f762c6cb5ad0068bc82c6\/crbyubvechxrclv4dheh.png\" alt=\"Interface showing cloudinary returned URL after uploading video to Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1116\" height=\"470\"\/><\/p>\n<h2>Integrating Dolby Media Processing APIs<\/h2>\n<h3>Set up a developer account<\/h3>\n<p>To use any of Dolby\u2019s APIs, we need to create an account with Dolby <a href=\"https:\/\/dolby.io\/signup\">here<\/a>. Dolby directs us to the page below. From here, we can add a new application.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660289753\/e-622f762c6cb5ad0068bc82c6\/to22lof32s4pnwfhjjjs.png\" alt=\"Dolby dashboard after creating an account\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1365\" height=\"576\"\/><\/p>\n<p>Clicking on the <strong>ADD NEW APP<\/strong> button above yields the view below. We will add our application name and click the <strong>CREATE<\/strong> button.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660289813\/e-622f762c6cb5ad0068bc82c6\/h15q8qigjv898vhh1thp.png\" alt=\"Creating an application on the Dolby dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1355\" height=\"620\"\/><\/p>\n<p>In our Nuxt.js application, we\u2019ll need the <strong>APP KEY<\/strong> and <strong>APP SECRET<\/strong> provided by Dolby. To get these credentials, click the application we created and click on the <strong>Get API keys<\/strong>, as shown in the image below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660289932\/e-622f762c6cb5ad0068bc82c6\/kbrlatutudnx1iygjv5x.png\" alt=\"Getting the API keys from the Dolby dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1365\" height=\"576\"\/><\/p>\n<p>Clicking on the annotated part in the image above reveals the credentials we will copy for our application.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1660290040\/e-622f762c6cb5ad0068bc82c6\/rk1hfrwrepcurjnxfodi.png\" alt=\"Getting the Dolby credentials\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1357\" height=\"583\"\/><\/p>\n<h2>Integrating Dolby in NuxtJS<\/h2>\n<h3>Authenticating Dolby in NuxtJS<\/h3>\n<p>Before we can use the Dolby API in our application, we must first authenticate the application by getting an API token using the credentials from our Dolby dashboard. To do this, we will create a <code>.env<\/code> file in the Nuxt application root folder.<\/p>\n<p>Afterward, add the credentials following the structure below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">APP_KEY=<span class=\"hljs-string\">'**'<\/span>\nAPP_SECRET=<span class=\"hljs-string\">'**'<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we can proceed to use it in our Nuxt.js application, like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- HTML template goes here --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f4 link dim br3 pv2 ph2 mb2 dib white bg-navy ba b--navy pointer mt3 inline-flex items-center\"<\/span>&gt;<\/span>Enhance Video<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  data(){\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">apiToken<\/span>: <span class=\"hljs-string\">''<\/span>,\n    }\n  }.\n  methods: {\n    openUploadModal() {\n        <span class=\"hljs-comment\">\/\/ cloudinary upload widget<\/span>\n    },\n    <span class=\"hljs-keyword\">async<\/span> enhanceVideo(){\n      <span class=\"hljs-keyword\">const<\/span> auth = Buffer.from(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.APP_KEY}<\/span>:<span class=\"hljs-subst\">${process.env.APP_SECRET}<\/span>`<\/span>).toString(<span class=\"hljs-string\">'base64'<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">'https:\/\/api.dolby.io\/v1\/auth\/token'<\/span>, {\n        <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n        <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-keyword\">new<\/span> URLSearchParams({\n          <span class=\"hljs-attr\">grant_type<\/span>: <span class=\"hljs-string\">'client_credentials'<\/span>,\n          <span class=\"hljs-attr\">expires_in<\/span>: <span class=\"hljs-number\">7200<\/span>\n        }),\n        <span class=\"hljs-attr\">headers<\/span>: {\n          <span class=\"hljs-string\">\"Accept\"<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>,\n          <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/x-www-form-urlencoded'<\/span>,\n          <span class=\"hljs-string\">'Authorization'<\/span>: <span class=\"hljs-string\">`Basic <span class=\"hljs-subst\">${auth}<\/span>`<\/span>\n        }\n      });\n      <span class=\"hljs-keyword\">const<\/span> json = <span class=\"hljs-keyword\">await<\/span> response.json();\n      <span class=\"hljs-keyword\">this<\/span>.apiToken = json.access_token;\n  }\n}\n<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code block above, we matched the credentials already set in the <code>.env<\/code> file against Dolby\u2019s authentication API: <code>https:\/\/api.dolby.io\/v1\/auth\/token<\/code>.<\/p>\n<p>This method is executed when the <code>enhanceVideo<\/code> method is called. This generates a token as a response, which we will use to enhance the media further.<\/p>\n<h3>Enhancing media sound quality<\/h3>\n<p>Dolby provides us with three APIs to work with when enhancing media.<\/p>\n<ul>\n<li>\n<p><strong>The media enhance request API<\/strong>: This API is responsible for enhancing the media. It takes two parameters: the input URL of the media to be enhanced and the output URL to which the Dolby API will write. The response from the <code>[https:\/\/api.dolby.com\/media\/enhance](https:\/\/api.dolby.com\/media\/enhanc)<\/code> API is a <code>job_id<\/code> that checks the media status.<\/p>\n<\/li>\n<li>\n<p><strong>The job status checker API:<\/strong> Enhancing the uploaded video takes seconds to minutes, and we\u2019ll need to check the status of the job before downloading the media. To do this, we will add the <code>job_id<\/code> provided by the enhancement request, like so: <code>https:\/\/api.dolby.com\/media\/enhance?job_id=the job_id<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Media download API:<\/strong> On confirmation that the enhancement is complete, we can proceed to download the enhanced video using the same <strong>output URL<\/strong> as was used in the media request.<\/p>\n<\/li>\n<\/ul>\n<p>We can update the <code>pages\/index.vue<\/code> and add the code in our methods, like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  <span class=\"hljs-attr\">methods<\/span>: {\n    <span class=\"hljs-keyword\">async<\/span> enhanceVideo(){\n      <span class=\"hljs-comment\">\/\/Dolby authnentication code goes here<\/span>\n      \n      <span class=\"hljs-comment\">\/\/media enhancement API<\/span>\n      <span class=\"hljs-keyword\">const<\/span> enhanceRequest = {\n        <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,\n        <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/api.dolby.com\/media\/enhance'<\/span>,\n        <span class=\"hljs-attr\">headers<\/span>: {\n          <span class=\"hljs-string\">\"Authorization\"<\/span>: <span class=\"hljs-string\">`Bearer <span class=\"hljs-subst\">${<span class=\"hljs-keyword\">this<\/span>.apiToken}<\/span>`<\/span>,\n          <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n          <span class=\"hljs-string\">\"Accept\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>\n          },\n        <span class=\"hljs-attr\">data<\/span>:{\n        <span class=\"hljs-attr\">input<\/span>: <span class=\"hljs-keyword\">this<\/span>.url,\n        <span class=\"hljs-attr\">output<\/span>: <span class=\"hljs-string\">'dlb:\/\/out\/video-enhanced.mp4'<\/span>\n        }\n      }\n      <span class=\"hljs-comment\">\/\/enhancement checker API<\/span>\n      <span class=\"hljs-keyword\">const<\/span> enhancementCheck = {\n        <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"GET\"<\/span>,\n        <span class=\"hljs-attr\">headers<\/span>: {\n          <span class=\"hljs-string\">\"Authorization\"<\/span>: <span class=\"hljs-string\">`Bearer <span class=\"hljs-subst\">${<span class=\"hljs-keyword\">this<\/span>.apiToken}<\/span>`<\/span>,\n          <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,\n          <span class=\"hljs-attr\">Accept<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>\n        },\n      };\n      <span class=\"hljs-comment\">\/\/media download API<\/span>\n      <span class=\"hljs-keyword\">const<\/span> mediaDownload = {\n        <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'GET'<\/span>,\n        <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/api.dolby.com\/media\/output'<\/span>,\n        <span class=\"hljs-attr\">headers<\/span>: {\n          <span class=\"hljs-string\">'Authorization'<\/span>: <span class=\"hljs-string\">`Bearer <span class=\"hljs-subst\">${<span class=\"hljs-keyword\">this<\/span>.apiToken}<\/span>`<\/span>,\n          <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>,\n          <span class=\"hljs-string\">\"Accept\"<\/span>: <span class=\"hljs-string\">\"application\/octet-stream\"<\/span>\n        },\n        <span class=\"hljs-attr\">responseType<\/span>: <span class=\"hljs-string\">'stream'<\/span>,\n        <span class=\"hljs-attr\">params<\/span>: {\n          <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'dlb:\/\/out\/video-enhanced.mp4'<\/span>\n        }\n      };\n    }\n  }\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The code block above is a representation of the three APIs provided by Dolby for enhancement. We added the <code>apiToken<\/code> given by authenticating our Nuxt.js application to the header of each request. Also, the <code>enhanceRequest<\/code> request has the <code>url<\/code> taken from the uploaded <a href=\"https:\/\/cloudinary.com\/products\/video\">Cloudinary video<\/a> as input.<\/p>\n<p>Our goal is to get the URL from the video uploaded to Cloudinary, send the URL to Dolby for enhancement, check the enhancement status until it is complete, get the link for the enhanced video, and upload the enhanced video back to Cloudinary.<\/p>\n<p>Now, let\u2019s put it all together by modifying the <code>pages\/index.vue<\/code> with the below:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/954f4d17563c7779fea6bf5f28022088\">https:\/\/gist.github.com\/MoeRayo\/954f4d17563c7779fea6bf5f28022088<\/a><\/p>\n<p>In this code block above, we achieved the following:<\/p>\n<ul>\n<li>\n<p>Created a <code>wait<\/code> function to delay for 2 seconds when running the \u201cwhile\u201d loop<\/p>\n<\/li>\n<li>\n<p>Added a <code>state<\/code> variable to manage the \u201cwhile\u201d loop as conditions are met<\/p>\n<\/li>\n<li>\n<p>The first API call to Dolby was made using the returned Cloudinary input URL as input<\/p>\n<\/li>\n<li>\n<p>Used the returned <code>job_id<\/code> to check the status of the enhancement every 2 seconds using the <code>wait<\/code> function. This checks whether the enhancement is complete to either stop or continue the loop<\/p>\n<\/li>\n<li>\n<p>Upon confirmation of enhancement, we get the downloadable URL from Dolby<\/p>\n<\/li>\n<li>\n<p>Finally, we check whether the downloadable URL matches <code>mp4<\/code> in the URL and only then will we proceed to upload the video to Cloudinary<\/p>\n<\/li>\n<\/ul>\n<p>We can confirm the enhancement by logging into our <a href=\"https:\/\/cloudinary.com\/users\/login\">Cloudinary account<\/a> and navigating to the <strong>Media Library<\/strong>. In this tab, we can see the original and enhanced videos; playing both will confirm the quality differences.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.dolby.io\/media-apis\/docs\/quick-start-to-enhancing-media\">Enhancing media with Dolby<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\">Cloudinary upload widget<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27736,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,372,371,373,303],"class_list":["post-27735","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-nuxtjs","tag-under-review","tag-upload","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Enhance Videos&#039; Audio Quality in NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.\" \/>\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\/enhance-videos-audio-quality-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhance Videos&#039; Audio Quality in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-15T07:03:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T21:46:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"886\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\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\/enhance-videos-audio-quality-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Enhance Videos&#039; Audio Quality in NuxtJS\",\"datePublished\":\"2022-08-15T07:03:21+00:00\",\"dateModified\":\"2025-04-16T21:46:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA\",\"keywords\":[\"Guest Post\",\"NuxtJS\",\"Under Review\",\"Upload\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/\",\"name\":\"Enhance Videos&#039; Audio Quality in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA\",\"datePublished\":\"2022-08-15T07:03:21+00:00\",\"dateModified\":\"2025-04-16T21:46:24+00:00\",\"description\":\"Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhance Videos&#039; Audio Quality in NuxtJS\"}]},{\"@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":"Enhance Videos&#039; Audio Quality in NuxtJS","description":"Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.","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\/enhance-videos-audio-quality-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Enhance Videos&#039; Audio Quality in NuxtJS","og_description":"Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-08-15T07:03:21+00:00","article_modified_time":"2025-04-16T21:46:24+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035-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\/enhance-videos-audio-quality-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Enhance Videos&#039; Audio Quality in NuxtJS","datePublished":"2022-08-15T07:03:21+00:00","dateModified":"2025-04-16T21:46:24+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA","keywords":["Guest Post","NuxtJS","Under Review","Upload","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/","name":"Enhance Videos&#039; Audio Quality in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA","datePublished":"2022-08-15T07:03:21+00:00","dateModified":"2025-04-16T21:46:24+00:00","description":"Learn how to use the Dolby API to produce high-quality media by uploading video to Cloudinary, enhancing the audio on Dolby, and then re-uploading the enhanced video to Cloudindary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/enhance-videos-audio-quality-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Enhance Videos&#039; Audio Quality in NuxtJS"}]},{"@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\/v1681922387\/Web_Assets\/blog\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035\/7b6f2659dd3846076e12fe3486ecc9920443aa7d-886x550-1_27736c9035.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27735","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=27735"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27735\/revisions"}],"predecessor-version":[{"id":37458,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27735\/revisions\/37458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27736"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}