从技术、设计、AI等角度,谈谈RecordScreen.io

栏目: IT技术 · 发布时间: 4年前

从技术、设计、AI等角度,谈谈RecordScreen.io

最近看到艾体验AIUX介绍的一款小工具《 录网课的老师,流下了幸福的泪水 》, 录屏小工具——RecordScreen.io。 不需要下载任何安装包,直接浏览器打开就可以开始录制屏幕。

有一点比较惊讶,就是浏览器不借助任何的插件,就可以录制电脑的屏幕了,我在此之前还不知道这个api,今天抽空研究了下。

- 录屏API

原来是 getDisplayMedia 这个功能:

<span>navigator.mediaDevices.getDisplayMedia</span>

大家可以尝试下,打开chrome,然后在开发者 工具 中输入:

async _startRecord() {
        var displayMediaOptions = {
            video: true,
            // audio: true,   not support
            cursor: 'always'
        }
        let captureStream = null;
        try {
            captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
        } catch (err) {
            console.error("Error: " + err);
        }
        return captureStream;
    }

captureStream 赋值给 video srcObject ,即可把录制的屏幕通过video标签播放出来了~

这里注意video标签要加个autoplay的属性,不然显示不出来。

我把这个功能为最近 实验室在探索的一个编辑器 了个插件。

从技术、设计、AI等角度,谈谈RecordScreen.io

chrome为我们提供了3个选项,录制整个屏幕、录制某个应用、录制chrome的某个标签页。

从技术、设计、AI等角度,谈谈RecordScreen.io

嗯,就几行代码,为编辑器新增了一个录屏功能。

从技术、设计、AI等角度,谈谈RecordScreen.io

以上是使用chrome原生的api简单实现的录屏功能。

仔细查看 RecordScreen.io 的源代码,我们会发现,其实 RecordScreen.io 用的是一款开源库 RecordRTC

RecordRTC 兼容了各大主流浏览器, 并且提供了保存视频的功能。

- 设计的细节

在使用getDisplayMedia这个功能的时候,浏览器会有一个悬浮窗:

从技术、设计、AI等角度,谈谈RecordScreen.io

注意它出现的位置,靠近屏幕的下方,虽然网页上提供了一个STOP按钮,但是与系统的按钮位置稍微重叠了,可用性就很差。

设计师忽视了 getDisplayMedia 浏览器默认悬浮窗的位置。除了位置, getDisplayMedia 还可以隐藏,所以在网页上留一个STOP按钮是有好处的。

从技术、设计、AI等角度,谈谈RecordScreen.io

- 想法

我一直在思考如何在现有工具的基础上集成AI的功能,创造出不一样的体验。于是我尝试了下bodypix,bodypix是 谷歌发布人体图像分割算法。

可以把人物从画面中分离出来:

从技术、设计、AI等角度,谈谈RecordScreen.io

搭配上以上的工具,就变成如下效果:

从技术、设计、AI等角度,谈谈RecordScreen.io

简单用动图演示下效果

以上为全文。

这是 一款用开源库搭建的工具应用 ,技术上使用了 WebRTC ,网页即时通信(Web Real-Time Communication),是一个支持网页浏览器进行实时语音对话或视频对话的API。

从一个小细节,我们可以看出设计对技术的理解程度。

等我空了,把编辑器的录课.ai完善,试试录一些课程。

从技术、设计、AI等角度,谈谈RecordScreen.io

可通过扫码,与我深度交流

或赞赏获取微信号


以上所述就是小编给大家介绍的《从技术、设计、AI等角度,谈谈RecordScreen.io》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

测试驱动开发

测试驱动开发

Kent Beck / 孙平平、张小龙 / 中国电力出版社 / 2004-4-1 / 28.00元

《测试驱动开发》(中文版)设想把编程看成是转动曲柄从井里提一桶水上来的过程。如果水桶比较小,那么仅需一个能自由转动的曲柄就可以了。如果水桶比较大而且装满水,那么还没等水桶全部被提上来你就会很累了。你需要一个防倒转的装置,以保证每转一次可以休息一会儿。水桶越重,防倒转的棘齿相距越近。测试驱动开发中的测试程序就是防倒转装置上的棘齿。一旦我们的某个测试程序能工作了,你就知道,它从现在开始并且以后永远都可......一起来看看 《测试驱动开发》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具