0

I want to capture high quality images from RPI using Chromium and the Rpi camera as webcam. If I take photos with raspistill I can get 8MP quality. I'm trying to do the same within the browser but quality is always bad, even if I increase constraints for getUserMedia call. This is the test page I'm using to capture the video stream:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>ASCII Mirror</title>
  <style>body {margin: 0;}</style>
</head>
<body>
  <video id="player" autoplay="true"></video>
  <div id="snapshots"></div>
  <button id="button" type="button" onclick="takeSnapshot()">Snapshot</button>
  <script>    
      // Canvas and video HTML elements.
      var eVideo = document.querySelector("#player");

      // Work out the dimensions of our canvas.
      var iVideoWidth = 1920;
      var iVideoHeight = 1080;

      var oMediaOptions = { video: {width: {exact: iVideoWidth}, height: {exact: iVideoHeight}}};

      if (!navigator.getUserMedia) {
          navigator.getUserMedia = navigator.getUserMedia ||
                                   navigator.webkitGetUserMedia ||
                                   navigator.mozGetUserMedia ||
                                   navigator.msGetUserMedia;
      }

      if (!navigator.getUserMedia){
        alert('getUserMedia not supported in this browser.');
      }

      navigator.getUserMedia(oMediaOptions, success, function(e) {
        console.log(e);
      });

      function success(stream){
        eVideo.srcObject = stream;
        eVideo.play();        
      }

      function takeSnapshot() {

        var cv = document.createElement("canvas");
        cv.width = iVideoWidth;
        cv.height = iVideoHeight; 
        var cx = cv.getContext('2d');
        cx.fillRect(0, 0, iVideoWidth, iVideoHeight);
        // Grab the image from the video
        cx.drawImage(document.getElementById('player'), 0, 0, iVideoWidth, iVideoHeight);
        let imgUrl = cv.toDataURL();
        let img = document.createElement("img");
        img.src = imgUrl;  
        img.setAttribute("width", "320");
        img.setAttribute("height", "200");
        document.getElementById("snapshots").appendChild(img);
      }    
  </script>
</body>
</html>

In fact photos are taken at the right resolution but quality is really bad. I followed this to enable Rpi camera as webcam. Do you have any hint to increase quality? I attach a photo to see the quality: Photo

0

There's a couple things going on. One is you're pulling still images out of video at 1920x1080 resolution which is much lower than the 8 megapixel still resolution that the rpi camera module can do. Another is that the rpi camera needs some time to adjust the exposure setting, and nothing I can see in your code sets any of the exposure variables.

So to increase the quality, use still images in your code rather than video frames and set the various photography settings to get the result you want.

  • Yes I know that, unfortunately I cannot set resolution higher than FullHD in with Chromium. What do you mean by setting the exposure variables? I need to have the preview image before taking the photo so I don't understand well what you mean. – Alessandro Dionisi Dec 29 '18 at 12:47
  • @AlessandroDionisi I don’t know that you’ll have any luck getting better quality by getting your still images from a video. It would be much better to figure out how to enable still images directly. The settings I’m talking about are things like sharpness, saturation, brightness, etc as in this raspistill documentation: raspberrypi.org/documentation/raspbian/applications/camera.md There is also a way to do similar with python, but I don’t know about JavaScript. – T. M. Dec 29 '18 at 18:49
0

I increased a bit the quality playing with v4l2-ctl utils:

v4l2-ctl -c video_bitrate=25000000,video_bitrate_mode=0,compression_quality=100

Anyway quality is still lower than raspivid/raspistill at the same resolution (HD/Full HD)

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.