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

这篇具有很好参考价值的文章主要介绍了音视频解决方案(二)：直播电商场景最佳实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能实现流程

本文介绍使用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链接到自己的域名下的商品页面。商品结构如下：

{ 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。文章来源地址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	回调事件