Всем салют, вкратце, нужно захватить экран для дальнейшей обработки, дабы все сразу стало понятно приведу сценарий, который хорошо показывает в чем проблема.
Имеем разметку:
<!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>
Стили, хотя это не важно
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,
}
}
И собственно сам скрипт js.js
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);
});
Грубо говоря все по документации
docs.nwjs.io/en/tmp/References/Screen, но вот в чем проблема,
при захвате в левой верхней части экрана присутствуют три черные точки, при отрисовки на канву это хорошо видно, вот скрин
joxi.ru/VrwolP6SOKEpqr, крупнее
joxi.ru/MAj0lPxs4vlzKm
Ума не приложу что это, и главное как от этого избавиться, откуда эти три точки берутся?
Использую последнюю на данный момент версию nw.js
Простой