最近看到艾体验AIUX介绍的一款小工具《录网课的老师,流下了幸福的泪水》,录屏小工具——RecordScreen.io。不需要下载任何安装包,直接浏览器打开就可以开始录制屏幕。
有一点比较惊讶,就是浏览器不借助任何的插件,就可以录制电脑的屏幕了,我在此之前还不知道这个api,今天抽空研究了下。
- 录屏API
原来是getDisplayMedia这个功能:
navigator.mediaDevices.getDisplayMedia
大家可以尝试下,打开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的属性,不然显示不出来。
我把这个功能为最近实验室在探索的一个编辑器码了个插件。
chrome为我们提供了3个选项,录制整个屏幕、录制某个应用、录制chrome的某个标签页。
嗯,就几行代码,为编辑器新增了一个录屏功能。
以上是使用chrome原生的api简单实现的录屏功能。
仔细查看RecordScreen.io的源代码,我们会发现,其实RecordScreen.io用的是一款开源库RecordRTC。
RecordRTC兼容了各大主流浏览器,并且提供了保存视频的功能。
- 设计的细节
在使用getDisplayMedia这个功能的时候,浏览器会有一个悬浮窗:
注意它出现的位置,靠近屏幕的下方,虽然网页上提供了一个STOP按钮,但是与系统的按钮位置稍微重叠了,可用性就很差。
设计师忽视了getDisplayMedia浏览器默认悬浮窗的位置。除了位置,getDisplayMedia还可以隐藏,所以在网页上留一个STOP按钮是有好处的。
- 想法
我一直在思考如何在现有工具的基础上集成AI的功能,创造出不一样的体验。于是我尝试了下bodypix,bodypix是谷歌发布人体图像分割算法。
可以把人物从画面中分离出来:
搭配上以上的工具,就变成如下效果:
简单用动图演示下效果
以上为全文。
这是一款用开源库搭建的工具应用,技术上使用了WebRTC,网页即时通信(Web Real-Time Communication),是一个支持网页浏览器进行实时语音对话或视频对话的API。
从一个小细节,我们可以看出设计对技术的理解程度。
等我空了,把编辑器的录课.ai完善,试试录一些课程。