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..ecb65ae 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,11 @@ 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._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
@@ -94,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 = () => {
@@ -128,13 +134,32 @@ class Index {
});
}
- tryToGetStream() {
+ getSources() {
+ electron.desktopCapturer.getSources({
+ types: ['screen', 'window']
+ }, (err, sources) => {
+ if (err) throw err
+ const tags = sources.map(source => `${source.name}
`)
+ 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 +169,16 @@ class Index {
}).then(stream => {
this._currentStream = stream;
+ 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});
}).then(audioStream => {
diff --git a/src/renderers/index/index.html b/src/renderers/index/index.html
index 6d2c4bb..bae01ce 100755
--- a/src/renderers/index/index.html
+++ b/src/renderers/index/index.html
@@ -29,6 +29,13 @@