电商直播

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

功能实现流程 本文介绍使用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文档 设备控制 支持切换摄像头、麦克风。 demo 中相关功能在组件components/live-room中，在pages/room 页面中引入了live-room。 live-room 组件的相关属性如下： 登录房间需要token，在开发者的业务服务器实现token逻辑，详见房间登录安全。 示例demo 中有房间列表只是demo展示用的，客户需要根据业务逻辑在自己的服务端实现。 获取更多ZEGO SDK技术支持，欢迎扫码了解~

音视频解决方案(一)：直播电商场景方案

1 场景介绍 1.1 场景说明 即构电商直播解决方案包含即构电商助手及相关业务组件，提供音视频直播、主播美颜、房间消息、商品推送等功能，帮助开发者快速构建自有电商直播小程序。 1.2 场景优势 即构小程序电商直播提供高清低延时的直播体验，支持设置最大、最小码率，自动适配标清、高清、超清分辨率，直播流媒体可采用低延迟，直播延时远低于CDN分发，实现主播语音画面、商品列表、观众IM消息三端同步。 2 功能列表 主要功能 功能描述 音视频直播 高清低延迟的直播体验，可采用低延迟分发和CDN分发两种模式 IM消息 直播间内的主播和观众可使用文字进行互动交流 房间人数 实时展示直播间人数 商品推送 主播向观众推送商品信息   获取更多ZEGO SDK技术支持，扫码了解更多详情~

基于 即构 ZIM SDK 实现APP实时聊天功能

ZEGO 提供 ZIM + RTC 服务联动的场景解决方案，公开语聊房、秀场直播等业务场景搭建的示例源码，帮助开发者能在极短的时间内搭建完美的业务场景。 ZIM SDK 提供了如下接入方案： 在此方案中，您需要通过您自己的业务系统实现以下业务逻辑： 搭建客户端的用户管理逻辑，并下发用户 ID 用于客户端登录。 鉴权 Token，建议由您的业务后台自行实现，保证鉴权数据安全。 2 前提条件 在使用 ZIM SDK 前，请确保： 开发环境满足以下要求： Android Studio 2.1 或以上版本。 Android SDK 25、Android SDK Build-Tools 25.0.2、Android SDK Platform-Tools 25.x.x 或以上版本。 Android 9.0 或以上版本，且支持音视频的 Android 设备或模拟器（推荐使用真机）。 已在 ZEGO 控制台 创建项目，获取到了接入 ZIM SDK 服务所需的 AppID 和 ServerSecret。ZIM 服务权限不是默认开启的，使用前，请先在 ZEGO 控制台 自助开通 ZIM 服务（详情请参考 项目管理 - 即时通讯）、或联系 ZEGO 技术支持开通。 已获取登录 SDK 所需的 Token，详情请参考 使用 Token 鉴权。 3 集成 SDK 3.1 新建项目 打开 Android Studio，选择 “File > New > New Project” 菜单。 2.填写项目名及项目存储路径。 3.其它按照默认设置，单击 “Next”，最后单击 “Finish” 完成新工程创建。 3.2 导入 SDK 目前支持的平台架构包括：arm64-v8a、armeabi-v7a、x86、x86_64。 开发者可通过以下任意一种方式实现集成 SDK。 方式一：使用 JitPack 自动集成 SDK 进入项目根目录，打开 “build.gradle” 文件，在 “allprojects” 中加入如下代码。 ... allprojects {     repositories {         maven { url 'https://www.jitpack.io' }         google()         jcenter()     } } 2.进入 “app” 目录，打开 “build.gradle” 文件，在 “dependencies” 中添加 implementation 'com.github.zegolibrary:zim:x.y.z'。“x.y.z” 为 SDK 的版本号，请参考 发布日志 中的发布历史获取。 ... dependencies {     ...     // x.y.z 请填写具体版本号，如：1.2.0     // 可通过 SDK 发布历史取得最新版本号     implementation 'com.github.zegolibrary:zim:x.y.z' } 方式二：复制 SDK 文件手动集成 请参考 下载 SDK，下载最新版本的 SDK。 将 SDK 包解压至项目目录下，例如 “app/libs”。 3.添加 SDK 引用。进入到 “app” 目录，打开 “build.gradle” 文件。 在 “defaultConfig” 节点添加 “ndk” 节点，指定支持的平台类型。 ndk {     abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64', 'x86'  }       2.在 “android” 节点添加 “sourceSets” 节点，指定 “libs” 所在目录。 示例代码中 “libs” 目录仅为举例，开发者可根据实际路径填写。 ```gradle sourceSets {     main {         jniLibs.srcDirs = ['libs']     } } ```   在 “dependencies” 节点引入 “libs” 下所有的 jar。   ```gradle implementation fileTree(dir: 'libs', include: ['*.jar']) ``` 3.3 设置权限 开发者可以根据实际应用需要，设置应用所需权限。 进入 “app/src/main” 目录，打开 “AndroidManifest.xml” 文件，添加权限。   3.4 防止混淆代码 在 “proguard-rules.pro” 文件中，为 SDK 添加 -keep 类的配置，防止混淆 SDK 公共类名称。 -keep class **.zego.**{*;} 4 实现基本收发消息 以下流程中，我们以客户端 A 和 B 的消息交互为例： 4.1 实现流程 请参考 跑通示例源码 获取源码，相关功能的源码请查看 “app/src/main/java/im/zego/zimexample/ui/room/ZIMPeerSessionActivity” 目录下的文件。 1. 导入类文件 在项目文件中引入类文件。 import im.zego.zim.ZIM; 2. 创建 ZIM 实例 首先我们需要在 SDK 中创建 ZIM 实例，一个实例对应的是一个用户，表示一个用户以客户端的身份登录系统。 例如，客户端 A、B 分别调用 create 接口，传入在 2 前提条件 中获取到的 AppID，创建了 A、B 的实例： // 创建 ZIM 对象，传入 APPID 与 Android 中的 Application zim = ZIM.create(appID, application);   ZIM 创建单例的示例 由于大多数开发者，在整个流程中，只需要将 ZIM 实例化一次，因此 ZEGO 建议您将 ZIM 单例化并保存。 创建一个 SDKManager 类，在该类中声明并实现了一个 “sharedInstance” 静态方法，该方法将会在首次调用时创建并返回一个 SDKManager 的对象，在该对象中调用 ”create“，此后在项目的任意位置导入 SDKManager 类，调用 “SDKManager.sharedInstance().zim” 将会返回 zim 对象。 public class SDKManager {     private static SDKManager sdkManager;     public ZIM zim;       public static SDKManager sharedInstance() {         if (sdkManager == null) {             synchronized (SDKManager.class) {                 if (sdkManager == null) {                     sdkManager = new SDKManager();                 }             }         }         return sdkManager;     }       public void create(Application application) {         zim = ZIM.create(ZegoAppID.appID, application);     } } 3. 设置 setEventHandler 回调 在客户端登录前，开发者可以通过调用 setEventHandler 接口，自定义 ZIM 中的事件回调，接收到 SDK 异常、消息通知回调等的通知。 zim.setEventHandler(new ZIMEventHandler() {     @Override     public void onReceivePeerMessage(ZIM zim, ArrayList messageList, String fromUserID) {         // 收到“单聊”通信的消息回调     } }); 4. 登录 ZIM 创建实例后，客户端 A 和 B 需要登录 ZIM，只有登录成功后才可以开始发送、接收消息、更新 Token 等。   客户端需要使用各自的用户信息和 Token 进行登录。调用 login 接口进行登录，传入用户信息 ZIMUserInfo 对象，以及在 2 前提条件 中获取到的 Token 进行鉴权，鉴权通过后才能登录成功。   “userID”、“userName” 支持开发者自定义规则生成。建议开发者将 “userID” 设置为一个有意义的值，可将其与自己的业务账号系统进行关联。 如果 Token 过期，需要在 tokenWillExpire 即将过期回调接口中，调用 renewToken 接口，更新 Token 后才能正常使用 SDK。 // 登录时，需要开发者 按照 "使用 Token 鉴权" 文档生成 token 即可 // userID 和 userName，最大 32 字节的字符串。仅支持数字，英文字符 和 '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '', '/', '\'。 ZIMUserInfo zimUserInfo = new ZIMUserInfo(); zimUserInfo.userID = userID; zimUserInfo.userName = userName; zim.login(zimUserInfo, token, new ZIMLoggedInCallback() {     @Override     public void onLoggedIn(ZIMError error) {           // 开发者可根据 ZIMError 来判断是否登录成功。               }  }); 5. 发送单聊消息 客户端 A 登录成功后，可以向客户端 B 发送消息。 目前 ZIM 支持的消息类型如下： 客户端 A 可以调用 sendPeerMessage 接口，传入客户端 B 的 userID、消息内容等信息，即可发送一条消息到 B 的客户端，同时可以通过 onMessageSent 接口的回调信息，判断消息是否发送成功。 // 发送“单聊”通信的信息 String toUserID = "xxxx"; ZIMTextMessage zimMessage = new ZIMTextMessage(); zimMessage.message = "消息内容"; ZIMMessageSendConfig config = new ZIMMessageSendConfig(); // 消息优先级，取值为 低:1 默认,中:2,高:3 config.priority = ZIMMessagePriority.LOW; // 设置消息的离线推送配置 ZIMPushConfig pushConfig = new ZIMPushConfig(); pushConfig.title = "离线推送的标题"; pushConfig.content= "离线推送的内容"; pushConfig.extendedData = "离线推送的扩展信息"; config.pushConfig = pushConfig; zim.sendPeerMessage(zimMessage, toUserID, config, new ZIMMessageSentCallback() {     @Override     public void onMessageSent(ZIMMessage zimMessage, ZIMError error) {         // 开发者可以通过该回调监听消息是否发送成功。     } }); 6. 接收单聊消息 客户端 B 登录 ZIM 后，将会收到在 setEventHandler 回调中设置的 onReceivePeerMessage 监听接口，收到客户端 A 发送过来的消息。 收到消息时，由于类型是基类，首先需要判断消息类型是 Text 还是 Command，开发者需要强转基类为具体的子类，然后从 message 字段获取消息内容。 zim.setEventHandler(new ZIMEventHandler() {     @Override     public void onReceivePeerMessage(ZIM zim, ArrayList messageList, String fromUserID) {         for (ZIMMessage zimMessage : messageList) {           if (zimMessage instanceof ZIMTextMessage)            {             ZIMTextMessage zimTextMessage = (ZIMTextMessage) zimMessage;             Log.e(TAG, "收到的消息:"+ zimTextMessage.message);           }          }    } }); 7. 退出登录 如果客户端需要退出登录，直接调用 logout 接口即可。 zim.logout(); 8. 销毁 ZIM 实例 如果不需要 ZIM 实例，可直接调用 destroy 接口，销毁实例。 zim.destroy(); 4.2 API 时序图 通过以上的实现流程描述，API 接口调用时序图如下： 获取更多ZEGO SDK技术支持： ZIM不仅具备全平台互动、消息海量并发、合规安全可靠等产品特性。同时还可结合即构 RTC SDK实现各类音视频场景的用户互动，满足Avatar , 直播，语聊房等实时互动场景，扫码了解更多~

VUE实现Web端多人语音视频聊天

1 多人语音聊天功能介绍 本文展示了如何使用 ZEGO Express SDK 构造多人音视频通话场景，即实现多对多实时音视频聊天互动。用户可在房间内与其余用户进行实时音视频通话，互相推拉流。该场景可用于多人实时音视频聊天、多人视频会议等。 2 Web端实现多人语音聊天准备工作 在应用多人音视频通话场景之前，请确保： 已在项目中集成 ZEGO Express SDK，实现基本的实时音视频功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。 已在 ZEGO 控制台 创建项目，并申请有效的 AppID，详情请参考 控制台 - 项目管理 中的“项目信息”。 3 vue集成语音聊天示例源码下载 请参考 下载示例源码 获取源码。 相关源码请查看ZEGO Express SDK “src/Examples/Scenes/VideoForMultipleUsers” 目录下的文件。 4 ZEGO音视频SDK使用步骤 本节将介绍如何使用 ZEGO Express SDK 实现多人视频通话。 流程图如下：   API 调用时序图如下: ZEGO Express SDK 可支持多人视频通话，如上时序图以 2 名房间成员间的实时视频通话为例，建议开发者参考上述流程设计自己的多人实时视频通话场景。 4.1 创建多人音视频聊天引擎实例 创建 ZegoExpressEngine 引擎实例，将申请到的 AppID 传入参数 “appID”，将接入服务器地址传入参数 “server”。 “server” 为接入服务器地址，获取方式如下： 登录 ZEGO 控制台。 在对应项目下单击“查看”。 进入“项目配置”界面，在“项目信息”页签的“配置信息”中，单击 “ServerSecret” 后面的小眼睛按钮即可获取对应的接入服务器地址。 const zg = new ZegoExpressEngine(appID, server); 4.2 多人语音聊天开启房间内用户变化通知 开发者需在每位用户调用 loginRoom 接口登录房间时，将 ZegoRoomConfig 中的 “userUpdate” 设置为 “true” ，用于接收其他用户进出房间的回调通知（即 roomUserUpdate。 const isLogin = await zg.loginRoom(     roomID,     token,     { userID },     { userUpdate: true }   );   4.3 监听回调事件 为实现多人视频通话功能，需要监听房间内用户和流的增减并做出相应处理，开发者可根据实际需要，实现 ZegoEvent（包含 ZegoRTCEvent 和 ZegoRTMEvent）中的某些方法，创建引擎后可通过调用 on) 接口设置回调。 4.3.1 监听房间内的用户变化 只有调用 loginRoom 登录房间时设置了关注用户变化，即 ZegoRoomConfig 中的 “userUpdate” 设置为 “true”（默认值为 “false”）时，才能监听 roomUserUpdate 回调。 为了监听房间内的用户变化，需注册 roomUserUpdate 回调，已登录房间内用户的新增和删除都会触发该回调，开发者可以根据实际需要在回调中实现自己的业务逻辑。 回调中 “updateType” 参数指明了房间内用户变化的类型，该参数取值如下： 用户首次登录房间时，若此房间内已存在其他用户，该新登录用户会通过此回调接收到新增类型的用户列表，即 “updateType” 为 “ADD” 的回调，该用户列表为房间内已存在的用户。 zg.on('roomUserUpdate', (roomID, updateType, userList) => {     console.log('roomUserUpdate roomID ', roomID, streamList); if (updateType === 'ADD') {       // update view } else if(updateType == 'DELETE') {       // update view } }); 4.3.2 多人语音聊天监听房间内的流变化 当某条流被删除时，如果开发者正在调用 startPlayingStream 接口拉取该流，请调用 stopPlayingStream 接口停止拉流，否则 SDK 会报拉流错误。 为监听房间内的流变化，需注册 roomStreamUpdate 回调，已登录房间内流的新增和删除都会触发该回调，开发者可以根据实际需要在回调中实现自己的业务逻辑。 回调中 “updateType” 参数指明了房间内流变化的类型，该参数取值如下： 用户首次登录房间时，若此房间内存在其他用户正在推流，会接收到流新增列表，即 “updateType” 为 “ADD” 的回调。 zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {     console.log('roomStreamUpdate roomID ', roomID, streamList);     if(updateType === 'ADD') {     // update view     } else if(updateType == 'DELETE') {     // update view     } }); 4.3 推流、拉流、登录房间其他操作 请参考 快速开始 - 实现流程 依次完成登录房间、推流和拉流相关操作。 5 API 参考列表 6 获取音视频SDK更多帮助 获取本文的Demo、开发文档、技术支持，访问即构文档中心 近期有开发规划的开发者可上即构官网查看，恰逢即构七周年全线音视频产品1折的优惠，联系商务获取RTC产品优惠,或者扫码在线咨询~