功能实现流程
本文介绍使用ZEGO SDK 开发电商场景的小程序,具备音视频直播、IM互动、商品列表推送、美颜等功能,可满足商家多种直播卖货需求,可参考该组件实现自己的需求。
- 若小程序具备符合live-pusher、live-player的类目,则可以使用live-pusher和live-player,live-room 的isNative属性传入true。详细流程可参考 快速开始
- 除此之外,若具备“电商平台”或“教育”类目,则可以使用插件“即构直播助手”的zego-pusher 和 zego-player,isNative 属性传入false。插件的使用详见 小程序直播插件
音视频直播:提供高清低延时的直播体验,支持设置最大、最小码率,自动适配标清、高清、超清分辨率,直播流媒体可采用低延迟,直播延时远低于CDN分发,实现主播语音画面、商品列表、观众IM消息三端同步;
IM互动:提供IM消息互动功能,观众发送文字消息与主播互动,支持消息实时滚动刷新;消息的使用可参考 IM
商品列表:提供商品列表推送功能,商家可以自定义商品的相关信息(简介、图片、列表、链接等),生成商品列表,主播直播时可同步推送列表中的商品链接,引导观众下单购买;
美颜滤镜:支持美颜功能,帮助改善非专用直播间的光线、清晰度等难题。
设备控制:支持切换摄像头、麦克风。
集成SDK + 插件
详见 集成SDK + 插件
推拉流
推流步骤如下:
- 触发推流
- 调用 SDK 的 startPublishingStream 获取 streamID 对应的推流地址
- 在 SDK 的回调 onStreamUrlUpdate 中获推流地址
- 将步骤 3 中获取的推流地址设置为 zego-pusher 的 url
- 获取推流组件实例,然后调用实例 的 start() 录制视频
- 在 bindstatechange 绑定的回调函数中,调用 SDK 提供的 API updatePlayerState 将推流事件透传给 SDK
- 在 SDK 提供的 publisherStateUpdate 回调中处理推流的开始、失败状态
拉流步骤如下:
- 触发拉流
- 调用 SDK 的 startPlayingStream 获取 streamID 对应的播放地址
- 在 SDK 的回调 onStreamUrlUpdate 中获取拉流地址
- 将步骤 3 中获取的推流地址设置为 zego-player 的 url, 流ID设置为sid
- 获取拉流组件实例,然后调用实例 的 play() 播放视频 或者设置拉流组件的autoplay 属性为true,实现自动拉流。
- 在 bindstatechange 绑定的回调函数中,调用 SDK 提供的 API updatePlayerState 将推流事件透传给 SDK
- 在 SDK 提供的 onPlayStateUpdate 回调中处理播推、拉流的开始、失败状态
商品推送
提供商品列表推送功能,商家可以自定义商品的相关信息(简介、图片、列表、链接等),生成商品列表,主播直播时可同步推送列表中的商品链接,引导观众下单购买; 在page/room/index.js中,有一个商品列表,客户可以自定义商品的相关信息(简介、图片、价格、链接等),并提供符合相应数据格式的接口。商品链接可以跳到小程序内的商品详情页,也可以使用web-view链接到自己的域名下的商品页面。 商品结构如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
{ name: 'Givenchy/纪梵希高定香榭天鹅绒唇膏', img: '../../resource/m0.png', price: '345', id: 0, link: { path: "../web/index", extraDatas: { url: 'https://shop-ecommerce.yunyikao.com/product.html' } } },
-
注意: 使用webview需要在小程序管理后台配置业务域名,此时需要下载一个校验文件,将该文件放置于域名根目录下。
-
域名配置路径:微信公众平台 -> 设置 -> 开发设置 -> 业务域名。如图所示:
IM
提供IM消息互动功能,观众发送文字消息与主播互动,支持消息实时滚动刷新;消息的使用可参考 IM
美颜
支持美颜功能,通过属性beauty、whiteness控制,详见 API文档
设备控制
支持切换摄像头、麦克风。文章来源:https://www.toymoban.com/news/detail-830070.html
demo 中相关功能在组件components/live-room中,在pages/room 页面中引入了live-room。文章来源地址https://www.toymoban.com/news/detail-830070.html
- live-room 组件的相关属性如下:
属性 | 类型 | 说明 |
---|---|---|
isNative | Boolean | 是否使用插件 |
liveAppID | String | 即构的appID |
userID | String | 用户id, 唯一 |
token | String | 登录认证的 |
loginType | String | “anchor” 或“audience” |
roomID | String | 房间号,全局唯一,只支持长度不超过 128 字节 的数字,下划线,字母 |
wsServerURL | String | 即构server 地址 |
logServerURL | String | 即构日志上报地址 |
navBarHeight | Number | 导航栏高度 |
preferPublishSourceType | Number | 推流选项,默认为即构服务器 |
preferPlaySourceType | Number | 拉流选项,默认为即构服务器 |
bindRoomEvent | EventHandle | 回调事件 |
- 登录房间需要token,在开发者的业务服务器实现token逻辑,详见房间登录安全。
- 示例demo 中有房间列表只是demo展示用的,客户需要根据业务逻辑在自己的服务端实现。
到了这里,关于音视频解决方案(二):直播电商场景最佳实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!