快速开发微信小程序直播--微信直播--小程序直播开发
<p> </p><div>
<div>
<p>微信小程序开发需要基于微信提供的开发者工具与 SDK。如果开发者对小程序开发流程不熟悉，建议先系统学习：微信小程序开发官方文档。</p>
<p>由于微信官方文档比较详细，本文对小程序开发流程中的框架说明、API 调用、组件使用等，不再赘述，而是重点介绍如何使用 ZEGO SDK 开发出支持音视频直播的微信小程序。</p>
<p>SDK 集成指引详见：微信小程序 SDK集成指引</p>
<p>SDK 提供的 API 说明详见：微信小程序 SDK API 说明</p>
<p>小程序开发主要用到 web 开发知识( js、html、css )。</p>
<p><strong>1、组件说明</strong></p>
<p>微信小程序中的推拉流功能，需要用到微信提供的 live-player live-pusher 标签。其他的常规组件同原生 App 开发类似，此处不一一介绍。</p>
<p><strong>1.1 live-player</strong></p>
<p>live-player 是微信提供的支持实时音视频播放的组件，官方介绍详见组件介绍。</p>
<p>开发者创建组件成功后，需要在 js 文件中，调用 API 操作对应的组件来实现需求，微信官方 API 详见 API 说明。</p>
<p>即构音视频云小程序中，创建 live-player 的演示源码如下：</p>
</div>
</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">ZegoLive/pages/liveroom/room/room.wxml
<live-player
autoplay
wx:if="{{item.playUrl}}"
id="{{item.streamID}}"
mode="RTC"
object-fit="fillCrop"
min-cache="0.1"
max-cache="0.3"
src="{{item.playUrl}}"
debug="{{pushConfig.showLog}}"
bindstatechange="onPlayStateChange"
bindnetstatus="onPlayNetStateChange"
binderror="error">
<cover-view class='character' style='padding: 0 5px;'>{{item.streamID}}</cover-view>
</live-player>
</pre>
</div>
<p> </p>
<div>
<div>
<p>请注意：</p>
<ol>
<li>
<p>live 模式主要用于直播类场景，比如赛事直播、在线教育、远程培训等等。该模式下，小程序内部的模块会优先保证观看体验的流畅，通过调整 min-cache 和 max-cache 属性，您可以调节观众(播放)端所感受到的时间延迟的大小，文档下面会详细介绍这两个参数。</p>
</li>
<li>
<p>RTC 则主要用于双向视频通话或多人视频通话场景，比如金融开会、在线客服、车险定损、培训会议 等等。在此模式下，对 min-cache 和 max-cache 的设置不会起作用，因为小程序内部会自动将延迟控制在一个很低的水平(500ms 左右)。</p>
</li>
</ol>
<p><strong>1.2 live-pusher</strong></p>
<p>live-pusher 是微信提供的支持实时音视频录制的组件，官方介绍详见：组件介绍</p>
<p>开发者创建组件成功后，需要在 js 文件中，调用 API 操作对应的组件来实现需求，官方 API 详见：API 说明</p>
<p> </p>
</div>
<span style="font-size: 18pt"><strong>如果有这方面需求，可以添加我的qq联系，1013811393@qq.com</strong></span><br>
<h4 class="text-truncate oneline">微信小程序websocket实现即时聊天</h4>
</div>
<div><span style="font-size: 18pt"><strong>案例：</strong></span></div>
<div> </div>
<div><img src="https://img2018.cnblogs.com/blog/418069/201907/418069-20190723110659053-480300291.png" alt="" width="471" height="1020">
<p><img src="https://img2018.cnblogs.com/blog/418069/201907/418069-20190723110859738-1784382458.png" alt="" width="470" height="1017"></p>
<p> </p>
</div>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/zhyalii/p/11360190.html
頁:
[1]