Setting minScreenshotHeight/Width to size of window

[lukagrbec]

Hello,

firstly, thank you for making this great library. I'm trying to set the screenshot to the size of the window, however, the images seem to be set to the resolution of the camera (1280x720). This is my webcam component:

<Webcam
         audio={false}
         screenshotFormat="image/webp"
         forceScreenshotSourceSize
         videoConstraints={{
           height: 2000,
           width: 2000
         }}
         ref={this.setRef}
       />

I can, however, set the webcam component (before taking a photo) to fit full screen by adding this style to the webcam component:

style = {{width: "100%", height: "100%", position: "absolute", left: "50%", marginLeft: "-50%", objectFit: "cover", objectPosition: "center"}}

And this css:

.webcamCapture {
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
}

How could I also make the screen shot full screen?

Any help would be appreciated.

[mozmorris]

@lukagrbec could you share a codepen with your code please?

[lukagrbec]

@mozmorris Thank you for your reply. Here is the link to the codepen: https://codesandbox.io/s/8to8e

[lukagrbec]

@mozmorris I'm trying to set the crop preview (webcam screenshot) to fully fit the window size as the video (before taking the photo) does. As explained above I've achieved that for the video using css. But if I try to use the same (or different) css for the screenshot it is not displayed larger than 1280x720 px. I thought that the forceScreenshotSourceSize would display it larger than 1280x720 px. I also tried using minScreenshotHeight/Width, but it didn't seem to make the screenshot larger than 1280x720 px. Is there a way to stretch the screenshot to fit the screen?

[mozmorris]

@lukagrbec you need to remove the forceScreenshotSourceSize and use only the minScreenshotHeight/Width props.

[mozmorris]

It's worth noting that you can't force your device to use a width/height video constraint that it does not support (see https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings). It's best to leave this at the maximum supported resolution.

[lukagrbec]

@mozmorris thanks for your suggestion. I implemented it and the code now looks like this:

        <Webcam
          audio={false}
          screenshotFormat="image/webp"
          videoConstraints={{
            height: this.state.screenHeight,
            width: this.state.screenWidth
          }}
          minScreenshotHeight={this.state.screenHeight}
          minScreenshotWidth={this.state.screenWidth}
          ref={this.setRef}
          style = {{width: "100%", height: "100%", position: "absolute", left: "50%", marginLeft: "-50%", objectFit: "cover", objectPosition: "center"}}
        />

It seems to work on my PC (1707x956px) and also on Galaxy S5 emulator (360x640), but it doesn't work on the iPad (768x1024)/iPhone/Pixel 2 emulators (only the screenshot isn't full screen, the camera is). Do you know why this could be happening?

I attached the screenshots of what I've described below.

Galaxy S5 screenshot

iPad camera

iPad screenshot

PC screenshot

[Jackpate-2003]

Hi there! You can use the following code snippet, in your global styles file: ‌ video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }

[lukagrbec]

Hi, Thanks for your reply. Unfortunately this also doesn't work. The video from the camera before capture is full screen. However, the photo after capturing still doesn't fit full screen for some devices (such as iPad emulator). The photo is displayed in react-image-crop component. Could this affect displaying the photo full screen?