Video transformation messing audio

Joshua
Joshua Member Posts: 4 ✭
edited July 3 in Developer APIs

The audio of my video gets messed up whenever I apply a transformation to it.

Video without transformation

Video with transformation

I'm using the NodeJS SDK to generate the video URL

const video = new CloudinaryVideo(
  video_public_id,
  cloudinary_config
);

I've tried different audio encodings i.e

video.addTransformation("af_22050");

video.transcode(audioCodec("aac"));

but that didn't help.

Tagged:

Answers

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 150
    edited July 4

    Hi @Joshua .

    I've had a look at the upload request for https://res.cloudinary.com/dgnservices/video/upload/v1720044818/dev_help/rcge72oejhddefgx6wqw.mp4 and it seems no transformations were performed on upload - how is it you generated that video?

    Could you please provide the code showing how you performed the upload, along with the specific transformation parameters that were used?

    It's also worth noting that we don't support including underscores in URLs, as this can cause issues with our transformation engine. Could you please rename dev_help to dev-help?

    Kind regards,
    -Danny

  • Joshua
    Joshua Member Posts: 4 ✭
    edited July 4

    Thanks for your reply @DannyFromCloudinary.

    I generated the videos from my mobile application, then uploaded them through the cloudinary console to the dev_help folder. I created the folder to upload them, given videos are not supported here.

    Users perform the upload from the app I'm building. It get's to my node server, which I then upload using the cloudinary API/SDK 

    const stream = storage.uploader.upload_stream(
  { resource_type: "video" },
  (error: any, result: any) => {
    if (error) return reject(error);
    resolve(result);
  }
);

stream.end(buffer);

    Other users can then share the uploaded videos, for that step I need to watermark the videos, and place the original uploader details on the video

    const url = new CloudinaryVideo(
  video_public_id,
  cloudinary_config
).overlay(
/** user details */
source(
  image(avatar_id).transformation(
    new Transformation().resize(
      thumbnail().width(50).height(50).relative()
      .gravity(focusOn(face()))
   ))).position(
      new Position().gravity(compass(southWest())).offsetX(10).offsetY(30))
)
.overlay(
/** user name */
  source(
    text(username, new TextStyle("Arial", 15)).textColor("#fff")
  ).position(new Position().gravity(compass(southWest())).offsetX(10).offsetY(10))
)
.overlay(
  source(
    text(description, new TextStyle("Arial", 20)).textColor("#fff").backgroundColor("#000")
  ).position(new Position().gravity(compass(northWest())).offsetX(5).offsetY(5))
)

return url.toURL();

    Note: the above transformation url is generated on my server

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 150

    Hi @Joshua.

    I generated the videos from my mobile application, then uploaded them through the cloudinary console to the dev_help folder. I created the folder to upload them, given videos are not supported here.

    How are these videos generated? Do they have the distorted audio before uploading them to Cloudinary? From what I've seen of your code samples so far and the logs available to me internally, I'm not seeing that we are the ones introducing the audio trouble.

    If at all possible, could you please provide a screen recording showing

    • The playback of an original video on your mobile device
    • The process of watermarking the video in your app
    • Playing back the newly watermarked video
    • Uploading that video to Cloudinary
    • Playing back the resulting video

    Many thanks,
    -Danny

  • Joshua
    Joshua Member Posts: 4 ✭
    edited July 5

    Hi @DannyFromCloudinary here's a video that shows the entire process

    https://res.cloudinary.com/dgnservices/video/upload/v1720210555/dev-help/yep3wdgetnbofof8xkfc.mp4

    The user records the video using their built-in phone camera, the video gets uploaded to my node server which in turn uploads it to cloudinary.

    Users can watch and then share the uploaded videos (everything fine up to this point), I make a request to my node server to generate the video url with the overlays applied (using the transformations shown earlier). It's at this step where the audio gets messy.

    Accessing the video using any of the following options produces the same result:

    • The video gets downloaded on the mobile app for sharing using the device share API
    • Log the url to the console, paste it in my browser

    Please let me know if you require any other information.

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 150

    Thanks so much, @Joshua. We'll take a deeper look and let you know our findings.

    Kind regards,
    -Danny

  • Zachary
    Zachary Member, Cloudinary Staff Posts: 46
    edited July 7

    Hi there,

    After investigating the issue I believe we have found an internal encoding setting for your account that we can change to fix the issue. This will apply to all non-cached assets so any previously cached derived assets will need to be regenerated.

    https://res.cloudinary.com/dgnservices/video/upload/a_1/u7rwziol6l79jzjd1tv9.mp4

    Please let us know if you have any questions.

    Thanks!

  • Joshua
    Joshua Member Posts: 4 ✭

    Hi @Zachary thanks, that fixed it. Do you mind letting me know what you changed in my account settings?

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 78

    Hi Joshua,

    Your account is set to use our new ffmpeg version but another configuration setting was missing regarding the audio to avoid the distortion.

    Nothing you can really do on your side here but as of now your account is configured properly.

    Best,

    Loic

Categories