微信小程序直播demo

1、手机直播

预览

image.png
image.png

开发环境搭建

安装微信开发者工具

相对于以前微信以前的产品来说。小程序在发布之初就面向开发者开放微信开发者工具。使开发者更加方便的开发和调试小程序。我们从官网下载安装。
官网下载地址。现在只支持windows和mac。安装完成之后我们就可以使用创建小程序了。

创建初始工程

打开微信微信开发者工具,选择项目目录。注意这里的项目目录最好是空文件夹或者当前目录下面没有package.json文件。然后输入appid和项目名称。appid可以在官网申请

enter image description here

点击确定就会生成小程序项目。

直播功能实现

开通直播接口

注意现在直播的接口只对以下类目开放。

enter image description here

如果你发现你在接口设置显示没有开通。则需要修改小程序的服务类目。修改完成之后。需要再次回到接口设置里面。开启实时播放音视频流对于接口权限。

enter image description here

直播组件

文档地址 小程序直播主要是会用到2个组件:

• live-player:实时音视频播放
• live-pusher:实时音视频录制
  每个组件都对应一个api。可以根据上述文档查看。而且微信也提供了测试的demo我们可以直接拿来运行。
  我这里只是把小程序官网提供直播相关的的demo组装在一起。

申请腾讯云直播

我们已经根据文档搭建出来了直播小程序的demo。但是我们要怎么才能真正在自己的程序里面看到一个手机推流,另外一个手机观看呢？这里方案有很多。自己搭建也可以。使用阿里云的直播也可以。我这里用了一个最简单的方法。直接利用腾讯云的云直播平台。首先开通腾讯云云直播。然后点击推流生成器

enter image description here

然后复制上面的推流地址和播放地址到小程序里面。

#推流地址修改
pages/player/player.wxml里面的url
#播放地址修改
pages/pusher/pusher.wxml里面的url

2、电脑直播

首先也要配置腾讯云的推流服务器，配置方法和上面一样。

电脑端----obs

obs是一个非常著名的开源直播和视频录制软件，支持多平台，地址为 https://obsproject.com ，下载后就可以使用，打开obs，点击设置。

Snipaste_2018-01-29_18-25-51副本.jpg

我们选择流类型为“自定义流媒体服务器”，URL和流名称就是对腾讯云推流地址的拆分。

腾讯云的推流地址 rtmp://12097.livepush.myqcloud.com/live/12097_77806240b9?bizid=12097&txSecret=d141c83616635102056494048fc5c155&txTime=5A6F44FF

• URL rtmp://12097.livepush.myqcloud.com/live/
• 流名称 12097_77806240b9?bizid=12097&txSecret=d141c83616635102056494048fc5c155&txTime=5A6F44FF

先设置来源选择窗口捕获，名字随便输入，设置捕获哪一个窗口，这里选择的是微信开发者工具，然后点击确定。

image.png
image.png
image.png
image.png

然后开始点击推流，如果连接成功做出现如下图所示。

Snipaste_2018-01-29_18-30-47副本.jpg

当然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，打开页面。

image.png

直播开始了哈