Vertical Recording Issue - always record horizontal video

[faisvsqrl]

Video cam recording always record as horizontal even param pass for vertical

const videoConstraints = { audio: false, video: { deviceId: selectedCamera, width: { ideal: 720 }, height: { ideal: 1280}, }, }; const audioConstraints = { audio: true }; const audioStream = await navigator.mediaDevices.getUserMedia(audioConstraints); const videoStream = await navigator.mediaDevices.getUserMedia(videoConstraints); setPermission(true); const combinedStream = new MediaStream([...videoStream.getVideoTracks(), ...audioStream.getAudioTracks()]); setStream(combinedStream);

[lukianenko]

Does it happen on iOS 17? Because I have the same problem in mobile safari.


It looks like the phone camera sends wrong video media stream size.

[mattigrthr]

As a workaround for now, you can add style={{ objectFit: "cover" }}. The underlying image is still in portrait but it at least it's displayed within the constraints.

For example:

<Webcam
     ref={webcamRef}
     audio={false}
     width={720}
     height={480}
     screenshotQuality={1}
     screenshotFormat="image/png"
     className="scale-x-[-1] rounded-lg max-w-full aspect-[3/2]"
     style={{ objectFit: 'cover' }}
     videoConstraints={{ width: 720, height: 480 }}
     onUserMedia={handleCameraLoaded}
/>

[PouryaTak]

Video cam recording always record as horizontal even param pass for vertical

const videoConstraints = { audio: false, video: { deviceId: selectedCamera, width: { ideal: 720 }, height: { ideal: 1280}, }, }; const audioConstraints = { audio: true }; const audioStream = await navigator.mediaDevices.getUserMedia(audioConstraints); const videoStream = await navigator.mediaDevices.getUserMedia(videoConstraints); setPermission(true); const combinedStream = new MediaStream([...videoStream.getVideoTracks(), ...audioStream.getAudioTracks()]); setStream(combinedStream);

I have same issue in firefox and android, I want to show and capture the image in 320w to 450h, but it shows only 320w to 261.8h,
even using { objectFit: 'cover' } will change the view but the captured result is still same. Btw it works fine in desktop chrome browser. did anyone know anything about this issue?