Electron 开发实战
邓耀龙
美团高级前端工程师
21224 人已学习
新⼈⾸单¥59
课程目录
已完结/共 35 讲
Electron 开发实战
登录|注册
留言
12
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 17 | 傀儡端实现(一):基于Electron能力捕获桌面视频流
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 课程介绍
02 | 内容综述:学完这门课程你能得到什么?
03 | Electron介绍:为什么Electron这么火?
04 | 揭秘Electron架构原理:Chromium + Node.js是如何一起工作?
05 | 桌面端技术选型:如何选择合适的桌面端技术?
06 | Electron开发准备:环境搭建及前期准备
07 | 第一个Electron应用:开发一个简单版的番茄钟(上)
08 | 第一个Electron应用:开发一个简单版的番茄钟(下)
09 | 与Web开发不同(一):主进程与渲染进程
10 | 与Web开发不同(二):进程间通信
11 | 与Web开发不同(三):Native能力及原生GUI
12 | 与Web开发不同(四): 释放前端想象力,基于Electron能做什么?
13 | 实战项目综述:整体需求分析
14 | 设计思路:做远程控制有几步?
15 | 项目架构与基础业务:Electron 与 React 框架结合
16 | 主页面基础业务:Real World IPC
17 | 傀儡端实现(一):基于Electron能力捕获桌面视频流
18 | 傀儡端实现(二):如何接收&响应指令?
19 | 傀儡端实现(三):基于WebRTC传输视频流(上)
20 | 傀儡端实现(四):基于WebRTC传输视频流(下)
21 | 信令服务:如何连接两端(上)
23 | 指令传输实现:如何建立数据传输?
22 | 信令服务:如何连接两端(下)
24 | 项目完善与总结(上):App特性
25 | 项目完善与总结(下):原生GUI
26 | Electron 应用打包:从HTML到安装包
27 | Electron 应用更新(一):软件更新的痛点
28 | Electron 应用更新(二):线上项目如何更新?
29 | Electron 质量监控:桌面端的质量抓手是什么?
30 | 使用原生能力:如何集成C++能力?
31 | Electron 自动化测试:如何编写端到端测试?
32 | Electron体验优化:如何优化白屏问题?
33 | Electron客户端的安全:从XSS到RCE
34 | Electron bad parts:辩证看待Electron技术
35 | 结课测试&结束语
本节摘要
登录 后留言

全部留言(12)

  • 最新
  • 精选
忆民
老师,我按照视频里面敲的代码,就是显示不出来视频,和@瑞泉 同学估计类似。 let video = document.getElementById('screen-video'); function play(stream){ console.log('peer-control.js play'); video.srcObject = stream; video.onloadedmetadata=function(){ alert(5) console.log('video.onloadedmetadata'); video.play(); } } 这个函数没有调用,分析一下代码,不知道什么时机调用app.js的这个函数 相关项目在下面,辛苦老师帮忙看看, https://github.com/linyimin/electronDemo.git

作者回复: 你好,经过校对我们视频的确是少剪辑了一段,我们会重新编辑补充上去的。这里我你就是缺少了这段。 https://github.com/linyimin/electronDemo/blob/master/app/render/pages/control/app.js const peer = require('./peer-control') peer.on('add-stream', (stream) => { console.log('play stream') play(stream) }) 具体可以看我们源代码仓库https://github.com/dengyaolong/geektime-electron/blob/master/Chapter%202/7-11-remote-control/app/renderer/pages/control/app.js

2020-02-08
4
元气满满
视频是不是漏了一部分?peer-control.js 在哪里用的?

作者回复: https://github.com/dengyaolong/geektime-electron/tree/master/Chapter%202/3-6-remote-control-local-mock/app/renderer/pages/control 可以在这里找到源码

2020-02-03
2
1
ㄈㄤ
老师,如果是双屏的情况下,我如何只拿到主屏幕的视屏流。目前我的做法是通过canvas进行了裁剪,不过这样保存的视频很不清晰,能否给个思路

作者回复: 一般视频操作建议直接走ffmpeg可能会好一些

2020-10-25
刘弥
为什么视频里没有关于 app.js 文件中 peer.on('add-stream', ... 代码的编写,再次回到这个文件时自动就多了这段代码啊?

作者回复: 非常抱歉,经过校对我们视频的确少了放了一段,我们会重新调整。

2020-02-08
暴怒侠(有牙齿的IT妞)
老师您好,现在显示的是本地的桌面,如何实现像vncviewer的功能呢?就是管理的是一个远程机器,那是不是要把这个project分成两个部分,一部分要部署到远程机器呢? 请指教,拜托

作者回复: 是的,看完这章,控制端、傀儡端的逻辑都是可以单独运行的。

2020-02-03
瑞泉
老师,我是win10环境,下面的函数没有进入是什么原因 video.onloadedmetadata = function() { alert(5) console.log('video.onloadedmetadata') video.play() alert(6) } 感觉是没有获取到桌面,看了好几遍视频,没有发现什么原因,望老师指教一下。

作者回复: 最关键得确认有流拿到没有,但看这段代码没能看到啥问题,建议可以把完整的代码上传到github上,这样比较清晰排查。

2020-01-30
3
Cy23
Electron 17开始desktopCapturer.getSources只能写在主进程里了,教程需要改写,可以到官网文档照着改改, app/main/windows/control.js win.loadFile(path.resolve(__dirname, '../../renderer/pages/control/index.html')) desktopCapturer.getSources({ types: ['screen'] }).then(async sources => { console.log(sources) for (const source of sources) { if (source.name === 'Screen 1') { console.log(source.id) win.webContents.send('add-stream', source.id) return } } }) app/renderer/pages/control/app.js const { ipcRenderer } = require('electron') ipcRenderer.on('add-stream', async (event, sourceId) => { try { console.log(window.screen.width) const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: sourceId, maxWidth: window.screen.width, maxHeight: window.screen.height } } }) console.log(stream) play(stream) } catch (e) { handleError(e) } }) function handleError (e) { console.log(e) } function play(stream){ let video = document.getElementById('screen-video') video.srcObject = stream video.onloadedmetadata = (e) => video.play() }
2022-06-23
7
幼儿园园长
代码都是一样的,但是播放视频流的函数直接走error方法了,报错OverconstrainedError
2021-05-19
Geek_428b11
老师您好,我的代码执行到play函数里面的时候,可以获取到傀儡端传递过来的MediaStream,而且对比了内容也一致,但是onloadedmetadata函数没有执行到内部,video控件一直是空白,一直卡住没有继续往下调试了?希望老师能够帮忙解答一下。非常感谢。 let video = document.getElementById('screen-video') function play(stream) { console.log('start play'); console.log(stream); video.srcObject = stream video.onloadedmetadata = function() { console.log('onloadedmetadata'); video.play() } } 这是返回的MediaStream对象的内容: id: "qyna6hiaLNudQIRqe821mtWcwJiGTZMNFmQn" active: true onaddtrack: null onremovetrack: null onactive: null oninactive: null
2020-05-27
Kimmy
老师,遇到DOMException: Could not start video source这个错误,为什么把音频禁用就可以了?
2020-05-01
收起评论