实现录屏功能

[limingth]

可以采用 Chrome 插件，能够实现和网页的编程接口，通过页面 js 来控制插件的录制，播放，暂停等。

时间：1周 （优先级排第1位）

[ggxx]

目前调试成功了一个Demo，主要思路分两步。 首先通过现有的共享桌面的脚本实现将整个桌面在html的一个div中显示，然后通过现有的录制div脚本间接地实现对整个桌面的录制。

参考资料：

全屏共享到canvas

https://www.webrtc-experiment.com/screen-sharing/ https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-sharing

录制canvas与audio，合并压缩为mp4

https://www.webrtc-experiment.com/ffmpeg/audio-plus-canvas-recording.html

[ggxx]

昨天的解决方案好像有点问题，当网页最小化后不能录屏，下一步考虑使用RecordRTC实现。

[limingth]

郭旭，是否有测试链接？ 或者demo的页面，如果需要远程登录到 166 的服务器做页面，张宝可以协助你。

2014-08-25 10:57 GMT+08:00 ggxx notifications@github.com:

昨天的解决方案好像有点问题，当网页最小化后不能录屏，下一步考虑使用RecordRTC实现。

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53222692 .

Ming Li

[ggxx]

实验室的路由没有映射我的端口，目前传不上去。我这两天在准备单位的职称答辩，所以没去学校，明天回去。如果有其它可用的公网IP，可以给我一个。 在 2014年8月26日 上午11:04，"Li Ming" notifications@github.com写道：

郭旭，是否有测试链接？ 或者demo的页面，如果需要远程登录到 166 的服务器做页面，张宝可以协助你。

2014-08-25 10:57 GMT+08:00 ggxx notifications@github.com:

昨天的解决方案好像有点问题，当网页最小化后不能录屏，下一步考虑使用RecordRTC实现。

— Reply to this email directly or view it on GitHub < https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53222692>

.

Ming Li

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53369970 .

[limingth]

已经给你创建了一个普通用户帐号

ssh ggxx@182.92.71.188

密码 maodou

如果需要安装什么，或者需要 sudo ，可以告诉我。

在 2014年8月26日 上午11:15，ggxx notifications@github.com写道：

实验室的路由没有映射我的端口，目前传不上去。我这两天在准备单位的职称答辩，所以没去学校，明天回去。如果有其它可用的公网IP，可以给我一个。 在 2014年8月26日 上午11:04，"Li Ming" notifications@github.com写道：

郭旭，是否有测试链接？ 或者demo的页面，如果需要远程登录到 166 的服务器做页面，张宝可以协助你。

2014-08-25 10:57 GMT+08:00 ggxx notifications@github.com:

昨天的解决方案好像有点问题，当网页最小化后不能录屏，下一步考虑使用RecordRTC实现。

— Reply to this email directly or view it on GitHub <

https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53222692>

.

Ming Li

— Reply to this email directly or view it on GitHub < https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53369970>

.

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53370553 .

Ming Li

[limingth]

@wzhan12 帮忙看看 郭旭 @ggxx 现在的工作，提一些建议吧。

[ggxx]

Demo演示页面如下 https://166.111.131.12:30443/recordrtc.html

测试方式：

1. 选中Record Screen单选框，否则是使用摄像头而不是抓取桌面
2. 点击Record All按钮，开始录制
3. 点击Stop All按钮，结束录制
4. 同时调用js脚本进行mp4压缩编码，按钮下方的log会输出当前状态，这个过程比较慢，可查看任务管理器中的CPU使用率，通常情况下有一个核处于100%工作的状态。
5. 编码结束后会显示一个连接，下载生成的mp4

其中使用了几个开源js脚本和一个chrome独有的的API，如果需要，我会详细说明。 下一步准备研究一下webrtc的API。

[limingth]

@ggxx 测试了一下，声音录制ok，视频录制ok，桌面录屏也ok

问题：桌面的清晰度不够，我进行的命令行操作，录制下来的视频回放基本看不清在操作什么命令。

下一步可以结合一下 @lonsdale8734 做的音频教室，看看能否把 声音+当前的桌面共享 录制下来。

[ggxx]

是的，由于RecordRTC库把底层的实现封装了，目前还不知道画质差是压缩编码造成的，还是chrome抓屏造成的，我在尝试着直接调用WebRTC的API实现录屏，看看效果如何，同时也全面学习一下WebRTC，估计还需要几天的时间。 在 2014年8月27日 下午2:57，"Li Ming" notifications@github.com写道：

@ggxx https://github.com/ggxx 测试了一下，声音录制ok，视频录制ok，桌面录屏也ok

问题：桌面的清晰度不够，我进行的命令行操作，录制下来的视频回放基本看不清在操作什么命令。

下一步可以结合一下 @lonsdale8734 https://github.com/lonsdale8734 做的音频教室，看看能否把 声音+当前的桌面共享 录制下来。

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53533260 .

[limingth]

此项功能非常重要和实用，多花一些时间是值得的。期待你的好消息！

在 2014年8月27日 下午3:15，ggxx notifications@github.com写道：

是的，由于RecordRTC库把底层的实现封装了，目前还不知道画质差是压缩编码造成的，还是chrome抓屏造成的，我在尝试着直接调用WebRTC的API实现录屏，看看效果如何，同时也全面学习一下WebRTC，估计还需要几天的时间。

在 2014年8月27日 下午2:57，"Li Ming" notifications@github.com写道：

@ggxx https://github.com/ggxx 测试了一下，声音录制ok，视频录制ok，桌面录屏也ok

问题：桌面的清晰度不够，我进行的命令行操作，录制下来的视频回放基本看不清在操作什么命令。

下一步可以结合一下 @lonsdale8734 https://github.com/lonsdale8734 做的音频教室，看看能否把 声音+当前的桌面共享 录制下来。

— Reply to this email directly or view it on GitHub < https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53533260>

.

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53534480 .

Ming Li

[ggxx]

目前进度：

1. 弄清楚了WebRTC与录屏相关的几个API，学习了chrome插件的开发方法。
2. 尝试实现一个WebRTC下支持高清分辨率的chrome录屏插件（目前google商店中已有的Screencastify很好地实现了这一功能，但不开源）。
3. 目前的思路是，编写插件，通过chrome的API实现对desktop、tab或window连续进行抓图，然后将图片编码压缩成视频。这里经过大量测试，发现使用chrome插件才能实现浏览器最小化后依然正常抓屏。 开源脚本whammy.js支持将webp图片转为webm视频，测试可用。但在视频分辨率较高的时候有问题，我的测试环境是2.90G CPU和1600×900的分辨率，抓取这样的一张图片并编码为webp需要300ms左右，这样一秒钟只有3帧；而png编码需要～120ms，jpeg编码需要～60ms，目前看来只有抓取jpeg是合理的。
4. 下一步的计划是寻找一个可用的将jpeg转为视频的方法，或者想办法把图片编码的问题放在后台处理。
5. 下周我会整理一下最近的脚本，部署一个可用网页。

[limingth]

我的意见，@ggxx 你先参考目前张宝实现的 音频教室+桌面共享 的那个页面，以实用为主，做出第一个demo。

浏览器在上课过程中，是可以不用最小化的。

（我们可以要求老师先适应我们的要求，而不是反过来增加技术研发的难度）

在 2014年8月30日 下午4:20，ggxx notifications@github.com写道：

目前进度：

1. 弄清楚了WebRTC与录屏相关的几个API，学习了chrome插件的开发方法。

2. 尝试实现一个WebRTC下支持高清分辨率的chrome录屏插件（目前google商店中已有的Screencastify很好地实现了这一功能，但不开源）。

3. 目前的思路是，编写插件，通过chrome的API实现对desktop、tab或window连续进行抓图，然后将图片编码压缩成视频。这里经过大量测试，发现使用chrome插件才能实现浏览器最小化后依然正常抓屏。 开源脚本whammy.js支持将webp图片转为webm视频，测试可用。但在视频分辨率较高的时候有问题，我的测试环境是2.90G CPU和1600×900的分辨率，抓取这样的一张图片并编码为webp需要300ms左右，这样一秒钟只有3帧；而png编码需要～120ms，jpeg编码需要～60ms，目前看来只有抓取jpeg是合理的。

4. 下一步的计划是寻找一个可用的将jpeg转为视频的方法，或者想办法把图片编码的问题放在后台处理。
5. 下周我会整理一下最近的脚本，部署一个可用网页。

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-53952338 .

Ming Li

[ggxx]

这个项目中有在NaCl平台下的一些开源程序的移植，包括ffmepg和x264，可以直接编译使用 https://code.google.com/p/naclports/wiki/HowTo_Checkout?tm=4 可能是由于墙的原因，我这里使用各种方法均不能访问，无法进行下去

[luckyyang]

Install depot_tools

[ggxx]

我可以访问到这个页面，但是运行gclient有问题，无法访问到图中那个叫naclports的repo。貌似直接用git clone会有问题，可能必须要用gclient sync命令

[luckyyang]

我可以直接clone下来，需要我发给你么？ 40多M

[ggxx]

如果是用gclient sync下载的就给我传一个吧，如果是用git clone下载的就不要了。 我试过git clone下载的编译时会报错，不知道什么原因。

[luckyyang]

我是git clone的，那算了吧

[limingth]

@ggxx 我记得我们达成过一个初步的一致意见，就是我们先做音频，再做视频。 先把音频教室+音频录制做出一个稳定版本，然后再考虑集成视频的问题。 毕竟，上课用音频就足够了。

我让 张宝做3个教室，第一个就是纯音频教室，先把音频的完全做出来，稳扎稳打，要至少有一个可以稳定运行和demo的版本，再考虑进一步的提高。

李明

李明 @毛豆网在线教育 http://weibo.com/maodouio / maodou.io

2014-10-04 6:26 GMT-07:00 Liujiyang notifications@github.com:

我是git clone的，那算了吧

— Reply to this email directly or view it on GitHub https://github.com/limingth/NeXT-classroom/issues/3#issuecomment-57905613 .

[ggxx]

录音脚本已经push到repo，纯音频不需要安装chrome extension，在页面中直接调用js function即可。 详见目录下README

[limingth]

@ggxx 请张宝和郭旭联系一下，今天约一个时间在FIT楼见个面，把录音功能做到第一个教室（纯音频教室）的页面里面，并做出一个 demo 页面。必要的话，吉洋也可以参与一下。

[limingth]

可以单独做一个录音按钮，点击开始录音，再点击停止录音，同时生成一个录音文件。

以后如果有时间了，我们实现一个自动录音，教室有2个人的时候，开始录制，教室只剩1个人时停止录制。

[ggxx]

@luckyyang 要不给我发一份git clone的代码吧，我怀疑我这边是git报的错

[luckyyang]

链接: http://pan.baidu.com/s/1i3Ds5BR 密码: nav3

去下载吧

[ggxx]

@luckyyang 非常感谢 NaCl的编译环境已经基本搞定了

[luckyyang]

:+1: