-
Problems loading and playing video assets [Next 14, React, TypeScript, Cloudinary-React]
Hi, I am using "@cloudinary/react": "^1.13.0", and "@cloudinary/url-gen": "^1.16.1" in my Next.js app, and have received several reports of videos taking a while to buffer, or never load at all. It seems most commonly users are experiencing this while on Chrome Mobile iOS, but we've seen this issue across all browsers, iOS…
-
Why are users unable to access media files from a React app hosted on Cloudinary when shared on the
Despite hosting media files on Cloudinary and sharing a link to a React app on Facebook, users encounter difficulties accessing media content when browsing through the Facebook mobile app. The shared link directs users to the React app, but media files fail to load, hindering the overall user experience. What might be…
-
Can Cloudinary video pause if scroll out of viewport
Hi ,we are using React, I wanted to know if anywhere in your docs goes over pausing a video if out of the viewport. We are just checking if you have any built in methods for your video player with React. Thanks
-
Rendered image dimensions don't seem to match sizes attribute?
Hi, I'm building a website using Next.js and serving images using Cloudinary. I am using the next/image component and can see the srcset of 16, 32, 48, 64, 96, 128, 256, 384, 640w... in my rendered image's attributes. I am using g_auto,f_auto,c_fill,w_XXX,q_auto:best. I'd like to know why the returned intrinsic size…
-
Learn How to Build a Dynamic Conference Badge Generator with Cloudinary
Hey everybody! We have a DevJams live stream this Friday! You can watch on LinkedIn and YouTube. Join us in this episode as we chat with Amy Dutton about her incredible project - a dynamic badge generator for the RedwoodJS Conference. Amy shares her story into tech, her current role in the RedwoodJS core team, and the…
-
How do I improve the upload speed of videos/large files to cloudinary?
Hi, Ive written the function below to allow users of my website to upload videos to cloudinary. Whilst the function works, it is extremely slow. Its not my internet connection, as I've got 50mbps up and to upload a 30MB file its taking 30-40 seconds. My users will be uploading video files of about 400-500MBs, so this speed…
-
Getting a cloudinary video to play in a 3rd party video player
I'm trying to get videos from our cloudinary library to play in a video player in a React Native Expo app. I can't find a link that would work in a 3rd party player and was wondering if that was even possible. If not, I would like to know if anyone has successfully set up the Cloudinary video player in an Expo app. Thanks…
-
I am facing issue while accessing an image with my react code using <tag.json> method
https://res.cloudinary.com/drwxjbeid/image/list/tag.json Here my tag to the image attached is 'tag'. My question is do we need to provide any account level permission to perform this activity? I have tried by fetching details via postman by GET method it is giving response as '401 unauthorized' Thanks, Sez
-
Question about using the React media editor and image upload widget
hi I'm trying to create React so that my Media Editor opens right away to let the user edit the picture that was just uploaded using the Upload widget. I try to run mediaEditorWidgetRef.getConfig(), but it always returns undefined, and when I try to run mediaEditorWidgetRef.show(), it always gives the error "Cannot read…
-
how do i go about 401 unauthorization error with unsigned upload on vite.js app
got the same error previously, i was forced to create a new environment with a new cloud name. updated by .env file file and refreshed the app but the problem persisted. i have provided the valid credentials but cant seem to go through over it
-
Upload from non-Express Node.js server
I have tried a bunch of different ways to upload images, successfully using the upload widget using signed and unsigned versions. I'm also able to upload an image not using the upload widget using a generated signature returned from our server. One thing I would like to figure out is a solution where I send an image to our…
-
Cloudinary library crashes React app
I'm implementing Cloudinary in my React app, and I'm following the node quick start (https://cloudinary.com/documentation/node_quickstart). I've pasted the code directly from the quick start, and I have my environment variable pasted from my Cloudinary dashboard. When compiling, I'm getting a few dozen errors, all in the…
-
Problems Implementing cloudinary video play with vue.js
Am trying to follow the training series on adaptive video streaming where the video player was implemented using react but I keep getting "cld.videoPlayer is not a function" when I try Implementing the video player in vue.js.
-
Where I can find CLOUDINARY_FOLDER environment variable for my project?
I cloned one project from GitHub. In my .env.local file I have set the CLOUD_NAME, API_KEY and API_SECRET variables, and I also need to set the CLOUDINARY_FOLDER variable, but I don't know where I can find that. I am getting this error: Error:…
-
Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
When i upload image to cloudinary its show cors error. The error happening only when i hosted the backend server. Its perfectly worked in localhost
-
What is the alternative of Transformation from cloudinary-react in next-cloudinary?
Previously we were using cloudinary-react which is working fine but recently we decided to migrate to next-cloudinary. I have got a question which couldn't find in documentation. In cloudinary-react we used Transformation component for applying transformations. How we could do the same thing in next-cloudinary? For…
-
How can I get progress of file uploading from uploader.upload_stream and pass it to api
I'm developing nextjs app with api routes, I have a route to upload file to cloudinary localhost/api/files/upload. There I send files with axios and receive axios uploadProgressEvent to display it on web page. I see that progress works fine when I upload file to api route, at 100% upload I need to wait more because file is…
-
A couple questions about curl for rtmp
So live streaming has been in Beta almost how long I've been working with my OTT. I used to be able to get the curl rtmp example working and I can't find anything in the forum about live streaming. Is no one streaming live anymore? Is there anyone I can get a quick call into so I can ask some basic questions? This is the…
-
Importance of query params added by JS SDK-- is it OK to remove?
The following code (in Node.js / React) in some cases produces URLs with query parameters appended to the URL: import { Cloudinary } from "@cloudinary/url-gen"; const cld = new Cloudinary({ cloud: { cloudName: '__redacted__' }, }); const url = cld .image('ID') .quality("auto") .resize(fit(size)) .delivery(format(isSvg ?…
-
Cloudinary Upload Widget And Video Player Inquiry
I made a custom video player using Cloudinary & imported the upload widget into my react app. How would I go about having users upload/post with the mp4 file playing on my custom video player, inside the app? Like, when they upload the video then hits "done", it posts inside my react app.
-
Upload Widget abnorting after crop
I have set up the widget with the following parameters (this is React based): sources: ['local', 'camera'], cropping: true, multiple: false, resourceType: 'image' After I resize an image in the widget and press the crop button, it appears to crop the image onscreen, then the widget closes itself. An image is uploaded, but…
-
build error: coffee-script module not found
Hi all, I'm getting this build error: "./node_modules/vm2/lib/compiler.js Module not found: Can't resolve 'coffee-script' in '/Users/me/my-project/node_modules/vm2/lib" I'm trying to use the Node SDK in a Next.js 13 Api route, intending to upload an image, the Api route looks like this: import { NextRequest, NextResponse }…
-
Video Concatenation in React.js
I am trying to concatenate one video to another in react.js, but the code snippet I copied from the docs isn't working. new CloudinaryVideo("kitten_fighting.mp4") .resize(fill().width(300).height(200)) .videoEdit( concatenate( videoSource("dog").transformation( new Transformation().resize(fill().width(300).height(200)) )…
-
How I can upload image in to cloudinary images using react?
I'm building a project for practice purposes and I want to host my media assets on this platform. I created an Image preset, everything is working fine. I just want to upload it with mern stack and Axios but I'm not able to find the API URL to upload the media. Please help to get this resolve
-
How to improve performance of Videos in React Native?
Hey, I'm pretty new to the world video optimization. We are currently working on a tiktok-like platform for mobile (i.e. people can swipe Videos). Because this app is made for mobile, there obviously are quite a few constraints regarding the performance expectations, set by apps like Tiktok and Instagram. Our goals is to…
-
Shoppable video functionality in React
Hello community, I am trying to use the Shoppable video functionality in a React app with the React SDK but I was unable to do it. Is there any way in which this functionality can be used with React SDK? The only examples out there I could find were using the "cloudinary-video-player" library in order to use the "source"…
-
Is it safe to have cloud name and preset in front end code? Upload question
I have made an app with the MERN stack. I am using the url endpoint to allow users to upload images to my cloudinary, and then the data from that gets put into a mongodb database which I pull information from. I have the cloud name and preset in my .env file, but .env variables get put into the build folder anyway so it…
-
How to decrease recorded video size from safari before uploading to cloudinary in react project?
I have react project where I am using firebase as backend, the project main purpose is to record short videos for business. I have used react media library to record videos from camera so when user recorded videos I get the blob file I convert it to. base64 before upload so 1 min video has a size of less then 2 mb which…
-
Query on implementing Image upload Widget & Media Editor Widget in React
hey folks.. I'm looking to achieve a React implementation where my Media Editor opens straight to allow the user to edit the pic that's just uploaded via Upload widget (i.e. following the e.g. in https://codesandbox.io/s/uw-mew-forked-dudee6?file=/src/index.js) . When I try running mediaEditorWidgetRef.getConfig() it…
-
Can I run the Cloudinary-AI-Background Removal from a React function
I am trying to call the Cloudinary-AI-Background removal from a function in my Nextjs project. My plan is to upload the image using the upload widget and remove the background with a button, i also want to get the URL of this new optimized image so I can store it on my database and display it in my application. Can this be…
-
Problems retrieving and transforming images using the react SDK
I'm trying to use cloudiary images within a custom sanity component. Sanity uses React, so I've installed the React SDK. So this demo code from the quick start works: ....................................................................................................................... const cloudinary = new Cloudinary({…