From 44302394814a185a471ac47bb75a1fb3d215b218 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E5=B3=B0?= <kevinaskin@minus.live>
Date: Fri, 1 Jun 2018 22:50:20 +0800
Subject: [PATCH 1/2] add source choose function

---
 main.js                        |  2 +-
 src/renderers/index/Index.js   | 29 ++++++++++++++++++++++++++---
 src/renderers/index/index.html |  6 ++++++
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/main.js b/main.js
index bf903dc..94105d2 100755
--- a/main.js
+++ b/main.js
@@ -18,7 +18,7 @@ class Main {
 
     createWindow() {
         // Create the browser window.
-        this.mainWindow = new BrowserWindow({width: 380, height: 300});
+        this.mainWindow = new BrowserWindow({width: 380, height: 720});
 
         // and load the index.html of the app.
         this.mainWindow.loadURL("file://" + path.join(Config.getRenderersDir(), "index", "index.html"));
diff --git a/src/renderers/index/Index.js b/src/renderers/index/Index.js
index aeaa907..3ed0985 100755
--- a/src/renderers/index/Index.js
+++ b/src/renderers/index/Index.js
@@ -13,7 +13,7 @@ class Index {
     constructor() {
         this.initUI();
         this.addListeners();
-        this.tryToGetStream();
+        this.getSources();
     }
 
     initUI() {
@@ -25,6 +25,8 @@ class Index {
         this._audioBpsInput = document.querySelector("#audioBpsInput");
         this._audioBpsInput.value = LocalStorageManager.getAudioBps(48000);
         this._btnAbout = document.querySelector("#btn-about");
+        this._sourcesContainer = document.getElementById('tagsContainer');
+        this._video = document.getElementById('preview');
 
         this._textInputDistDirPath = document.querySelector("#distDirPath");
         //try to read the saved dist dir path
@@ -128,13 +130,31 @@ class Index {
         });
     }
 
-    tryToGetStream() {
+    getSources() {
+        electron.desktopCapturer.getSources({
+            types: ['screen', 'window']
+        }, (err, sources) => {
+            if (err) throw err
+            const tags = sources.map(source => `<input type="radio" name="source" value="${source.id}" />${source.name}<br />`)
+            this._sourcesContainer.innerHTML = tags.join('')
+
+            const radios = document.getElementsByName('source')
+            radios.forEach(radio => {
+                radio.addEventListener('click', () => {
+                    this.tryToGetStream(radio.value)
+                })
+            })
+        })
+    }
+
+    tryToGetStream(sourceId) {
         this.recordState = RecordStatus.RETRIEVING_SCREEN_STREAM;
         navigator.mediaDevices.getUserMedia({
             audio: false,
             video: {
                 mandatory: {
-                    chromeMediaSource: 'screen',
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: sourceId,
                     minWidth: 1280,
                     maxWidth: 1280,
                     minHeight: 720,
@@ -144,6 +164,9 @@ class Index {
         }).then(stream => {
             this._currentStream = stream;
 
+            this._video.srcObject = stream;
+            this._video.onloadedmetadata = e => video.play();
+
             this.recordState = RecordStatus.RETRIEVING_AUDIO_STREAM;
             return navigator.mediaDevices.getUserMedia({audio: true});
         }).then(audioStream => {
diff --git a/src/renderers/index/index.html b/src/renderers/index/index.html
index 6d2c4bb..055d863 100755
--- a/src/renderers/index/index.html
+++ b/src/renderers/index/index.html
@@ -29,6 +29,12 @@
         </div>
     </div>
     <hr>
+    <div style="padding-top: 10px;height: 400px;">
+        <div>选择录制源</div>
+        <div id="tagsContainer" style="width: 100%;max-height: 150px;overflow-y: auto;"></div>
+        <div>预览</div>        
+        <video id="preview" style="width: 300px;height: 210px;"></video>
+    </div>
     <div style="padding-top: 10px;">
         <div>全局热键说明</div>
         <ul>

From 5eba558b10ab8417ac07560ca0a2a8d2273ee701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E5=B3=B0?= <kevinaskin@minus.live>
Date: Sat, 2 Jun 2018 01:14:58 +0800
Subject: [PATCH 2/2] use canvas avoid video source overload

---
 src/renderers/index/Index.js   | 16 ++++++++++++++--
 src/renderers/index/index.html |  7 ++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/renderers/index/Index.js b/src/renderers/index/Index.js
index 3ed0985..ecb65ae 100755
--- a/src/renderers/index/Index.js
+++ b/src/renderers/index/Index.js
@@ -27,6 +27,9 @@ class Index {
         this._btnAbout = document.querySelector("#btn-about");
         this._sourcesContainer = document.getElementById('tagsContainer');
         this._video = document.getElementById('preview');
+        this._canvas = document.getElementById('canvas');
+        this._ctx = this._canvas.getContext('2d');
+        this._btnRefresh = document.getElementById('refresh');
 
         this._textInputDistDirPath = document.querySelector("#distDirPath");
         //try to read the saved dist dir path
@@ -96,6 +99,7 @@ class Index {
 
         this._btnStartOrStop.onclick = () => this._btnStartOrStopClickedHandler();
         this._btnPauseOrResume.onclick = () => this._btnPauseOrResumeClickedHandler();
+        this._btnRefresh.onclick = () => this.getSources();
 
         this.addIpcRendererListeners();
         document.querySelector("#btnBrowserForDistDir").onclick = () => {
@@ -140,6 +144,7 @@ class Index {
 
             const radios = document.getElementsByName('source')
             radios.forEach(radio => {
+
                 radio.addEventListener('click', () => {
                     this.tryToGetStream(radio.value)
                 })
@@ -164,8 +169,15 @@ class Index {
         }).then(stream => {
             this._currentStream = stream;
 
-            this._video.srcObject = stream;
-            this._video.onloadedmetadata = e => video.play();
+            this._video.srcObject = this._currentStream;
+            this._video.play();
+            this._video.addEventListener('loadedmetadata', () => {
+                render()
+            })
+            const render = () => {
+                this._ctx.drawImage(this._video, 0, 0);
+                requestAnimationFrame(render)
+            }
 
             this.recordState = RecordStatus.RETRIEVING_AUDIO_STREAM;
             return navigator.mediaDevices.getUserMedia({audio: true});
diff --git a/src/renderers/index/index.html b/src/renderers/index/index.html
index 055d863..bae01ce 100755
--- a/src/renderers/index/index.html
+++ b/src/renderers/index/index.html
@@ -29,11 +29,12 @@
         </div>
     </div>
     <hr>
-    <div style="padding-top: 10px;height: 400px;">
-        <div>选择录制源</div>
+    <div style="padding-top: 10px;height: 410px;">
+        <div>选择录制源<button id="refresh">刷新</button></div>
         <div id="tagsContainer" style="width: 100%;max-height: 150px;overflow-y: auto;"></div>
         <div>预览</div>        
-        <video id="preview" style="width: 300px;height: 210px;"></video>
+        <video id="preview" style="width: 300px;height: 210px;left: 0;display: none;"></video>
+        <canvas id="canvas" style="width: 300px;height: 210px;border: 5px solid;" width="300" height="210"></canvas>
     </div>
     <div style="padding-top: 10px;">
         <div>全局热键说明</div>