search

mozmorris / react-webcam

Webcam component
https://codepen.io/mozmorris/pen/JLZdoP
MIT License
1.63k stars 281 forks source link

Vertical Recording Issue - always record horizontal video #384

Open faisvsqrl opened 10 months ago

faisvsqrl commented 10 months ago

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 commented 10 months ago

Does it happen on iOS 17? Because I have the same problem in mobile safari. IMG_5894 IMG_5895 It looks like the phone camera sends wrong video media stream size.

mattigrthr commented 6 months ago

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}
/>