What are the three black dots when capturing the screen?

A

Alexander Ryabov2016-11-14 18:06:48

Node.js

Alexander Ryabov, 2016-11-14 18:06:48

Salute to all, in short, you need to capture the screen for further processing, so that everything immediately becomes clear, I will give a scenario that well shows what the problem is.
We have markup:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <video id="video" width="1920" height="1080"></video>
    <div id="capture">Сapture</div>
  <canvas id="canvas" width="1920" height="1080"></canvas>
  <script src="js.js"></script>
</body>
</html>

Styles though it doesn't matter

body {
  margin: 0;
  padding: 0;
  background: #f9f9f9;
  overflow: hidden;
}

#capture{
  position: absolute;
  top: 10%;
  left: 10%;
  background: #fff;
}

package.json

{
  "name": "Capture",
  "main": "index.html",
  "version": "0.0.1",
  "window": {
    "width": 800,
    "height": 600,
    "resizable": true,
    "toolbar": false,
    "frame": true,
    "transparent": false,
  }
}

And the js.js script itself

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var dcm = nw.Screen.DesktopCaptureMonitor;
nw.Screen.Init();

dcm.on("added", function (id, name, order, type){

  var constraints = {
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: dcm.registerStream(id)
      }
    }
  };
 
    navigator.webkitGetUserMedia({
            audio: false,
            video: {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    chromeMediaSourceId: constraints.video.mandatory.chromeMediaSourceId,
                    maxWidth: 1920,
                    maxHeight: 1080
                },
                optional: []
            }
        },
    function(stream){
      tvideo = document.getElementById('video');
      tvideo.src = window.URL.createObjectURL(stream);
        
      tvideo.onloadedmetadata = function(e) {
        tvideo.play();
      }
    },
    function(err){
      console.log(err);
    });

dcm.stop();
});

dcm.on("removed", function (id){ });
dcm.on("orderchanged", function (id, new_order, old_order){ });
dcm.on("namechanged", function (id, name){ });
dcm.on("thumbnailchanged", function (id, thumbnail){ });
dcm.start(true, false);


document.getElementById('capture').addEventListener('click', function() {
  context.drawImage(tvideo, 0, 0);
});

Roughly speaking, everything is according to the documentation docs.nwjs.io/en/tmp/References/Screen , but here's the problem,
when capturing, there are three black dots in the upper left part of the screen, when drawing to the canvas, this is clearly visible, here is the screen joxi.ru /VrwolP6SOKEpqr , larger joxi.ru/MAj0lPxs4vlzKm
I have no idea what it is, and most importantly how to get rid of it, where do these three dots come from?
I am using the latest version of nw.js

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexey, 2016-11-14
@alsopub

Judging by what I see, these are not "extra three dots", but a screen buffer shifted to the right by 3 pixels.
That is, the picture is shifted to the right, and what "left" out of bounds is drawn one pixel lower to the left.
Accordingly, three points are empty three points.
Try dcm.start(true, true); as in the instructions.

A

Alexander Ryabov, 2016-11-14
@deeputy

It turns out to be shifted to the right by 3px, down by 1px, I can’t understand the nature of this phenomenon, so I turned to the collective mind.
this construction dcm.start(true, true); not in business here.