©2021 陕ICP备 17007551 号
用Flutter做个视频APP

Dart语言

Dart语言首发于2011年,一直没火。到16年,Angular2发布的时候,Angular2支持Dart语言开发,但是由于主要支持Typescript开发,结果Typescript由此火了(好残忍)!不过现在的Flutter1.9发布以来,Dart又被关注,希望后面能火吧~Dart可用于服务器开发和客户端或者web端开发,还是很强大的。


Flutter框架

Flutter是谷歌开源的UI框架。适配Android和iOS。15年发布至今,一直在国内没火起来。目前19年发布1.9版本,谷歌再次发力,希望带动跨终端方案的发展。

其实,我个人人为,Dart和Flutter作为一种新的跨终端方案比相比其他混合式开发,还是比较好的。Flutter有类似RN的结构,或许借鉴了RN,比Cordova这种网页混合效率要高,速度也快。缺点是Flutter的代码式布局,不忍直视,太麻烦了,不过如果组件化优化的好,其实也是很简洁的。


免费视频APP

今年中秋节以来,我开始研究Dart和Flutter。终于在国庆节结束,将视频播放APP调试完毕,目前处于bug修复阶段。

这个视频APP是我一直想做的,就是为了我自己看视频方便些,一直苦于没有视频播放资源,前一段时间,在网上发现有网站提供视频源接口,就拿来用了,开始做了一个视频播放网页,在手机和电视播放,可能部分手机不支持,由于我的手机和电脑都可以播放,目前该bug未修复。后来觉得应该搬上电视机,这样可以靠着沙发看视频。懒是科技进步的动力。

视频采用电视播放和小程序端遥控两个部分。在APP内启动一个小服务器,利用小程序局域网访问功能,进行遥控。

目前已发布,但是因为涉及影视媒体,不能上架各大影院市场,现提供下载地址,欢迎大家使用~!


以下是视频播放页面和APP

  1.  v.ikrong.com
  2.  ikrong.com/r/freetv
网页录屏

电脑录屏

在电脑上录制屏幕,下载录屏软件,很麻烦,有时候还有水印,最近发现谷歌提供了录屏接口,用js调用就可以录屏,很是方便!


网页录屏

  1.  网页录屏中电脑视频数据采用的是 navigator.mediaDevices.getDisplayMedia 接口,目前支持度不是很高,可以访问 caniuse.com 查询。
  2.  录制功能采用 MediaRecorder 接口
  3.  语音录制功能采用 navigator.mediaDevices.getUserMedia 接口



使用步骤

首先,通过调用getDisplayMedia方法,然后用户授权之后,会通过promise返回一个mediaStream对象。


然后,调用 getUserMedia 方法,用户授权之后,也会通过promise返回mediaStream对象。但是可以通过mediaStream中的getAudioTracks获取音频流,添加到displayMedia的stream中,合成完整的音视频流。


然后 new MediaRecorder() 开始录制,在mediaRecorder中监听 ondataavailable ,停止录制的时候,这个会返回一个blob二进制文件,然后URL.createObjectUrl()创建下载链接,下载下来就是录制好的视频了。


DEMO:

https://code.ikrong.com/m8AM8k