{"id":37828,"date":"2025-07-02T07:00:00","date_gmt":"2025-07-02T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37828"},"modified":"2025-06-26T14:27:58","modified_gmt":"2025-06-26T21:27:58","slug":"setting-up-live-stream-player-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js","title":{"rendered":"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>In our previous blog post, <a href=\"https:\/\/cloudinary.com\/blog\/simple-simulcast-live-streaming-cloudinary-obs\">Simple Simulcast Live Streaming With Cloudinary and OBS<\/a>, we went over how to create a live video stream using Cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/video_live_streaming_reference#tag\/live-stream\">Video Live Streaming API<\/a> and OBS. Cloudinary\u2019s Live Streaming provides an easy way to start and simulcast a live stream to popular platforms like YouTube and Twitch. Along with simulcasting, you can also publish your live stream anywhere you\u2019d like on the web.<\/p>\n<p>In this blog post, we\u2019ll cover how to deliver a live stream on your own website using the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary Video Player<\/a>.<\/p>\n<p>Currently, the only way to manage your live streams is by using the Cloudinary API. Cloudinary provides excellent <a href=\"https:\/\/cloudinary.com\/documentation\/video_live_streaming_reference#tag\/live-stream\">API documentation<\/a>, which makes the process pretty straightforward. For a detailed guide on how to work with this API, be sure to check out our previous <a href=\"https:\/\/cloudinary.com\/blog\/simple-simulcast-live-streaming-cloudinary-obs#setting_up_the_api_keys\">blog post<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>There are a few things we need to do before we\u2019re ready to start streaming video content. If you haven\u2019t already, <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for a Cloudinary account<\/a> to get the following:<\/p>\n<ul>\n<li>\n<strong>Your Cloudinary cloud name.<\/strong> This is a unique identifier for your Cloudinary account. This can be found at the top-left corner of your Cloudinary console.<\/li>\n<li>\n<strong>Your API key.<\/strong> The public key is used to authenticate your requests to the Cloudinary API.<\/li>\n<li>\n<strong>Your API secret.<\/strong> The private key is used for secure connections with the Cloudinary API.<\/li>\n<\/ul>\n<p>You can find your private and public API keys in the <strong>API Keys<\/strong> section on the settings page of your Cloudinary console.<\/p>\n<h2>How to Set Up a New Stream<\/h2>\n<p>First, let\u2019s create our stream. Copy the curl command from the <a href=\"https:\/\/cloudinary.com\/documentation\/video_live_streaming_reference#tag\/live-stream\/POST\/live_streams\"><code>POST \/live_streams<\/code><\/a> endpoint and run it in your terminal, use your cloud name, API key, and secret. With the default options, this will create a new RTMP live stream called \u201cMy first stream\u201d.<\/p>\n<p>In the response, what we care about the most (at least for now) are the <code>input.uri<\/code>  and the <code>stream_key<\/code><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n  <span class=\"hljs-attr\">\"request_id\"<\/span>: <span class=\"hljs-string\">\"2c41da07b90183b48c4f93b5a83ded20\"<\/span>,\n  <span class=\"hljs-attr\">\"data\"<\/span>: {\n    <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"&#91;REDACTED]\"<\/span>,\n    <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"My first stream\"<\/span>,\n    <span class=\"hljs-attr\">\"input\"<\/span>: {\n      <span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"rtmp\"<\/span>,\n      <span class=\"hljs-attr\">\"uri\"<\/span>: <span class=\"hljs-string\">\"rtmp:\/\/live.cloudinary.com\/streams\"<\/span>,\n      <span class=\"hljs-attr\">\"stream_key\"<\/span>: <span class=\"hljs-string\">\"&#91;REDACTED]\"<\/span>\n    },\n    <span class=\"hljs-attr\">\"status\"<\/span>: <span class=\"hljs-string\">\"idle\"<\/span>,\n    <span class=\"hljs-attr\">\"outputs\"<\/span>: &#91;\n      {\n        <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-string\">\"&#91;REDACTED]\"<\/span>,\n        <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"default hls\"<\/span>,\n        <span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"hls\"<\/span>,\n        <span class=\"hljs-attr\">\"uri\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/{cloudName}\/video\/live\/live_stream_{stream_id}_hls.m3u8\"<\/span>,\n        <span class=\"hljs-attr\">\"created_at\"<\/span>: <span class=\"hljs-number\">1730130837173<\/span>,\n        <span class=\"hljs-attr\">\"updated_at\"<\/span>: <span class=\"hljs-number\">1730130837173<\/span>\n      },\n    ],\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ll use OBS to start our stream, but remember that you can use any other RTMP client if you prefer.<\/p>\n<p>In OBS, open the Settings and go to the Stream tab. Under <strong>Service<\/strong>, choose <strong>Custom<\/strong>. You\u2019ll see two fields: \u201cServer\u201d and \u201cStream Key.\u201d Enter your <code>URI<\/code> value in the \u201cServer\u201d field, and your <code>stream_key<\/code> in the \u201cStream Key\u201d field.<\/p>\n<p>After you do this, your OBS settings should look something like this:<\/p>\n<p>You can now click <strong>Start Streaming<\/strong> in your OBS Controls, and you\u2019ll broadcast live via Cloudinary Streaming.<\/p>\n<h2>Live Stream Player Setup<\/h2>\n<h3>Create Our Frontend App<\/h3>\n<p>In this demo, we\u2019ll create a website to host our live stream with Nuxt, a Vue.js framework that comes with many features, like server-side rendering, which will come in handy. Cloudinary has an <a href=\"https:\/\/cloudinary.nuxtjs.org\/\">SDK for Nuxt<\/a>. Helpful for integrating Cloudinary into our Nuxt app easily. If you prefer another framework, you can use one of the many other <a href=\"https:\/\/cloudinary.com\/documentation\/frontend_sdks\">SDKs<\/a>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">npx nuxi@latest init <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">my-app<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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>Replace <code>&lt;my-app&gt;<\/code> with the actual name of your app. After running the command, you\u2019ll see a couple of prompts that will set the app\u2019s details for you. The choice is up to you. In my case, I went for <a href=\"https:\/\/pnpm.io\/\">pnpm<\/a> as my package manager and didn\u2019t initialize my git repo.<\/p>\n<p>Afterward, let\u2019s go into our app:<\/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\">cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">my-app<\/span>&gt;<\/span>\n<\/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>To integrate our videos smoothly, we\u2019ll use the <a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Nuxt Cloudinary<\/a> module. To install it, let\u2019s run the following command:<\/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\">npx nuxi@latest <span class=\"hljs-built_in\">module<\/span> add @nuxtjs\/cloudinary\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 initiate our project with this command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">nuxi<\/span><span class=\"hljs-keyword\">@latest<\/span> init \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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>We\u2019ll need to set up an <a href=\"https:\/\/nuxt.com\/docs\/guide\/going-further\/runtime-config#environment-variables\">environment variable<\/a> to help us securely store key information for our app to communicate with Cloudinary:<\/p>\n<ul>\n<li>\n<strong><code>NUXT_PUBLIC_CLOUDINARY_CLOUD_NAME<\/code>.<\/strong> This is your Cloudinary cloud name.<\/li>\n<li>\n<strong><code>NUXT_CLOUDINARY_API_SECRET<\/code>.<\/strong> The private key used for secure connections with the Cloudinary API.<\/li>\n<li>\n<strong><code>NUXT_PUBLIC_CLOUDINARY_API_KEY<\/code>.<\/strong> The public key used to authenticate your requests to the Cloudinary API.<\/li>\n<\/ul>\n<h3>Add Our Video Player<\/h3>\n<p>Adding our Cloudinary Video Player is an easy process with Nuxt. After installing <code>@nuxtjs\/cloudinary<\/code>, we need to import the video player component:<\/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\">my-app<\/span>&gt;<\/span>\n \u21b3app.vue\n \n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"actionscript\">\n<span class=\"hljs-keyword\">const<\/span> streamUrl = <span class=\"hljs-literal\">null<\/span>;\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/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\">\"video-container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"streamUrl\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n            <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n            <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n            <span class=\"hljs-attr\">:src<\/span>=<span class=\"hljs-string\">\"streamUrl\"<\/span>\n        \/&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\">template<\/span> <span class=\"hljs-attr\">v-else<\/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\">\"offline-banner\"<\/span>&gt;<\/span>Offline<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\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-class\">.video-container<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translate<\/span>(-<span class=\"hljs-number\">50%<\/span>, -<span class=\"hljs-number\">50%<\/span>);\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50vw<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.offline-banner<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: red;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\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>Nuxt makes it simple to fetch our live stream on the server side. Doing this on the client side could risk exposing our Cloudinary API secret. To keep things secure, we\u2019ll set up a <a href=\"https:\/\/nuxt.com\/docs\/guide\/directory-structure\/server\">server handler<\/a> to retrieve the stream.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">&lt;my-app&gt;\n \u21b3server\n   \u21b3api\n     \u21b3<span class=\"hljs-keyword\">get<\/span>-stream.ts\n \n \nexport default defineEventHandler(async (event) =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> streamsRes = <span class=\"hljs-keyword\">await<\/span> $fetch(<span class=\"hljs-string\">`https:\/\/api.cloudinary.com\/v2\/video\/<span class=\"hljs-subst\">${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/live_streams`<\/span>, {\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\">`Basic <span class=\"hljs-subst\">${Buffer.<span class=\"hljs-keyword\">from<\/span>(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${process.env.CLOUDINARY_API_KEY}<\/span>:<span class=\"hljs-subst\">${process.env.CLOUDINARY_API_SECRET}<\/span>`<\/span>).toString(<span class=\"hljs-string\">'base64'<\/span>)}<\/span>`<\/span>\n        }\n    });\n\n    <span class=\"hljs-comment\">\/\/ Find the first active stream<\/span>\n    <span class=\"hljs-keyword\">const<\/span> activeStream = streamsRes.data.find(<span class=\"hljs-function\">(<span class=\"hljs-params\">stream: any<\/span>) =&gt;<\/span> stream.status === <span class=\"hljs-string\">'active'<\/span>);\n\n    <span class=\"hljs-keyword\">return<\/span> {\n        <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-number\">200<\/span>,\n        <span class=\"hljs-attr\">streamUrl<\/span>: activeStream?.outputs?.&#91;<span class=\"hljs-number\">0<\/span>].uri || <span class=\"hljs-literal\">null<\/span>\n    }\n})\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><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>For our example, we\u2019ll fetch only the first active stream. However, you can adjust the criteria to filter for any stream you prefer. For example, you can <a href=\"https:\/\/cloudinary.com\/documentation\/video_live_streaming#define_or_update_outputs\">update<\/a> your stream and then fetch for the desired output name.<\/p>\n<p>After defining our server handler, we\u2019ll fetch the stream on the client side like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" 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> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">const<\/span> { data } = <span class=\"hljs-keyword\">await<\/span> useFetch(<span class=\"hljs-string\">'\/api\/get-stream'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> streamUrl = data.value?.streamUrl;\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/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\">\"video-container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"streamUrl\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n            <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n            <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n            <span class=\"hljs-attr\">:src<\/span>=<span class=\"hljs-string\">\"streamUrl\"<\/span>\n        \/&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\">template<\/span> <span class=\"hljs-attr\">v-else<\/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\">\"offline-banner\"<\/span>&gt;<\/span>Offline<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\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-class\">.video-container<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">50%<\/span>;\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translate<\/span>(-<span class=\"hljs-number\">50%<\/span>, -<span class=\"hljs-number\">50%<\/span>);\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50vw<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.offline-banner<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: red;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><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>If we turn on our stream and refresh our page, we\u2019ll see it in action!<\/p>\n<h2>Conclusion<\/h2>\n<p>Now you know how to set up and display a Cloudinary livestream on your own site. We kicked things off by creating a stream with Cloudinary\u2019s Video Live Streaming API and OBS. Next, we created a Nuxt app using the Cloudinary Video Player. By adding a server handler, we kept our API secret safe and only fetched the stream link on the server side.<\/p>\n<p>The integration was easy thanks to the Cloudinary Video Player, which handles all the complicated parts, like making sure your stream adapts to different devices and adjusting video quality based on the viewer\u2019s internet speed. Setting up and delivering your stream with it is really straightforward.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/contact\">Contact us today<\/a> to learn more about how Cloudinary Video can help you manage, edit, and optimize the delivery of videos with AI-powered and API-based automation.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":37836,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[303,305,310],"class_list":["post-37828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-video","tag-video-api","tag-video-player"],"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>Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming<\/title>\n<meta name=\"description\" content=\"Learn how to embed your live streams directly on your website using the Cloudinary Video Player and Nuxt.js, ensuring secure and optimized delivery.\" \/>\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\/setting-up-live-stream-player-nuxt-js\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming\" \/>\n<meta property=\"og:description\" content=\"Learn how to embed your live streams directly on your website using the Cloudinary Video Player and Nuxt.js, ensuring secure and optimized delivery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-02T14:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/setting-up-live-stream-player-nuxt-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming\",\"datePublished\":\"2025-07-02T14:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js\"},\"wordCount\":14,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA\",\"keywords\":[\"Video\",\"Video API\",\"Video Player\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js\",\"url\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js\",\"name\":\"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA\",\"datePublished\":\"2025-07-02T14:00:00+00:00\",\"description\":\"Learn how to embed your live streams directly on your website using the Cloudinary Video Player and Nuxt.js, ensuring secure and optimized delivery.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming","description":"Learn how to embed your live streams directly on your website using the Cloudinary Video Player and Nuxt.js, ensuring secure and optimized delivery.","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\/setting-up-live-stream-player-nuxt-js","og_locale":"en_US","og_type":"article","og_title":"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming","og_description":"Learn how to embed your live streams directly on your website using the Cloudinary Video Player and Nuxt.js, ensuring secure and optimized delivery.","og_url":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js","og_site_name":"Cloudinary Blog","article_published_time":"2025-07-02T14:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming","datePublished":"2025-07-02T14:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js"},"wordCount":14,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA","keywords":["Video","Video API","Video Player"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js","url":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js","name":"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA","datePublished":"2025-07-02T14:00:00+00:00","description":"Learn how to embed your live streams directly on your website using the Cloudinary Video Player and Nuxt.js, ensuring secure and optimized delivery.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/setting-up-live-stream-player-nuxt-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Setting Up a Live Stream Player With Nuxt.js and Cloudinary\u2019s Live Streaming"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1750465548\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream\/Blog_Setting_Up_a_Live_Stream_Player_for_a_Cloudinary_Live_Stream.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37828","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=37828"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37828\/revisions"}],"predecessor-version":[{"id":37838,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37828\/revisions\/37838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/37836"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=37828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=37828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=37828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}