小程序标准化Demo及开发指南
1用户指南
云视通小程序支持体验自有设备，试用云视通设备，根据提示填写账号信息和设备信息，单击立即体验，进入自有设备播放页，体验设备实时直播，实时截图保存至手机系统相册。
1.1 wx搜索“云视通开放平台”小程序
点击“云视通开放平台”，进入云视通小程序首页。
“云视通开放平台”小程序
1.2 体验自有设备
如果您拥有云视通开放平台账号和公有云协议设备（中维世纪私协设备）、国标28181协议设备以及海康私有协议Ehome、ISUP协议设备可体验您账号下设备直播。（如果您还没有设备，您可以体验试用云视通设备播放，参考1.3）
1.2.1 体验自有设备
（1）进入云视通小程序首页，单击 「立即体验」，进入体验自有设备页。
（2）根据提示填写您的账号信息和设备信息。您可登录云视通开放平台官网 ，在 「控制台」-> 「我的应用」-> 「应用信息」 AppKey、 AppSecret，再单击左侧 「设备接入」，获取您的设备信息。
设备序列号和通道号需按照指定格式填写。视频通道号默认为0。
（3）单击 「立即体验」 按钮进入设备播放页。即可体验设备实时播放，实时截图等功能
1.3 试用云视通设备播放
如果您没有云视通开放平台账号或公有云协议设备（中维世纪私协设备）、国标28181协议设备以及海康私有协议Ehome、ISUP协议设备，可体验我们提供的试用设备进行设备直播。
1.3.1 试用设备直播
进入云视通小程序首页，单击 「视频预览」 按钮，进入试用设备页。
2开发指南
本文将帮助您学习如何在wx开发者工具中开发云视通小程序。
2.1 准备工作
（1）注册wx小程序，在创建自己的wx小程序之前，首先需要注册小程序账号，有如下账号类型，选择 「小程序」 类型。请用您的企业账号完成后续注册。
（2）下载并安装微信开发者工具。
（3）云视通小程序依赖wx实时音视频播放组件live-player，根据wx实时音视频接入文档，您的小程序需要通过类目审核。您可登录wx公众平台 ，在左侧单击 「设置」，查看您的服务类目是否为live-player组件支持的小程序服务类目。您可点击右侧 「详情」 进行服务类目添加。
您可登录wx公众平台，在左侧导航栏单击 「开发」，然后单击 「接口设置」 ，自助开通该组件权限。
（4）在小程序中请求云视通开放平台API时，需预先设置通讯域名，小程序只可以和指定的域名进行网络通讯。您可以登录wx公众平台，在左侧导航栏单击 「开发」，然后单击 「开发设置」，在 「服务器域名」 区域，单击 「修改」，进行配置。
（5）开发小程序直播功能需要公有云协议设备（中维世纪私协设备）、国标28181协议设备以及海康私有协议Ehome、ISUP协议设备支持，您需要登录云视通开放平台官网 ，单击上侧导航栏 「控制台」，单击左侧 「设备管理」，选择对应设备进行添加，完成您账号下设备的添加。
如果您还未注册云视通开放平台官网账号，需要先单击上侧导航栏 「注册」，根据提示步骤注册成为云视通开放平台开发者。注册成功后重新登录云视通开放平台官网，单击上侧导航栏 「控制台」，单击左侧 「设备管理」，选择对应设备进行添加，完成您账号下设备的添加。
·云视通开放平台的控制台为开发者提供了应用信息、设备管理、费用中心等功能。登录账号后可在控制台中进行操作。
2.2 体验小程序开发
（1）新建项目：微信开发者工具扫描登录注册的微信小程序账号输入你的wx小程序App ID、(App ID 在开发设置页面下查看您的App ID)项目名称、目录、开发模式选择小程序模式
（2）进入您的小程序项目：默认您的首页目录为 pages/index/index
·AppID：输入wx小程序的App ID。
·登录wx公众平台，在开发设置页面查看App ID。
2.3 开发视频直播功能
2.3.1 live-player组件的使用
云视通小程序视频直播功能依赖于wx小程序原生组件live-player
2.3.1.1 引入live-player
在.wxml文件引入live-player，创建LivePlayerContext
2.3.1.2 对象操作
wx.createLivePlayerContext() 通过 wx.createLivePlayerContext() 可以将标签和 javascript 对象关联起来，之后即可操作该对象 play：开始播放，如果的 autoplay 属性设置为 false（默认值），那么就可以使用 play 来手动启动播放 stop：停止播放 pause：暂停播放，停留在最后画面 resume：继续播放，与 pause 成对使用 muted：设置静音 requestFullScreen：进入全屏幕 exitFullScreen：退出全屏幕
<live-player id="myVideo" autoplay mode="RTC" bindtap="onVideoTap" muted="" src="" bindstatechange="statechange" binderror="error" bindaudiovolumenotify="audiovolumenotify" bindfullscreenchange="fullScreenChange">live-player>
const livePlayerContext = wx.createLivePlayerContext('myVideo') livePlayerContext.play({ success:(res)=>{ console.log(res) }, fail:(res)=>{ console.log(res) } })
2.3.1.3 属性详解
src：用于音视频下行的播放 URL，支持 RTMP 协议和 FLV 协议（云视通开放API仅提供FLV播放协议地址） mode：默认为live模式，建议选择RTC模式（实时通话，该模式时延更低） bindstatechange：通过live-player标签的 bindstatechange 属性可以绑定一个事件处理函数，该函数可以监听推流模块的内部事件和异常通知。详细状态码请查看官方文档
2.3.1.4 cover-view组件
通过covere-view（覆盖在原生组件之上的文本视图，可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher）覆盖live-player组件之上，自定义”播放暂停按钮“、”高清标清切换按钮“、”音量开关按钮“、”全屏按钮“
2.4 调用云视通开放平台API
获取AccessToken
获取直播FLV地址
指令抓图
2.5 小程序开发live-player常见问题
（1）测试号能否使用live-player组件?
live-player目前暂只对国内主体部分类目开放，具体请参考文档 https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
（2）live-player组件支持的音视频格式?
视频支持 h264 和 h265 音频支持 aac
（3）live-player组件不能在模拟器调试？
开发者工具上暂不支持
（4）live-player出图加载缓慢问题？
调用wx小程序原生组件lilve-player 出图时间在5s左右均为正常情况
小程序标准化Demo及开发指南相关推荐
- 微信小程序直播安装和开发指南
2020年2月28日微信小程序直播能力启动公测.微信小程序直播是微信官方提供的商家经营工具,商家可通过在小程序内直播,实现商家与消费用户互动,同时进行商品销售的闭环.在直播的时候无需任何的跳转,直接下 ...
- 小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
- 小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
- 微信小程序家庭记账本开发进度二
第三步是在开发设置李找到你的AppID,然后复制下来 第四步是是完成小程序开发者绑定.开发信息配置后,首先下载开发者工具.参考开发文档进行小程序的开发和调试. 前往 开发者工具下载页面 ,根据自己的操 ...
- 微信小程序开源Demo精选
微信小程序开源Demo精选 原文:微信小程序开源Demo精选 1. 仿QQ应用程序(#社交 #聊天 #SNS) 地址:https://github.com/xiehui999/SmallAppForQ ...
- 01_微信小程序-BLE低功耗蓝牙开发-注册和工具安装
1. 访问微信公众号平台,注册小程序 注意:一个邮箱只能注册一个微信小程序 2. 下载安装开发工具 这里有个重要的东西AppID,注册申请的时候生成的.我们这里只做学习用,所以可以点击后面的测试号,会 ...
- 【福利】微信小程序精选Demo合集
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 小编最近 ...
- 最新小程序源码（微信/抖音小程序源码和小程序游戏源码开发）
本文将利用小程序游戏提供的能力制作一个简单的方块旋转小程序游戏,旨在从零开始介绍小程序游戏的开发过程. 注册小程序游戏账号 进入小程序注册页面按照指引填写信息并提交相应信息,服务类别选择"程 ...
- 微信小程序学习DEMO，微信小程序初学者可以参考
这是一套微信初学者学习DEMO源码,有需要的同学可到下载频道下载~ 这个微信小程序包含了以下几个功能,非常适合微信小程序开发小白,公司实习生,毕业设计参考. 1.朋友圈功能,可以发布朋友圈,九官格图片 ...
最新文章
- 为.Net程序集添加资源
- C#操作excel(多种方法比较)
- shiro学习(1)：shiro简介
- 什么是面向对象_什么是面向对象？新手程序员必掌握的技能
- ol2 和 bootstrap样式冲突的问题
- 全网最详细SIFT算法原理实现
- 计算机vb题库程序代码编写,计算机二级考试.题库-vb程序题
- 模2除法(CRC校验码计算)
- 极域电子教室功能讲解-电子教室
- 计算机存储容量的基本单位pb,pb存储单位是什么
- 交换机及IP地址（概念）
- 2013/9/2 ruby on rails学习感想
- 微博如何做到1小时增加一千台服务器应对鹿晗恋情带来的流量暴增
- 文件服务器角色提供多种服务 其中,Win2008实战:配置双节点打印服务器故障转移群集...
- 循环结构验证哥德巴赫猜想
- Android：仿小米便签，图文混排
- 网络对抗作业 一------袁昊晨
- intersect 相交 范围_空间关系分类及接口方法
- storm-tuple（1）
- vue.js毕业设计，基于vue.js前后端分离在线教育视频点播小程序系统设计与实现