1、手机直播
预览
开发环境搭建
安装微信开发者工具
相对于以前微信以前的产品来说。小程序在发布之初就面向开发者开放微信开发者工具。使开发者更加方便的开发和调试小程序。我们从官网下载安装。
官网下载地址。现在只支持windows和mac。安装完成之后我们就可以使用创建小程序了。
创建初始工程
打开微信微信开发者工具,选择项目目录。注意这里的项目目录最好是空文件夹或者当前目录下面没有package.json文件。然后输入appid和项目名称。appid可以在官网申请
点击确定就会生成小程序项目。
直播功能实现
开通直播接口
注意现在直播的接口只对以下类目开放。
如果你发现你在接口设置显示没有开通。则需要修改小程序的服务类目。修改完成之后。需要再次回到接口设置里面。开启实时播放音视频流对于接口权限。
直播组件
文档地址 小程序直播主要是会用到2个组件:
- live-player:实时音视频播放
- live-pusher:实时音视频录制
每个组件都对应一个api。可以根据上述文档查看。而且微信也提供了测试的demo我们可以直接拿来运行。
我这里只是把小程序官网提供直播相关的的demo组装在一起。
申请腾讯云直播
我们已经根据文档搭建出来了直播小程序的demo。但是我们要怎么才能真正在自己的程序里面看到一个手机推流,另外一个手机观看呢？这里方案有很多。自己搭建也可以。使用阿里云的直播也可以。我这里用了一个最简单的方法。直接利用腾讯云的云直播平台。首先开通腾讯云云直播。然后点击推流生成器
然后复制上面的推流地址和播放地址到小程序里面。
#推流地址修改
pages/player/player.wxml里面的url
#播放地址修改
pages/pusher/pusher.wxml里面的url
2、电脑直播
首先也要配置腾讯云的推流服务器，配置方法和上面一样。
电脑端----obs
obs是一个非常著名的开源直播和视频录制软件，支持多平台，地址为 https://obsproject.com ，下载后就可以使用，打开obs，点击设置。
我们选择流类型为“自定义流媒体服务器”，URL和流名称就是对腾讯云推流地址的拆分。
- URL rtmp://12097.livepush.myqcloud.com/live/
- 流名称 12097_77806240b9?bizid=12097&txSecret=d141c83616635102056494048fc5c155&txTime=5A6F44FF
先设置来源选择窗口捕获，名字随便输入，设置捕获哪一个窗口，这里选择的是微信开发者工具，然后点击确定。
然后开始点击推流，如果连接成功做出现如下图所示。
当然obs本身异常强大，比如如何设置分辨率和音频等问题，这个以后有机会给大家说说如何使用，本次主要顺小程序和obs的直播实现。
小程序端
到现在为止obs已经可以推流了，接下来我们通过小程序来接收直播信息，这里用到了一个组件 live-player
我使用了live-player最简单的配置
<live-player src="rtmp://12097.liveplay.myqcloud.com/live/12097_e7d5973b53" mode="live" autoplay style="width: 300px; height: 225px;" />
ok，打开页面。
直播开始了哈
