Merge pull request #4 from KernelWar/desarrollo

versión 0.3.0 -> nueva funcionalidad(ver pantalla)

Author: KernelWar

api-win/screen.js

@@ -0,0 +1,33 @@
+const { desktopCapturer } = require('electron')
+var navigatorElectron = null
+
+
+function setNavigator(value){
+    navigatorElectron = value
+}
+
+async function getVideoSources() {
+    const inputSources = desktopCapturer.getSources({
+        types: ['window', 'screen'],
+        thumbnailSize: {
+            width: 600,
+            height: 400
+        }
+    })
+    return inputSources;
+}
+
+async function selectSource(source) {
+    const constraints = {
+        audio: false,
+        video: {
+            mandatory: {
+                chromeMediaSource: 'desktop',
+                chromeMediaSourceId: source.id
+            }
+        }
+    };
+    return navigator.mediaDevices.getUserMedia(constraints);    
+}
+
+module.exports = { getVideoSources, selectSource, setNavigator }

index.js

@@ -13,7 +13,7 @@
 })();
 */
 const environment = require('./environment/environment')
-const { app, BrowserWindow, nativeImage, ipcMain } = require('electron')
+const { app, BrowserWindow, nativeImage, ipcMain, ipcRenderer } = require('electron')
 
 const express = require('express')
 const http = require('http')
@@ -93,6 +93,7 @@ fs.readFile(pathConfigServer, function (err, data) {
     }
 })
 
+
 ipcMain.on("setHost", (event, newhost) => {
     global._host = newhost;
     appexpress.set('host', newhost)
@@ -153,6 +154,7 @@ ipcMain.on("closeAll", (event) => {
     win.close()
 });
 
+
 function removeDevice() {
     global._system = null
     global._device = null
@@ -187,6 +189,26 @@ function resetSocketServer() {
 
 }
 
+//Eventos main process
+ipcMain.on("getDataStreamWebContent", (source) => {
+    win.webContents.send("getDataStream", source)
+})
+
+ipcMain.on("activateStreamWebContent", (source) => {
+    console.log('-> Activate stream')
+    win.webContents.send("activateStream", source)
+})
+
+ipcMain.on("stopStreamWebContent", () => {
+    console.log('-> Stop stream')
+    win.webContents.send("stopStream")
+})
+
+ipcMain.on("finalizeStreamWebContent", () => {
+    console.log('-> Finalize stream')
+    win.webContents.send("finalizeStream")
+})
+
 
 app.on('ready', () => {
     win = new BrowserWindow({
@@ -209,6 +231,7 @@ app.on('ready', () => {
     win.setIcon(nativeImage.createFromPath(iconPath))
     win.once('ready-to-show', () => {
         win.show()
+        //win.webContents.send("hola")
     })
     if (process.env.NODE_ENV != 'production') {
         win.webContents.openDevTools()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oneconnection-server",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Server controlador de Windows",
   "main": "index.js",
   "scripts": {

socket/socket-app.js

@@ -7,15 +7,16 @@ const battery = require('battery-level')
 const directories = require("../api-win/directories-win")
 const shorcutsMedia = require("../api-win/shortcuts-media-win")
 const session = require("../api-win/session-win")
+const screen = require('../api-win/screen')
 const os = require('os')
 const fs = require('fs')
 const os_utils = require('os-utils');
+const { ipcMain } = require("electron");
 let io = null
 //Monitores
 let checkConnected = null
 let updateData = null
 let cpuMonitor = null
-const path = require('path')
 const environment = require('./../environment/environment')
 let query = 'SELECT CurrentBrightness,InstanceName FROM WmiMonitorBrightness';
 let wmi = new WmiClient({
@@ -132,7 +133,7 @@ function listenMediaModule(socket) {
 function listenSesionModule(socket) {
 
     let commandCmd = null
-    commandCmd = environment.env.global+ "/config/displayOff.bat"
+    commandCmd = environment.env.global + "/config/displayOff.bat"
 
     socket.on("offScreen", () => {
         let message = {
@@ -142,7 +143,7 @@ function listenSesionModule(socket) {
         }
         const cmd = require('node-cmd');
         let wait = new Promise((resolve, reject) => {
-            cmd.get("start /B \"\" \"" + commandCmd+"\"", function (err, data) {
+            cmd.get("start /B \"\" \"" + commandCmd + "\"", function (err, data) {
                 if (err) {
                     console.log(err)
                     message.error = true
@@ -257,6 +258,40 @@ function loadDevice(device) {
         console.log("fix null")
     }
 }
+function listenScreen(socket) {
+    socket.on("getScreens", () => {
+        screen.getVideoSources().then(data => {
+            data.map(item => {
+                item.thumbnail = item.thumbnail.toDataURL()
+            })
+            io.emit("onScreens", data)
+        })
+    })
+    socket.on("onActivateStream", (source) => {
+        ipcMain.emit("activateStreamWebContent", source)
+        //console.log(source)
+        //ipcMain.emit("initStream", source)
+    })
+
+    socket.on("getDataStream", () => {
+        ipcMain.emit("getDataStreamWebContent")
+    })
+
+    ipcMain.on("onDataStream", (event, data) => {
+        if(clientConnected() == false){
+            console.log('-> STOP -> [exit app]')
+            ipcMain.emit("finalizeStreamWebContent")
+        }else{            
+            io.emit("streamLive", data)
+        }
+    });
+    socket.on("stopStream", () => {
+        ipcMain.emit("stopStreamWebContent")
+    })
+    socket.on("finalizeStream", () => {
+        ipcMain.emit("finalizeStreamWebContent")
+    })
+}
 
 function listenInConnection() {
     io.on("connection", socket => {
@@ -275,6 +310,7 @@ function listenInConnection() {
         listenDirectoryModule(socket)
         listenMediaModule(socket)
         listenSesionModule(socket)
+        listenScreen(socket)
 
     });
 
@@ -345,4 +381,12 @@ function getTimeNow() {
     let time = "[" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "]"
     return time
 }
-module.exports = { initServer, listenInConnect, listenInConnection, deleteSocketServer, clientConnected, getTimeNow, desconectedClient }
+module.exports = {
+    initServer,
+    listenInConnect,
+    listenInConnection,
+    deleteSocketServer,
+    clientConnected,
+    getTimeNow,
+    desconectedClient
+}

src/index.html

@@ -134,7 +134,7 @@ <h5 id="txt-device" class="card-title">---</h5>
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="staticBackdropLabel">Seleccione interfaz de red</h5>
-                    
+
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
@@ -177,7 +177,8 @@ <h5 class="modal-title" id="staticBackdropLabel">Puerto</h5>
                                     pattern="/^([0-9])*$/" class="form-control" type="text">
                             </div>
                             <p style="font-size: 12px;">
-                                <strong>Puertos del 1024 al 49151:</strong> Son los puertos registrados, los que se utilizan por las aplicaciones y los juegos que instales en el ordenador. 
+                                <strong>Puertos del 1024 al 49151:</strong> Son los puertos registrados, los que se
+                                utilizan por las aplicaciones y los juegos que instales en el ordenador.
                             </p>
                         </div>
                         <div class="text-right">
@@ -198,19 +199,78 @@ <h5 class="modal-title" id="staticBackdropLabel">Puerto</h5>
             </div>
         </div>
     </div>
-
+    <video id="video-stream" style="display:none;visibility:hidden; width:0;height:0;" width="1000" autoplay></video>
+    <canvas id="preview" style="display:none;visibility:hidden; width:0;height:0;" width="1000" height="800"></canvas>
     <script>
         window.jQuery = window.$ = require("jquery");
     </script>
     <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        var canvas = document.getElementById("preview");
+        var context = canvas.getContext('2d');
+        var video = document.getElementById("video-stream")
         const QRCode = require('qrcode');
         const Mustache = require('mustache')
         const os = require("os")
         var version = require('./../package.json').version
         $('html head').find('title').text('OneConnection server v' + version);
         $("#title-frame").text('OneConnection server v' + version)
-        const { remote, ipcRenderer } = require("electron");
+        const { remote, ipcRenderer, ipcMain } = require("electron");
+        var frameStream
+        var stream = null
+        var streamActive = false
+        var constraints = {
+            audio: false,
+            video: {
+                mandatory: {
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: null,
+                    maxWidth: 1000,
+                    maxHeight: 800
+                }
+            }
+        };
+        var frames = null
+        ipcRenderer.on("activateStream", (event, source) => {
+            //console.log('source.id : ', source.id, ' | chromeMediaSourceId: ', constraints.video.mandatory.chromeMediaSourceId)
+            streamActive = false
+            if (source.id != constraints.video.mandatory.chromeMediaSourceId) {
+                console.log('Init stream')
+                constraints.video.mandatory.chromeMediaSourceId = source.id
+            } else {
+                console.log("Resume stream")
+            }
+            stream = navigator.mediaDevices.getUserMedia(constraints)
+            stream.then(mediaStream => {
+                video.srcObject = mediaStream
+                context.drawImage(video, 0, 0, 1000, 800);
+                streamActive = true
+            })
+        });
+
+        ipcRenderer.on("getDataStream", (event) => {
+            frames = setInterval(() => {
+                if (streamActive) {
+                    //console.log('send data stream ...')
+                    context.drawImage(video, 0, 0, 1000, 800);
+                    ipcRenderer.send("onDataStream", canvas.toDataURL('image/webp', 0.7))
+                }
+            }, 10)
+        })
+
+        ipcRenderer.on("stopStream", (event) => {
+            clearInterval(frames)
+        })
+
+        ipcRenderer.on("finalizeStream", (event) => {
+            let tracks = video.srcObject.getTracks();
+            tracks.forEach(track => track.stop());
+            stream.srcObject = null;
+            //video.pause()
+            //video.currentTime = 0
+            clearInterval(frames)
+            streamActive = false
+        })
         generateQR()
         $("#wait-device").hide();
         $("#device-info").hide();