How to use transformations to crop live streaming

Hi,

I have set up Live Streaming using WebRTC following this guide https://cloudinary.com/documentation/video_live_streaming_webrtc#stop and a React page to view the streaming using your Self Hosted Player https://cloudinary.com/documentation/video_player_how_to_embed.

I am trying to resize/crop video on the player but neither eager transformations on the upload preset nor specifying them on the player itself are working, the video is coming from the front facing camera of my Galaxy Note 10.

Eager Transformations:

c_pad,g_faces,h_351,w_723

var demoplayer = window.cloudinary.videoPlayer('demo-player', {
showLogo:true,
logoImageUrl:"https://i.ibb.co/Njdf844/homescreen96.png",
logoOnclickUrl:baseUrl,
autoplay:true,
controls:true,
cloud_name:process.env.CLOUDINARY_ID,
sourceTypes: ['hls','dash','webm/vp9','mp4/h265','mp4']

})
demoplayer.source(streamUrl)
demoplayer.transformation({ width:500, height:600, crop:'fill_pad' })

Andres De Jesus

May 11, 2022 14:03

The only way I can resize is if I remove "cld-fluid" and manually enter height and width:

<video
id="demo-player"
className="cld-video-player cld-fluid"
width={400}
height={400}
>
</video>

But then I lose responsiveness.

Wissam Khalili

May 12, 2022 10:40

Hi Andres,

You could not make a transformation for live streaming.

The transformation could be done after the video was uploaded to your account.

Hope it makes sense.

Regards,

Wissam

Comments