微信小程序 实时音视频开发

   以前做过一个简单的小程序,但是到现在回想怎么开发小程序,竟然一点也想不起来,鉴于学过的东西老是忘掉毛病,现在借项目需要小程序音视频功能,记录一下小程序开发步骤和小程序视频音视频功能的使用。

    由于完全不记得小程序开发步骤和代码结构,只有重头开始学习,我首先阅读了官网基础教程,看完官网基础教程,基本上对可以进行小程序开发了。现在我来说说我的理解,要进行小程序开发的第一步就是在小程序申请官网申请一个小程序,我申请的是个人小程序(分个人和企业),注意一个邮箱只能申请一个小程序,需要实名认证,一个人最多只能申请5个小程序。小程序申请成功后,我们可以拿到小程序的AppID,这个是我们小程序开发的唯一识别码,同时在小程序开发设置里面可以设置小程序开发者权限,用微信号管理的,可以设置哪些人具有开发权限,哪些人具有体验权限等等。小程序申请成功并配置后,我们下载微信小程序开发工具,开发工具下载地址:微信小程序开发工具,就可以进行微信小程序开发了。

    安装好开发工具,打开我们输入刚才创建的小程序AppID,选好源码放置目录,然后我们就可以创建一个自带模板小程序,然后来看看代码结构。小程序代码是按Page来组织的,一个个界面就是一个个Page。小程序代码一般有下面几个后缀文件组成,分别是:.js,.json,.wxml,.wxss。js负责数据和逻辑代码,json负责一些属性设置,wxml则是界面布局代码,wxss是界面的样式格式。在源码根目录下,app.js注册APP,并监听APP一些基本事件,比如onLaunch;app.json中首先记录一个个Page,其中第一个Page为初始化Page,同是也还配置一些全局的属性;app.wxss全局样式风格。这些在全局的设置可以在单个page里面被覆盖。每一个页面都有.js,.json,.wxml,.wxss四个文件,wxml通过bind函数将界面事件与js函数关联,通过{{}}来与js的数据成员关联,通过class来关联对应的wxss风格。时间驱动有两种,一种是监听系统时间,比如OnLaunch,OnShow等,另一种就是组件bind事件,这样整个程序转起来了。至此,看懂小程序代码,甚至自己开发也没有多大问题了。

    开发过程中,可以点击工具上编译,然后能在工具自带的模拟器上预览小程序,你也可以点击预览按钮,工具会打包小程序并生成二维码,然后用有体验权限的微信账号,扫描二维码,即可真机体验小程序开发版。

    现在来看看看小程序视频方面的能力。组件video支持网络点播,协议支持http和hls协议;组件live-player支持直播播放,只支持rtmp协议;live-pusher直播推流,目前只支持rtmp协议;通过自定义组件rtc_room组合live-player和live-pusher可以显示双人或多人视频会议;通过自定义标签webrtc_room可以实现小程序和Chrome webrtc视频互通。在RTC模式下,rtmp推流至腾讯云,腾讯云采用udp加速,解决rtmp延时大的问题,进而实现了双向通话,与Chrome互通是腾讯云做了一层rtmp和rtp协议的互转。

    可以搜索腾讯视频云小程序进行点播和直播的体验,也可以到腾讯视频云小程序demo源码下载其源码,注意live-player和live-pusher只对企业小程序开发,个人小程序无权使用。

猜你喜欢

转载自blog.csdn.net/yelin042/article/details/80909175