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 @@
+
+
选择录制源
+
+
预览
+ + +
全局热键说明