I'm trying to generate a video using remotion library.
We can combine the video and text and generate an new video.
I used to place the text at the bottom of the video and generate an video.
When I use a video with audio, then new video is not generating properly, The new video has audio quality issue. PFA.
When i use a video without audio, then combine it with audio and text, then the new video is working fine.
import { renderMediaOnLambda } from '@remotion/lambda/client';
const { renderId, bucketName } = await renderMediaOnLambda(
{ region : "us-east-1"
, functionName : config.lambdaFunction
, serveUrl : config.serverUrl
, composition : composition
, inputProps : jsonData
, codec : "h264"
, audioCodec : "mp3"
, audioBitrate : "1M"
, videoBitrate : "1M"
, outName:
{ bucketName : config.bucket
, key : outputFileName
}
, imageFormat : "jpeg"
, maxRetries : 1
, framesPerLambda : 1000
, privacy : "public"
});
jsonData
{ "design" :
{ "id" : "BlrKj0qKg1PX7vfx"
, "size" :
{ "width" : 1080
, "height" : 1920
}
, "fps" : 30
, "tracks" :
[
{ "id" : "k9aar-Jm6RQoPT3Yvyk3C"
, "accepts" :
[ "text", "image", "video", "audio", "composition", "caption", "template"
, "customTrack", "customTrack2", "illustration", "custom", "main", "shape"
, "linealAudioBars", "radialAudioBars", "progressFrame", "progressBar"
, "rect", "progressSquare"
]
, "type" : "text"
, "items" : [ "UyDpqx4ZxJY0CRsV" ]
, "magnetic" : false
, "static" : false
}
, { "id" : "tl2rFnfH3Mn2kRWKkC_88"
, "accepts" :
[ "text", "image", "video", "audio", "composition", "caption", "template"
, "customTrack", "customTrack2", "illustration", "custom", "main", "shape"
, "linealAudioBars", "radialAudioBars", "progressFrame", "progressBar"
, "rect", "progressSquare"
]
, "type" : "video"
, "items" : [ "H5HD31deQOSTyVlo" ]
, "magnetic" : false
, "static" : false
}
]
, "trackItemIds" : [ "H5HD31deQOSTyVlo", "UyDpqx4ZxJY0CRsV" ]
, "trackItemsMap" :
{ "H5HD31deQOSTyVlo":
{ "id" : "H5HD31deQOSTyVlo"
, "details" :
{ "width" : 960
, "height" : 960
, "opacity" : 100
, "src" : "https://v3.fal.media/files/monkey/xbAZ2BQi73CF7Gkv6hnAF_6z6-Lkg6MeICe-cIXwqMs_video.mp4"
, "volume" : 100
, "borderRadius" : 0
, "borderWidth" : 0
, "borderColor" : "#000000"
, "boxShadow" :
{ "color" : "#000000"
, "x" : 0
, "y" : 0
, "blur" : 0
}
, "top" : "480px"
, "left" : "60px"
, "transform" : "scale(1.125)"
, "blur" : 0
, "brightness" : 100
, "flipX" : false
, "flipY" : false
, "rotate" : "0deg"
, "visibility" : "visible"
}
, "metadata" : { "previewUrl": "https://remotionlambda-useast1-myb.amazonaws.com/demo-assets/group-1.png" }
, "trim" : { "from": 0, "to": 5015.011 }
, "type" : "video"
, "name" : "video"
, "playbackRate" : 1
, "display" : { "from": 0, "to": 5015.011 }
, "duration" : 5015.011
, "isMain": false
}
, "UyDpqx4ZxJY0CRsV":
{ "id" : "UyDpqx4ZxJY0CRsV"
, "name" : "text"
, "type" : "text"
, "display" : { "from": 0, "to": 5000 }
, "details":
{ "text" : "Heading and some body"
, "fontSize" : 120
, "width" : 600
, "fontUrl" : "https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlvAx05IsDqlA.ttf"
, "fontFamily" : "Roboto-Bold"
, "color" : "#ffffff"
, "wordWrap" : "break-word"
, "textAlign" : "center"
, "borderWidth" : 0
, "borderColor" : "#000000"
, "boxShadow" : { "color": "#ffffff", "x": 0, "y": 0, "blur": 0}
, "fontWeight" : "normal"
, "fontStyle" : "normal"
, "textDecoration" : "none"
, "lineHeight" : "normal"
, "letterSpacing" : "normal"
, "wordSpacing" : "normal"
, "backgroundColor" : "transparent"
, "border" : "none"
, "textShadow" : "none"
, "opacity" : 100
, "wordBreak" : "normal"
, "WebkitTextStrokeColor" : "#ffffff"
, "WebkitTextStrokeWidth" : "0px"
, "top" : "748.5px"
, "left" : "240px"
, "textTransform" : "none"
, "transform" : "none"
, "skewX" : 0
, "skewY" : 0
, "height" : 423
}
, "metadata" : {}
, "isMain" : false
}
}
, "transitionIds" : []
, "transitionsMap" : {}
, "scale":
{ "index" : 7
, "unit" : 300
, "zoom" : 0.0033333333333333335
, "segments" : 5
}
, "duration" : 5015.011
, "activeIds" : [ "H5HD31deQOSTyVlo" ]
, "structure" : []
, "background" : { "type": "color", "value": "transparent" }
}
, "options":
{ "fps" : 30
, "size" : { "width": 1080, "height": 1920 }
, "format" : "mp4"
}
}
inputJSON
{ "region" : "us-east-1"
, "functionName" : "remotion-render-myfunc-240sec"
, "serveUrl" : "https://remotionlambda-useast1-mybucket.s3.us-east-1.amazonaws.com/sites/dev/index.html"
, "composition" : "RenderVideo"
, "inputProps" : jsonData
, "codec" : "h264"
, "audioCodec" : "mp3"
, "audioBitrate" : "1M"
, "videoBitrate" : "1M"
, "outName":
{ "bucketName" : "remotionlambda-useast1-3rne5v73bs"
, "key" : "demo-vid-9169.mp4"
}
, "imageFormat" : "jpeg"
, "maxRetries" : 1
, "framesPerLambda" : 1000
, "privacy" : "public"
}
INPUT VIDEO URL: https://v3.fal.media/files/monkey/xbAZ2BQi73CF7Gkv6hnAF_6z6-Lkg6MeICe-cIXwqMs_video.mp4
Output Generated Video URL: https://vimeo.com/1118133462?share=copy
Reference URL: https://www.remotion.dev/docs/lambda/rendermediaonlambda
Reference URL which as all the props related to this function: https://www.remotion.dev/docs/cli/render#--muted
Note: We can use any video with audio to reproduce this issue with Remotion.
Any help would be highly appreciated.
Your video clip has distorted sound because of a very loud volume setting.
Solution:
Try using ratio (from 0.0 to 1.0 max) instead of a percentage (from 0 to 100 max).
See how even the documentation uses 0.5 for its volume example?
setting 1.0 means save FULL input volume, setting 0.5 will save with HALF input volume, etc.
{ "id" : "H5HD31deQOSTyVlo" ,
"details" :
{ "width" : 960
, "height" : 960
, "opacity" : 100
, "src" : "https://....video.mp4"
, "volume" : 100 <-- FIX THIS ( use 1.0 == FULL/MAX, use 0.5 == HALF, etc )
, "borderRadius" : 0
, "borderWidth" : 0
, "borderColor" : "#000000"
, "boxShadow" :
// .... rest of content
}