get specific window sharing working. audio chat is disable for now, w…

…ill fix later

app.html

@@ -44,7 +44,7 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
     <main class="center mw8 phm phl-ns ptl">
       <div class="choose-container">
         <div class="cr">
-          <p class="mbl">If you share your screen the remote person will have full access to your desktop, mouse and keyboard.</p>
+          <p class="mbl">While sharing the remote person will have full access to your desktop, mouse and keyboard.</p>
           <div class="w-50 left">
             <a class="share-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mrm">Share Your Screen</a>
           </div>
@@ -53,6 +53,13 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
           </div>
         </div>
       </div>
+
+      <div class="capturer-container dn">
+        <div class="cr">
+          <p class="mbl">Select the window you want to share:</p>
+          <ul class="capturer-list"></ul>
+        </div>
+      </div>
 
       <div class="share-container dn">
         <h2 class="f4 ttu book">Share</h2>

app.js

@@ -1,14 +1,17 @@
 var ipc = require('ipc')
 var clipboard = require('clipboard')
 var shell = require('shell')
-var mdns = require('multicast-dns')()
+var desktopCapturer = require('desktop-capturer')
 
+var domify = require('domify')
+var mdns = require('multicast-dns')()
 var createPeerConnection = require('./peer.js')
 var ui = require('./ui.js')
 var connect = require('./connect.js')
 
 var peer
 var peerConnection = createPeerConnection()
+window.ui = ui
 window.pc = peerConnection
 
 mdns.on('query', function (query) {
@@ -78,7 +81,6 @@ ui.buttons.destroy.addEventListener('click', function (e) {
 })
 
 ui.buttons.share.addEventListener('click', function (e) {
-  ui.show(ui.containers.share)
   ui.hide(ui.containers.choose)
   ui.show(ui.buttons.back)
   try {
@@ -87,7 +89,50 @@ ui.buttons.share.addEventListener('click', function (e) {
     error(new Error('./robot.js failed to load'))
     error(e)
   }
-  connect.host(peerConnection, ui)
+  desktopCapturer.getSources({types: ['window', 'screen']}, function (err, sources) {
+    if (err) return error(err)
+    ui.hide(ui.containers.choose)
+    ui.show(ui.containers.capturer)
+    var sourcesList = document.querySelector('.capturer-list')
+    var id = 0
+    sources.forEach(function (source) {
+      var thumb = source.thumbnail.toDataUrl()
+      if (!thumb) return
+      var title = source.name.slice(0, 20)
+      var item = `<li><a href="#"><img src="${thumb}"><span>${title}</span></a></li>`
+      sourcesList.appendChild(domify(item))
+      id++
+    })
+    var links = sourcesList.querySelectorAll('a')
+    for (var i = 0; i < links.length; i++) {
+      links[i].onclick = closure(i)
+      function closure (i) {
+        return function (e) {
+          e.preventDefault()
+          var source = sources[i]
+          var opts = {
+            constraints: {
+              audio: false,
+              video: {
+                mandatory: {
+                  chromeMediaSource: 'desktop',
+                  chromeMediaSourceId: source.id,
+                  maxWidth: screen.availWidth,
+                  maxHeight: screen.availHeight,
+                  maxFrameRate: 25
+                }
+              }
+            }
+          }
+          ui.show(ui.containers.share)
+          ui.hide(ui.containers.capturer)
+          sourcesList.innerHTML = ""
+          connect.host(peerConnection, ui, opts)
+          return false
+        }
+      }
+    }
+  })
 })
 
 ui.buttons.mdns.addEventListener('click', function (e) {

connect.js

@@ -47,14 +47,17 @@ module.exports.remote = function (peerConnection, ui, config, room) {
   })
 }
 
-module.exports.host = function (peerConnection, ui) {
+module.exports.host = function (peerConnection, ui, opts) {
+  if (!opts) opts = {}
   getARoom(peerConnection, ui, function (err, room, config) {
     if (err) {
       ui.inputs.copy.value = 'Error! ' + err.message
       return
     }
     ui.inputs.copy.value = room
-    peerConnection.hostPeer(room, config, function (err, peer) {
+    opts.room = room
+    opts.config = config
+    peerConnection.hostPeer(opts, function (err, peer) {
       if (err) {
         ui.inputs.copy.value = 'Error! ' + err.message
         return

package.json

@@ -5,28 +5,30 @@
   "main": "electron.js",
   "scripts": {
     "start": "electron electron.js",
-    "build": "electron-packager . ScreenCat --platform=darwin --arch=x64 --version=0.34.2 --protocol-name=\"ScreenCat URL\" --protocol=\"screencat\" --ignore=node_modules/electron-prebuilt --ignore=node_modules/electron-packager --ignore=node_modules/browserify --ignore=node_modules/wzrd --ignore=node_modules/standard && cp img/Icon.icns ScreenCat.app/Contents/Resources/atom.icns",
-    "dev": "wzrd remote.js:remote-bundle.js",
+    "build": "electron-packager . ScreenCat --platform=darwin --arch=x64 --version=0.36.0 --protocol-name=\"ScreenCat URL\" --protocol=\"screencat\" --ignore=node_modules/electron-prebuilt --ignore=node_modules/electron-packager --ignore=node_modules/browserify --ignore=node_modules/wzrd --ignore=node_modules/standard && cp img/Icon.icns ScreenCat.app/Contents/Resources/atom.icns",
     "css": "node-sass stylesheets/sass/screencat.scss stylesheets/css/screencat.css --watch",
-    "test": "standard"
+    "test": "standard",
+    "rebuild": "cd node_modules/robotjs && set HOME=~/.electron-gyp && node-gyp rebuild --target=0.36.0 --arch=x64 --dist-url=https://atom.io/download/atom-shell"
   },
   "author": "max ogden",
   "license": "BSD-3-Clause",
   "dependencies": {
+    "domify": "^1.4.0",
     "menubar": "^2.0.4",
     "multicast-dns": "^3.0.0",
     "nets": "^3.1.0",
     "simple-peer": "^5.11.5",
     "ssejson": "^1.2.0",
-    "vkey": "^1.0.0"
+    "vkey": "^1.0.0",
+    "xtend": "^4.0.1"
   },
   "optionalDependencies": {
     "robotjs": "^0.3.0"
   },
   "devDependencies": {
     "browserify": "^9.0.3",
     "electron-packager": "^4.1.0",
-    "electron-prebuilt": "^0.34.2",
+    "electron-prebuilt": "^0.36.0",
     "node-sass": "^3.4.1",
     "standard": "^5.3.1",
     "tachyons": "^1.2.0",

peer.js

@@ -1,20 +1,20 @@
 /* global screen, EventSource */
 var zlib = require('zlib')
 var events = require('events')
-
+var xtend = require('xtend')
 var SimplePeer = require('simple-peer')
 var nets = require('nets')
 var getUserMedia = require('./get-user-media.js')()
 
-module.exports = function create (opts) {
+module.exports = function create () {
   var server = 'http://catlobby.maxogden.com'
   // var server = 'http://localhost:5005'
   var remoteConfigUrl = 'https://instant.io/rtcConfig'
   if (process.browser) remoteConfigUrl = 'http://cors.maxogden.com/' + remoteConfigUrl
 
   var videoSize
 
-  var constraints = {
+  var defaultConstraints = {
     audio: false,
     video: {
       mandatory: {
@@ -121,7 +121,10 @@ module.exports = function create (opts) {
     })
   }
 
-  function hostPeer (room, config, cb) {
+  function hostPeer (opts, cb) {
+    var room = opts.room
+    var config = opts.config
+    var constraints = opts.constraints || defaultConstraints
     var peer
 
     // listen for pongs

stylesheets/css/screencat.css

@@ -163,6 +163,21 @@ input[type="password"] {
 .multimedia-container video {
   width: 100%; }
 
+.capturer-list li {
+  list-style-type: none;
+  margin-right: 30px;
+  float: left;
+  height: 150px; }
+
+.capturer-list img {
+  border: 1px solid #F7F7F7; }
+
+.capturer-list img:hover {
+  border: 1px solid black; }
+
+.capturer-list span {
+  display: block; }
+
 .content-container.w-50 {
   margin: auto; }
 

stylesheets/sass/screencat.scss

@@ -203,6 +203,25 @@ input[type="password"] {
   width: 100%;
 }
 
+.capturer-list li {
+  list-style-type: none;
+  margin-right: 30px;
+  float: left;
+  height: 150px;
+}
+
+.capturer-list img {
+  border: 1px solid #F7F7F7;
+}
+
+.capturer-list img:hover {
+  border: 1px solid black;
+}
+
+.capturer-list span {
+  display: block;
+}
+
 .content-container.w-50 {
   margin: auto;
 }

ui.js

@@ -10,6 +10,7 @@ ui.containers = {
   join: document.querySelector('.join-container'),
   content: document.querySelector('.content-container'),
   choose: document.querySelector('.choose-container'),
+  capturer: document.querySelector('.capturer-container'),
   multimedia: document.querySelector('.multimedia-container'),
   sharing: document.querySelector('.sharing-container'),
   viewing: document.querySelector('.viewing-container'),