效果预览

开发环境搭建
安装微信开发者工具

  相对于以前微信以前的产品来说。小程序在发布之初就面向开发者开放微信开发者工具。使开发者更加方便的开发和调试小程序。我们从官网下载安装。
官网下载地址。现在只支持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

修改对应的地方替换。这样就可以实现我们上面gif动画里面的效果啦。
demo地址

转载需在明显位置处注明出处。
作者:进击的小羊驼 
如果文章有错的地方欢迎指正,大家互相交流。

3分钟入门微信小程序直播的更多相关文章

  1. 为什么要学习微信小程序直播开发?最新的小程序直播介绍和优势分析!

    小程序直播的介绍 “小程序直播”是微信提供给开发者的实时视频直播工具,包括直播管理端.主播端和观众端等模块,支持提供常用的用户互动和营销促销工具. 开发者只需在小程序中引入相关代码并在管理后台完成配置 ...

  2. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  3. 微信小程序直播

    微信小程序直播(转) 通过PC实现推流,然后用小程序进行直播播放,也就是PC->小程序. 小程序支持 小程序的直播能力只针对某些类目开放并且需要申请开通. 支持的类目 社交 直播 教育 在线教育 ...

  4. uni-app开发经验分享十九: uni-app对接微信小程序直播

    uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情>      记录这两个参数直播 ...

  5. ***腾讯云直播(含微信小程序直播)研究资料汇总-原创

    这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把一些技术资料和文档归集如下: 1.微信小程序移动直播入门导读 https://cloud.tencent.com/doc ...

  6. 边做边学入门微信小程序之仿豆瓣评分

    微信小程序由于适用性强.逻辑简要.开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票.外卖点餐.移动商城.生活服务等场景服务提供商迅速切入 ...

  7. 2018-01微信小程序--直播

    一. 小程序直播支持的格式 目前小程序支付两种格式直播 1) flv格式直播 2) rtmp格式直播 二. 能够开通小程序直播的行业类目 由于直播需要资质, 并不是每个企业都能够开通小程序直播, 微信 ...

  8. 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布

    很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...

  9. [微信小程序直播平台开发]___(一)介绍与流程

    1.一个可以忽略的前言 最近在做的一个项目,客户要做一个直播平台,主播发起视频直播,然后其他人进入房间观看这样子,跟其他直播平台不同的是,主播可以打赏观众,噗. 因为客户要做的是一个民宿的微信小程序, ...

随机推荐

  1. codeforces#FF(div2) D DZY Loves Modification

    首先要知道选择行列操作时顺序是无关的 用两个数组row[i],col[j]分别表示仅选择i行能得到的最大值和仅选择j列能得到的最大值 这个用优先队列维护,没选择一行(列)后将这行(列)的和减去对应的n ...

  2. 让 Logo "飞" 出屏幕

    让 Logo "飞" 出屏幕   推荐序 本文介绍了一种思路,即利用矢量工具来生成动画的关键代码,然后进一步制作成完整的动画效果,感谢作者授权转载. 作者介绍:一缕殇流化隐半边冰霜 ...

  3. 12.怎样自学Struts2发送邮件和验证补充[视频]

    12.怎样自学Struts2发送邮件和验证补充[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了,仅仅好传到百度云上: http://pan.b ...

  4. LeetCode(3)题解: Longest Palindromic Substring

    https://leetcode.com/problems/longest-palindromic-substring/ 题目: Given a string S, find the longest ...

  5. [rabbitmq-discuss] Exactly Once Delivery

    [rabbitmq-discuss] Exactly Once Delivery http://lists.rabbitmq.com/pipermail/rabbitmq-discuss/2010-A ...

  6. 20170225-第一件事:SAP模块清单

    第一件事:SAP模块清单 AM 资产会计 资产会计BC SAP Netweaver SAP NetweaverBW 业务信息仓库 业务信息仓库CA 常规跨应用程序 常规跨越应用程序CO 控制 控制 C ...

  7. redis的图形界面管理工具

    大部分人都知道redis是一款用在缓存服务器上的软件,它与memcache类似,都可以存储海量的数据,用在大访问量的web网站.聊天记录存放等方面,但是又与memcache不同: 1.缓存数据可以持久 ...

  8. hadoop配置错误总结

    2016-06-02 17:33:04,163 ERROR org.apache.hadoop.yarn.server.resourcemanager.ResourceManager: RECEIVE ...

  9. CSS中的那点事儿(一)--- CSS中的单位1

    单位主要用在规定元素的数值性css属性的,这里主要讨论应用的比较多的是width height  padding margin font-size,而单位中应用最广泛就是%.px.em 百分比 百分比 ...

  10. 应用程序启动器 “sublime_text.desktop“ 还没有被标记为 信任。如果您不知道这个文件的来源,那么启动它可能会不安全。解决sublime在ubuntu中不支持中文输入问题。

    1.下载 git clone https://github.com/lyfeyaj/sublime-text-imfix.git 2.进行一些处理 cd ~/sublime-text-imfix su ...