音视频解决方案(二)：直播电商场景最佳实践

功能实现流程

本文介绍使用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 + 插件

推拉流

推流步骤如下：

1. 触发推流
2. 调用 SDK 的 startPublishingStream 获取 streamID 对应的推流地址
3. 在 SDK 的回调 onStreamUrlUpdate 中获推流地址
4. 将步骤 3 中获取的推流地址设置为 zego-pusher 的 url
5. 获取推流组件实例，然后调用实例 的 start() 录制视频
6. 在 bindstatechange 绑定的回调函数中，调用 SDK 提供的 API updatePlayerState 将推流事件透传给 SDK
7. 在 SDK 提供的 publisherStateUpdate 回调中处理推流的开始、失败状态

拉流步骤如下：

1. 触发拉流
2. 调用 SDK 的 startPlayingStream 获取 streamID 对应的播放地址
3. 在 SDK 的回调 onStreamUrlUpdate 中获取拉流地址
4. 将步骤 3 中获取的推流地址设置为 zego-player 的 url, 流ID设置为sid
5. 获取拉流组件实例，然后调用实例 的 play() 播放视频 或者设置拉流组件的autoplay 属性为true，实现自动拉流。
6. 在 bindstatechange 绑定的回调函数中，调用 SDK 提供的 API updatePlayerState 将推流事件透传给 SDK
7. 在 SDK 提供的 onPlayStateUpdate 回调中处理播推、拉流的开始、失败状态

商品推送

提供商品列表推送功能，商家可以自定义商品的相关信息（简介、图片、列表、链接等），生成商品列表，主播直播时可同步推送列表中的商品链接，引导观众下单购买； 在page/room/index.js中，有一个商品列表，客户可以自定义商品的相关信息（简介、图片、价格、链接等），并提供符合相应数据格式的接口。商品链接可以跳到小程序内的商品详情页，也可以使用web-view链接到自己的域名下的商品页面。 商品结构如下：

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 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文档

设备控制

支持切换摄像头、麦克风。

demo 中相关功能在组件components/live-room中，在pages/room 页面中引入了live-room。

• live-room 组件的相关属性如下：

• 登录房间需要token，在开发者的业务服务器实现token逻辑，详见房间登录安全。
• 示例demo 中有房间列表只是demo展示用的，客户需要根据业务逻辑在自己的服务端实现。

获取更多ZEGO SDK技术支持，欢迎扫码了解~