diff --git a/markdown/Live-stream Shopping/api-sequence-ios.wsd b/markdown/Live-stream Shopping/api-sequence-ios.wsd new file mode 100644 index 00000000000..96ecffdc0b5 --- /dev/null +++ b/markdown/Live-stream Shopping/api-sequence-ios.wsd @@ -0,0 +1,63 @@ +@startuml +autonumber +title 电商直播 API 调用时序图 +participant "声网 RTC SDK" as sdk +participant "电商直播 App" as app #White +participant "声网云服务\n(SyncManager)" as cloud +app -> cloud: 获取房间列表 +activate cloud +cloud -->> app: 显示房间列表 +deactivate cloud +== 创建直播间以本地预览直播 == +app -> sdk: sharedEngineWithConfig +app -> sdk: setupLocalVideo +app -> sdk: startPreview +app -> cloud: 创建房间 +activate cloud +cloud -->> app: 创建房间成功 +deactivate cloud +app -> sdk: stopPreview +app -> sdk: destory +== 加入直播间 == +app -> cloud: 加入房间 +activate cloud +cloud -->> app: 加入房间成功 +deactivate cloud +app -> cloud: 订阅收到礼物事件 +app -> cloud: 订阅聊天消息事件 +app -> cloud: 订阅用户加入和退出直播间事件 +app -> cloud: 订阅 PK 连麦邀请事件 +app -> sdk: sharedEngineWithConfig +app -> sdk: enableVideo +app -> sdk: setupLocalVideo（主播调用） +app -> sdk: setupRemoteVideo（观众调用） +app -> sdk: joinChannelByToken +sdk --> app: didJoinChannel +== 上架/下架商品 == +app -> cloud: 上架商品 +app -> cloud: 下架商品 +cloud --> app: 商品上架通知 +cloud --> app: 商品下架通知 +== 主播 PK 连麦 == +app -> cloud: 主播 A 发起 PK +cloud --> app: 主播 B 收到 PK 邀请 +app -> cloud: 主播 B 接受 PK 邀请 +cloud --> app: 主播 A 和主播 B 开始 PK +app -> sdk: joinChannelExByToken（主播和观众加入对方主播房间） +sdk --> app: didJoinedOfUid +app -> sdk: setupRemoteVideoEx（主播和观众渲染对方主播的视频） +app -> cloud: 主播 A 和主播 B 结束 PK +cloud --> app: 主播 A 和主播 B 结束 PK +app -> sdk: leaveChannelEx（主播和观众退出对方频道） +== 退出直播间 == +app -> cloud: 主播退出房间 +activate cloud +cloud --> app: 通知所有观众房间已关闭 +deactivate cloud +app -> cloud: 观众退出房间 +activate cloud +cloud --> app: 通知所有观众和主播房间内减少 1 名用户 +deactivate cloud +app -> sdk: leaveChannel +app -> sdk: destroy +@enduml \ No newline at end of file diff --git a/markdown/Live-stream Shopping/api-sequence.wsd b/markdown/Live-stream Shopping/api-sequence.wsd new file mode 100644 index 00000000000..37d3de1d8a7 --- /dev/null +++ b/markdown/Live-stream Shopping/api-sequence.wsd @@ -0,0 +1,63 @@ +@startuml +autonumber +title 电商直播 API 调用时序图 +participant "声网 RTC SDK" as sdk +participant "电商直播 App" as app #White +participant "声网云服务\n(SyncManager)" as cloud +app -> cloud: 获取房间列表 +activate cloud +cloud -->> app: 显示房间列表 +deactivate cloud +== 创建直播间以本地预览直播 == +app -> sdk: create +app -> sdk: setupLocalVideo +app -> sdk: startPreview +app -> cloud: 创建房间 +activate cloud +cloud -->> app: 创建房间成功 +deactivate cloud +app -> sdk: stopPreview +app -> sdk: destory +== 加入直播间 == +app -> cloud: 加入房间 +activate cloud +cloud -->> app: 加入房间成功 +deactivate cloud +app -> cloud: 订阅收到礼物事件 +app -> cloud: 订阅聊天消息事件 +app -> cloud: 订阅用户加入和退出直播间事件 +app -> cloud: 订阅 PK 连麦邀请事件 +app -> sdk: create +app -> sdk: enableVideo +app -> sdk: setupLocalVideo（主播调用） +app -> sdk: setupRemoteVideo（观众调用） +app -> sdk: joinChannel +sdk --> app: onJoinChannelSuccess +== 上架/下架商品 == +app -> cloud: 上架商品 +app -> cloud: 下架商品 +cloud --> app: 商品上架通知 +cloud --> app: 商品下架通知 +== 主播 PK 连麦 == +app -> cloud: 主播 A 发起 PK +cloud --> app: 主播 B 收到 PK 邀请 +app -> cloud: 主播 B 接受 PK 邀请 +cloud --> app: 主播 A 和主播 B 开始 PK +app -> sdk: joinChannelEx（主播和观众加入对方主播房间） +sdk --> app: onUserJoined +app -> sdk: setupRemoteVideoEx（主播和观众渲染对方主播的视频） +app -> cloud: 主播 A 和主播 B 结束 PK +cloud --> app: 主播 A 和主播 B 结束 PK +app -> sdk: leaveChannelEx（主播和观众退出对方频道） +== 退出直播间 == +app -> cloud: 主播退出房间 +activate cloud +cloud --> app: 通知所有观众房间已关闭 +deactivate cloud +app -> cloud: 观众退出房间 +activate cloud +cloud --> app: 通知所有观众和主播房间内减少 1 名用户 +deactivate cloud +app -> sdk: leaveChannel +app -> sdk: destroy +@enduml \ No newline at end of file diff --git a/markdown/Live-stream Shopping/consideration.md b/markdown/Live-stream Shopping/consideration.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/markdown/Live-stream Shopping/live_stream_shopping_android.md b/markdown/Live-stream Shopping/deprecated/live_stream_shopping_android.md similarity index 100% rename from markdown/Live-stream Shopping/live_stream_shopping_android.md rename to markdown/Live-stream Shopping/deprecated/live_stream_shopping_android.md diff --git a/markdown/Live-stream Shopping/live_stream_shopping_app_download.md b/markdown/Live-stream Shopping/deprecated/live_stream_shopping_app_download.md similarity index 100% rename from markdown/Live-stream Shopping/live_stream_shopping_app_download.md rename to markdown/Live-stream Shopping/deprecated/live_stream_shopping_app_download.md diff --git a/markdown/Live-stream Shopping/live_stream_shopping_ios.md b/markdown/Live-stream Shopping/deprecated/live_stream_shopping_ios.md similarity index 100% rename from markdown/Live-stream Shopping/live_stream_shopping_ios.md rename to markdown/Live-stream Shopping/deprecated/live_stream_shopping_ios.md diff --git a/markdown/Live-stream Shopping/live_stream_shopping_overview.md b/markdown/Live-stream Shopping/deprecated/live_stream_shopping_overview.md similarity index 97% rename from markdown/Live-stream Shopping/live_stream_shopping_overview.md rename to markdown/Live-stream Shopping/deprecated/live_stream_shopping_overview.md index 45d7554ff57..f60dd1174b6 100644 --- a/markdown/Live-stream Shopping/live_stream_shopping_overview.md +++ b/markdown/Live-stream Shopping/deprecated/live_stream_shopping_overview.md @@ -28,9 +28,9 @@ updatedAt: 2020-11-12 11:05:04 Agora 为电商直播提供如下平台的 Demo，扫描下方二维码下载应用。 -| Android | iOS | +| Android | iOS | | ---------------- | ---------------- | -|[前往下载](./downloads?platform=Android) | [前往下载](./downloads?platform=iOS) | +|[前往下载](./downloads?platform=Android) | [前往下载](./downloads?platform=iOS) | 由于电商直播场景涉及多个用户，我们建议你准备**两台**设备进行体验。完成下载和安装后，参考如下步骤试用 Agora 的电商直播。 diff --git a/markdown/Live-stream Shopping/fragment.md b/markdown/Live-stream Shopping/fragment.md new file mode 100644 index 00000000000..69f9f1eecb6 --- /dev/null +++ b/markdown/Live-stream Shopping/fragment.md @@ -0,0 +1,32 @@ +**超低延时** + +声网 SD-RTN™ 网络节点覆盖全球 200 多个国家和地区，通过就近接入、智能路由等控制策略，保证全球平均端到端延时 < 400 ms。 + +**稳定可靠** + +提供 SLA 质量保证，登录成功率 > 99%，全年可用时间高达 99.99%。 + +**极致弱网对抗能力** + +业界领先的弱网对抗算法，保证在 70% 丢包情况下，音视频通话流畅；70% 丢包情况下，音频通话流畅，真正做到低卡顿、不掉线。 + +当用户网络带宽不足时，声网的网络自适应策略可以实现音频优先、主播优先。 + +**高音质** + +支持 48 kHz 全频带采样，业界领先的 3A 算法（回声消除、噪声抑制、自动增益），在嘈杂环境下也能保持语音清澈，提供高品质的互动体验。 + +**高清画质** + +支持 1080P 高清视频体验。支持 H.265、超分辨率和感知视频编码，在同等分辨率、帧率情况下，视频占有带宽更低，画质体验更好。 + +**支持第三方服务** + +你可以搭配使用第三方服务，在项目中实现鉴黄、美颜、AR 等功能，提供更丰富好玩的视频直播场景。 + +**质量透明可溯** + +声网通过如下接口及产品，保障实时音视频的质量： + +- 完整的通话质量回调，排除潜在问题，扫清互动障碍； +- [水晶球](https://console.agora.io/analytics/call/search)工具，显示端到端全链路的质量监控数据，直播过程可追溯，提供用户行为、运行状态、QoE/QoS 的质量数据，帮助排查定位问题。 \ No newline at end of file diff --git a/markdown/Live-stream Shopping/integration-android.md b/markdown/Live-stream Shopping/integration-android.md new file mode 100644 index 00000000000..56388c1ef55 --- /dev/null +++ b/markdown/Live-stream Shopping/integration-android.md @@ -0,0 +1,274 @@ +本文介绍如何实现电商直播场景。 + +## 示例项目 + +声网在 [Agora-Scenario-Examples](https://github.com/AgoraIO-Usecase/Agora-Scenario-Examples/tree/main) 仓库中提供[电商直播](https://github.com/AgoraIO-Usecase/Agora-Scenario-Examples/tree/main/Android/modules/Shopping)源代码供你参考。 + +## 业务流程图 + +本节介绍电商直播涉及到的通用业务流程，包含主播和观众的实时音视频互动、主播之间的跨直播间 PK 连麦。 + +### 实时互动 + +房主进入直播间，开始上架商品，进行电商直播。用户可以查看商品列表进行下单。 + +![](https://web-cdn.agora.io/docs-files/1684397470563) + +### PK 连麦 + +房主邀请另一个房间的房主开始 PK 连麦。用户可以看到两个房主 PK 连麦直播的画面。 + +![](https://web-cdn.agora.io/docs-files/1684397483079) + + +## 准备开发环境 + +### 前提条件 + +- Android Studio 4.1 以上版本。 +- Android API 级别 16 或以上。 +- 两台运行 Android 4.1 或以上版本的移动设备。 +- 可以访问互联网的计算机。确保你的网络环境没有部署防火墙，否则无法正常使用声网服务。 +- 有效的[声网账户](https://console.agora.io/)和声网项目，请参考[开始使用声网平台](https://docs.agora.io/cn/Agora%20Platform/get_appid_token?platform=All%20Platforms)，从声网控制台获取以下信息： + - App ID：声网随机生成的字符串，用于识别你的 app。 + - 临时 Token：你的 app 客户端加入频道时会使用 Token 对用户进行鉴权。临时 Token 的有效期为 24 小时。 + - 频道名称：用于标识直播频道的字符串。 + +### 创建项目 + +按照以下步骤准备开发环境： + +1. 如需创建新项目，在 **Android Studio** 里，依次选择 **Phone and Tablet > Empty Activity**，创建 [Android 项目](https://developer.android.com/studio/projects/create-project)。 + +
创建项目后，Android Studio 会自动开始同步 gradle, 稍等片刻至同步成功后再进行下一步操作。
+ +2. 使用 Maven Central 将声网视频 SDK 集成到你的项目中。 + + a. 在 `/Gradle Scripts/build.gradle(Project: )` 文件中添加如下代码，添加 Maven Central 依赖： + + ```java + buildscript { + repositories { + ... + mavenCentral() + } + ... + } + + allprojects { + repositories { + ... + mavenCentral() + } + } + ``` + +
如果你的 Android 项目设置了 dependencyResolutionManagement，添加 Maven Central 依赖的方式可能存在差异。
+ + b. 在 `/Gradle Scripts/build.gradle(Module: .app)` 文件中添加如下代码，将声网视频 SDK 集成到你的 Android 项目中： + + ```java + ... + dependencies { + ... + // x.y.z，请填写具体的 SDK 版本号，如：4.0.0 或 4.1.0-1。 + // 通过互动直播产品发版说明获取最新版本号。 + implementation 'io.agora.rtc:full-sdk:x.y.z' + } + ``` + +3. 添加网络及设备权限。 + + 在 `/app/Manifests/AndroidManifest.xml` 文件中，在 `` 后面添加如下权限： + + ```xml + + + + + + + + + + + + + ``` + +4. 在 `/Gradle Scripts/proguard-rules.pro` 文件中添加如下行，以防止声网 SDK 的代码被混淆： + + ```java + -keep class io.agora.**{*;} + -dontwarn javax.** + -dontwarn com.google.devtools.build.android.** + ``` + +## 实现电商直播 + +如下时序图中展示了如何预览直播、加入直播间、上下架商品、PK 连麦、退出直播间。声网 RTC SDK 承担实时音视频的业务，声网云服务承担信令消息和数据存储的业务。本节会详细介绍如何调用 RTC SDK 的 API 完成这些逻辑，但是信令消息的逻辑需要你参考时序图自行实现。 + +
声网云服务为内部自研服务，暂不对外提供。声网建议你参考文档自行实现相似的一套服务。如需协助，请提交工单。
+ +![](https://web-cdn.agora.io/docs-files/1684484123337) + +### 1. 预览直播 + +房主进入直播间前一般需要预览本地直播视频。你可以调用如下方法，创建 `RtcEngine` 引擎并开启本地视频预览： + +- [`create`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_core_method.html#api_irtcengine_create): 创建 `RtcEngine` 引擎。 +- [`setupLocalVideo`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_video_process.html#api_irtcengine_setuplocalvideo): 初始化本地视图。 +- [`startPreview`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_video_process.html#api_irtcengine_startpreview): 开启视频预览。 + + +```java +try { + // 创建 RtcEngine 引擎 + rtcEngine = RtcEngine.create(this, getString(R.string.rtc_app_id), new IRtcEngineEventHandler() {}); + FrameLayout surfaceViewContainer = findViewById(R.id.surface_view_container); + SurfaceView videoView = new SurfaceView(this); + surfaceViewContainer.removeAllViews(); + surfaceViewContainer.addView(videoView); + // 开启本地视频 + rtcEngine.setupLocalVideo(new VideoCanvas(videoView, Constants.RENDER_MODE_HIDDEN)); + // 开启本地预览 + rtcEngine.startPreview(); +} catch (Exception e) { + e.printStackTrace(); +} +``` + +### 2. 加入直播间 + +你可以使用声网 RTC SDK 的 [`create`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_core_method.html#api_irtcengine_create) 方法创建一个 `RtcEngine` 引擎，再通过 [`joinChannel`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_core_method.html#api_irtcengine_joinchannel2) 和 [`setChannelProfile`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_core_method.html#api_irtcengine_setchannelprofile) 方法让用户加入一个频道场景为 `LIVE_BROADCASTING` 的频道。频道用于传输直播间中的音视频流，云服务用于传输直播间中的信令消息和存储数据。用户在频道内可以进行实时音视频互动。频道内的用户有两种角色： + +- 主播：可以发送和接收音视频流。直播间的房主即为主播。 +- 观众：只可以接收音视频流。 + +你需要调用 `setupLocalVideo` 在主播端渲染本地视频，调用 `setupRemoteVideo` 在观众端渲染远端视频（即主播的视频）。#TODO add link + +```java +try { + // 创建 RtcEngine 引擎 + rtcEngine = (RtcEngineEx) RtcEngine.create(this, getString(R.string.rtc_app_id), new IRtcEngineEventHandler() { + ... + }); + + // 开启视频和音频 + rtcEngine.enableVideo(); + rtcEngine.enableAudio(); + + // 设置频道场景为直播 + rtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_LIVE_BROADCASTING); + + // 主播端渲染本地视频 + SurfaceView videoView = new SurfaceView(this); + mBinding.localVideoContainer.removeAllViews(); + mBinding.localVideoContainer.addView(videoView); + rtcEngine.setupLocalVideo(new VideoCanvas(videoView, Constants.RENDER_MODE_HIDDEN)); + + // 观众端渲染远端视频，即渲染主播的视频 + SurfaceView videoView = new SurfaceView(AudienceDetailActivity.this); + mBinding.localVideoContainer.removeAllViews(); + mBinding.localVideoContainer.addView(videoView); + rtcEngine.setupRemoteVideo(new VideoCanvas(videoView, Constants.RENDER_MODE_HIDDEN, uid)); + + // 加入频道 + ChannelMediaOptions options = new ChannelMediaOptions(); + options.clientRoleType = Constants.CLIENT_ROLE_BROADCASTER; + options.publishMicrophoneTrack = true; + options.publishCameraTrack = true; + options.autoSubscribeVideo = true; + options.autoSubscribeAudio = true; + int uid = Integer.parseInt(RoomManager.getCacheUserId()); + TokenGenerator.gen(this, roomInfo.roomId, uid, ret -> rtcEngine.joinChannel(ret, roomInfo.roomId, uid, options)); +} catch (Exception e) { + e.printStackTrace(); +} +``` + +### 3. 开始 PK 连麦 + +房主跨直播间 PK 连麦意味着不同频道内的主播加入对方频道进行连麦。当房间内用户收到房主 PK 连麦的信令消息后，房间内用户的代码逻辑如下： + +- 房间 A： + - 房主 A 通过 [`joinChannelEx`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_multi_channel.html#api_irtcengineex_joinchannelex) 加入频道 B，并且设置订阅频道 B 内音视频流，但不发送音视频流。同时通过 [`setupRemoteVideoEx`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_multi_channel.html#api_irtcengineex_setupremotevideoex) 渲染频道 B 中主播的视频。 + - 观众通过 `joinChannelEx` 加入频道 B，并且设置订阅频道 B 内音视频流，但不发送音视频流。同时通过 `setupRemoteVideoEx` 渲染频道 B 中主播的视频。 +- 房间 B： + - 房主 B 通过 `joinChannelEx` 加入频道 A，并且设置订阅频道 A 内音视频流，但不发送音视频流。同时通过 `setupRemoteVideoEx` 渲染频道 A 中主播的视频。 + - 观众通过 `joinChannelEx` 加入频道 A，并且设置订阅频道 A 内音视频流，但不发送音视频流。同时通过 `setupRemoteVideoEx` 渲染频道 A 中主播的视频。 + +完成这些逻辑后，观众可以同时接收频道 A 和 B 的音视频流，因此可以同时看到两个房间的房主。房主仅在自己的频道发流，在对方的频道内不发流仅收流，因此，房主可以（在对方频道）看到对方，达到连麦的效果。 + + +```java +exChannelConnection = new RtcConnection(); +exChannelConnection.localUid = new Random(System.currentTimeMillis()).nextInt(1000) + 10000; +exChannelConnection.channelId = exChannelId; +rtcEngine.setVideoEncoderConfigurationEx(io.agora.scene.shopping.Constants.encoderConfiguration, exChannelConnection); +options = new ChannelMediaOptions(); +// 加入对方频道时，订阅音视频流，但是不发送音视频流 +options.clientRoleType = Constants.CLIENT_ROLE_AUDIENCE; +options.autoSubscribeAudio = true; +options.autoSubscribeVideo = true; +TokenGenerator.gen(this, exChannelConnection.channelId, exChannelConnection.localUid, new TokenGenerator.OnTokenGenCallback() { + @Override + public void onTokenGen(String ret) { + // 加入对方频道以 PK 连麦 + rtcEngine.joinChannelEx(ret, exChannelConnection, options, new IRtcEngineEventHandler() { + @Override + public void onUserJoined(int uid, int elapsed) { + super.onUserJoined(uid, elapsed); + runOnUiThread(() -> { + mBinding.pkVideoContainer.setVisibility(View.VISIBLE); + mBinding.ivPkIcon.setVisibility(View.VISIBLE); + mBinding.btnStopPk.setVisibility(View.VISIBLE); + SurfaceView videoView = new SurfaceView(HostDetailActivity.this); + mBinding.pkVideoContainer.removeAllViews(); + mBinding.pkVideoContainer.addView(videoView); + // 渲染对方房主的视频 + rtcEngine.setupRemoteVideoEx(new VideoCanvas(videoView, Constants.RENDER_MODE_HIDDEN, uid), exChannelConnection); + }); + } + @Override + public void onUserOffline(int uid, int reason) { + super.onUserOffline(uid, reason); + runOnUiThread(() -> { + mBinding.pkVideoContainer.setVisibility(View.GONE); + mBinding.pkVideoContainer.removeAllViews(); + mBinding.ivPkIcon.setVisibility(View.GONE); + mBinding.btnStopPk.setVisibility(View.GONE); + endPK(); + }); + } + }); + } +``` + +### 4. 结束 PK 连麦 + +结束 PK 连麦时，房间内用户都需要调用 [`leaveChannelEx`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_multi_channel.html#api_irtcengineex_leavechannelex) 离开对方频道。 + +```java +mBinding.pkVideoContainer.setVisibility(View.GONE); +mBinding.pkVideoContainer.removeAllViews(); +mBinding.ivPkIcon.setVisibility(View.GONE); +mBinding.btnStopPk.setVisibility(View.GONE); +if (exChannelConnection != null) { + rtcEngine.leaveChannelEx(exChannelConnection); + exChannelConnection = null; +} +``` + +### 5. 退出直播间 + +直播结束，所有用户退出直播间时都需要调用 [`leaveChannel`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_core_method.html#api_irtcengine_leavechannel) 离开频道。如果不再加入房间，还可以调用 [`destroy`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/java_ng/API/toc_core_method.html#api_irtcengine_release) 销毁 `RtcEngine` 引擎。 + +```java +if (exChannelConnection != null) { + rtcEngine.leaveChannelEx(exChannelConnection); + exChannelConnection = null; +} +rtcEngine.leaveChannel(); +RtcEngine.destroy(); +``` \ No newline at end of file diff --git a/markdown/Live-stream Shopping/integration-ios.md b/markdown/Live-stream Shopping/integration-ios.md new file mode 100644 index 00000000000..20e29840506 --- /dev/null +++ b/markdown/Live-stream Shopping/integration-ios.md @@ -0,0 +1,174 @@ +本文介绍如何实现电商直播场景。 + +## 示例项目 + +声网在 [Agora-Scenario-Examples](https://github.com/AgoraIO-Usecase/Agora-Scenario-Examples/tree/main) 仓库中提供[电商直播](https://github.com/AgoraIO-Usecase/Agora-Scenario-Examples/tree/main/iOS/Agora%20Scenarios/Scenes/Shopping)源代码供你参考。 + +## 业务流程图 + +本节介绍电商直播涉及到的通用业务流程，包含主播和观众的实时音视频互动、主播之间的跨直播间 PK 连麦。 + +### 实时互动 + +房主进入直播间，开始上架商品，进行电商直播。用户可以查看商品列表进行下单。 + +![](https://web-cdn.agora.io/docs-files/1684397470563) + +### PK 连麦 + +房主邀请另一个房间的房主开始 PK 连麦。用户可以看到两个房主 PK 连麦直播的画面。 + +![](https://web-cdn.agora.io/docs-files/1684397483079) + + +## 准备开发环境 + +### 前提条件 + + + +### 创建项目 + + + +## 实现电商直播 + +如下时序图中展示了如何预览直播、加入直播间、上下架商品、PK 连麦、退出直播间。声网 RTC SDK 承担实时音视频的业务，声网云服务承担信令消息和数据存储的业务。本节会详细介绍如何调用 RTC SDK 的 API 完成这些逻辑，但是信令消息的逻辑需要你参考时序图自行实现。 + +
声网云服务为内部自研服务，暂不对外提供。声网建议你参考文档自行实现相似的一套服务。如需协助，请提交工单。
+ +![](https://web-cdn.agora.io/docs-files/1684744943721) + +### 1. 预览直播 + +房主进入直播间前一般需要预览本地直播视频。你可以调用如下方法，创建 `AgoraRtcEngineKit` 并开启本地视频预览： + +- [`sharedEngineWithConfig`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/ios_ng/API/toc_core_method.html#api_irtcengine_initialize): 创建 `AgoraRtcEngineKit`。 +- [`setupLocalVideo`](): 初始化本地视图。#TODO enableVideo？时序图是否要改？ +- [`startPreview`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/ios_ng/API/toc_video_process.html#api_irtcengine_startpreview): 开启视频预览。 + + +```swift +// 创建 AgoraRtcEngineKit +agoraKit = AgoraRtcEngineKit.sharedEngine(with: rtcEngineConfig, delegate: self) +agoraKit?.setClientRole(getRole(uid: currentUserId)) +// 开启视频 +agoraKit?.enableVideo() +agoraKit?.enableAudio() +agoraKit?.setDefaultAudioRouteToSpeakerphone(true) +// 开启本地预览 +agoraKit?.startPreview() +``` + +### 2. 加入直播间 #TODO 为什么是 joinChannelEx 不是非 Ex + +你可以使用声网 RTC SDK 的 [`sharedEngineWithConfig`]() 方法创建一个 `AgoraRtcEngineKit`，再通过 [`joinChannel`]() 和 [`setChannelProfile`]() 方法让用户加入一个频道场景为 `LiveBroadcasting` 的频道。频道用于传输直播间中的音视频流，云服务用于传输直播间中的信令消息和存储数据。用户在频道内可以进行实时音视频互动。频道内的用户有两种角色：#TODO 这里和 Android 不同 + +- 主播：可以发送和接收音视频流。直播间的房主即为主播。 +- 观众：只可以接收音视频流。 + +你需要调用 `setupLocalVideo` 在主播端渲染本地视频，调用 `setupRemoteVideo` 在观众端渲染远端视频（即主播的视频）。#TODO 这里和 Android 不同 + +```swift +let connection = AgoraRtcConnection() +connection.channelId = channelName +connection.localUid = uid + +let channelMediaOptions = AgoraRtcChannelMediaOptions() +channelMediaOptions.clientRoleType = .broadcaster +channelMediaOptions.publishMicrophoneTrack = true +channelMediaOptions.publishCameraTrack = true +channelMediaOptions.autoSubscribeVideo = true +channelMediaOptions.autoSubscribeAudio = true + +// 加入频道 +let joinResult = agoraKit?.joinChannelEx(byToken: KeyCenter.Token, connection: connection, delegate: self, mediaOptions: channelMediaOptions, joinSuccess: nil) +if joinResult != 0 { + print("join fail") + return +} + +// 主播端渲染本地视频 +let canvas = AgoraRtcVideoCanvas() +canvas.uid = uid +canvas.renderMode = .hidden +agoraKit?.setupLocalVideo(canvas) + + +// 观众端渲染远端视频，即渲染主播的视频 +let canvas = AgoraRtcVideoCanvas() +canvas.uid = remoteUid +canvas.renderMode = .hidden + + +let remoteConnection = AgoraRtcConnection() +remoteConnection.channelId = channelName +remoteConnection.localUid = uid +agoraKit?.setupRemoteVideoEx(canvas, connection: remoteConnection) +``` + +### 3. 开始 PK 连麦 + +房主跨直播间 PK 连麦意味着不同频道内的主播加入对方频道进行连麦。当房间内用户收到房主 PK 连麦的信令消息后，房间内用户的代码逻辑如下： + +- 房间 A： + - 房主 A 通过 [`joinChannelEx`]() 加入频道 B，并且设置订阅频道 B 内音视频流，但不发送音视频流。同时通过 [`setupRemoteVideoEx`]() 渲染频道 B 中主播的视频。 + - 观众通过 `joinChannelEx` 加入频道 B，并且设置订阅频道 B 内音视频流，但不发送音视频流。同时通过 `setupRemoteVideoEx` 渲染频道 B 中主播的视频。 +- 房间 B： + - 房主 B 通过 `joinChannelEx` 加入频道 A，并且设置订阅频道 A 内音视频流，但不发送音视频流。同时通过 `setupRemoteVideoEx` 渲染频道 A 中主播的视频。 + - 观众通过 `joinChannelEx` 加入频道 A，并且设置订阅频道 A 内音视频流，但不发送音视频流。同时通过 `setupRemoteVideoEx` 渲染频道 A 中主播的视频。 + +完成这些逻辑后，观众可以同时接收频道 A 和 B 的音视频流，因此可以同时看到两个房间的房主。房主仅在自己的频道发流，在对方的频道内不发流仅收流，因此，房主可以（在对方频道）看到对方，达到连麦的效果。 + + +```swift +let connection = AgoraRtcConnection() +connection.channelId = channelName +connection.localUid = uid + +// 加入对方频道时，订阅音视频流，但是不发送音视频流 +let channelMediaOptions = AgoraRtcChannelMediaOptions() +channelMediaOptions.clientRoleType = .audience +channelMediaOptions.publishMicrophoneTrack = false +channelMediaOptions.publishCameraTrack = false +channelMediaOptions.autoSubscribeVideo = true +channelMediaOptions.autoSubscribeAudio = true + +// 加入对方频道以 PK 连麦 +let joinResult = agoraKit?.joinChannelEx(byToken: KeyCenter.Token, connection: connection, delegate: self, mediaOptions: channelMediaOptions, joinSuccess: nil) +if joinResult != 0 { + print("join fail") + return +} + + +// 渲染对方房主的视频 +let canvas = AgoraRtcVideoCanvas() +canvas.uid = remoteUid +canvas.renderMode = .hidden + +let remoteConnection = AgoraRtcConnection() +remoteConnection.channelId = channelName +remoteConnection.localUid = uid +agoraKit?.setupRemoteVideoEx(canvas, connection: remoteConnection) +``` + +### 4. 结束 PK 连麦 + +结束 PK 连麦时，房间内用户都需要调用 [`leaveChannelEx`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/ios_ng/API/toc_multi_channel.html#api_irtcengineex_leavechannelex) 离开对方频道。 + +```swift +let connection = AgoraRtcConnection() +connection.channelId = channelName +connection.localUid = uid +agoraKit?.leaveChannelEx(connection, leaveChannelBlock: nil) +``` + +### 5. 退出直播间 + +直播结束，所有用户退出直播间时都需要调用 [`leaveChannel`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/ios_ng/API/toc_core_method.html#api_irtcengine_leavechannel) 离开频道。如果不再加入房间，还可以调用 [`destroy`](https://docportal.shengwang.cn/cn/live-streaming-premium-4.x/API%20Reference/ios_ng/API/toc_core_method.html#api_irtcengine_release) 销毁 `AgoraRtcEngineKit`。 + +```swift +agoraKit?.leaveChannel() +AgoraRtcEngineKit.destroy() +``` \ No newline at end of file diff --git a/markdown/Live-stream Shopping/overview.md b/markdown/Live-stream Shopping/overview.md new file mode 100644 index 00000000000..fbc8b1e249f --- /dev/null +++ b/markdown/Live-stream Shopping/overview.md @@ -0,0 +1,32 @@ +## 场景描述 + +电商直播是电子商务与视频互动直播相结合的场景。在直播间里，房主向观众介绍商品，提供商品列表和链接；观众看到心仪的商品，可点击链接快速下单。直播过程中，房主可以和另一个直播间的房主进行 PK 连麦，展示各自的商品，激发观众的购买热情，增加直播的趣味性。 + +## 功能列表 + +电商直播场景通常需要实现如下功能： + +| 功能       | 描述 | +| ---------------- | ---------------- | +| 实时音视频互动 | 超低延时下，观众实时接收房主的音视频流，保证流畅的观看体验。 | +| 实时消息互动 | 直播间内的房主和观众使用文字消息实时交流。| +| PK 连麦 | 房主邀请其他房主 PK 连麦。直播间的观众可以在连麦的两个频道间快速跳转，购买心仪的商品，给喜爱的房主投票或刷礼物，增强 PK 气氛。 | +| 商品列表管理 | 房主管理商品的上下架，提供商品链接，以便观众边看边买。 | +| 用户进出频道管理 | 直播间内的房主和观众可以实时了解谁进入或离开了当前的直播间。| + +## 技术方案 + +声网使用声网 RTC SDK、声网云服务（SyncManager）共同搭建电商直播场景： + +- RTC SDK：让用户加入 RTC 频道，进行实时音视频互动和 PK 连麦。 +- 云服务：让用户收发文字消息、礼物、上下架商品、发起上麦邀请等。 + + +![](https://web-cdn.agora.io/docs-files/1683774790711) + +![](https://web-cdn.agora.io/docs-files/1683774804784) + + +## 方案优势 + + frag \ No newline at end of file diff --git a/markdown/livecast/livecast_app_android.md b/markdown/livecast/deprecated/livecast_app_android.md similarity index 100% rename from markdown/livecast/livecast_app_android.md rename to markdown/livecast/deprecated/livecast_app_android.md diff --git a/markdown/livecast/livecast_app_ios.md b/markdown/livecast/deprecated/livecast_app_ios.md similarity index 100% rename from markdown/livecast/livecast_app_ios.md rename to markdown/livecast/deprecated/livecast_app_ios.md diff --git a/markdown/livecast/livecast_client_android.md b/markdown/livecast/deprecated/livecast_client_android.md similarity index 100% rename from markdown/livecast/livecast_client_android.md rename to markdown/livecast/deprecated/livecast_client_android.md diff --git a/markdown/livecast/livecast_client_ios.md b/markdown/livecast/deprecated/livecast_client_ios.md similarity index 100% rename from markdown/livecast/livecast_client_ios.md rename to markdown/livecast/deprecated/livecast_client_ios.md diff --git a/markdown/livecast/livecast_overview.md b/markdown/livecast/deprecated/livecast_overview.md similarity index 100% rename from markdown/livecast/livecast_overview.md rename to markdown/livecast/deprecated/livecast_overview.md diff --git a/markdown/livecast/run_livecast_android.md b/markdown/livecast/deprecated/run_livecast_android.md similarity index 100% rename from markdown/livecast/run_livecast_android.md rename to markdown/livecast/deprecated/run_livecast_android.md diff --git a/markdown/livecast/run_livecast_ios.md b/markdown/livecast/deprecated/run_livecast_ios.md similarity index 100% rename from markdown/livecast/run_livecast_ios.md rename to markdown/livecast/deprecated/run_livecast_ios.md diff --git a/markdown/livecast/overview.md b/markdown/livecast/overview.md new file mode 100644 index 00000000000..54fbe28b333 --- /dev/null +++ b/markdown/livecast/overview.md @@ -0,0 +1,58 @@ +## 场景描述 + +互动播客指在直播房间中进行实时音频互动的场景。互动播客房间有一个房主和多个听众，房间内的麦位数量没有限制，所有用户都能看到麦位的实时状态。房主和听众可以进行以下操作： + +- 房主可以发布音频流，也可以邀请听众发言（“上麦”）或者将听众从麦位上移除（“下麦”）。 +- 普通听众不能发布音频流，只有麦位上的听众（“连麦主播”）可以发布音频流。听众可以通过房主邀请或者主动请求成为连麦主播。 + + +## 功能列表 + +互动播客场景通常需要实现以下功能： + +| 功能 | 描述 | +| :----------- | :----------------------------------------------------------- | +| 实时音频互动 | 超低延时下，听众实时接收房主和连麦主播的音频流，房主和连麦主播实时接收对方的音频流，保证流畅的音频互动。 | +| 麦位控制 | 房主进行上麦、下麦、禁麦操作，同时房间内所有用户都能看到每个麦位的实时状态。 | +| 用户管理 | 维护房间成员列表、用户昵称等。 | + + + +## 技术方案 + +声网使用声网 RTC SDK、声网云服务共同搭建互动播客场景： + +- RTC SDK：让用户加入 RTC 频道，进行实时音频互动。 +- 云服务：让用户收发举手消息等。 + +
声网云服务为内部自研服务，暂不对外提供。声网建议你参考文档自行实现相似的一套服务。如需协助，请提交工单。
+ +![](https://web-cdn.agora.io/docs-files/1683775337517) + +## 方案优势 + +声网的互动播客场景具有以下优势： + +**1、全球覆盖，超低延时** + +声网的 SD-RTN™ 网络在全球部署节点，覆盖了 200+ 国家与地区，端到端平均延时低至 200 – 300 ms ，最低 50 ms。 + +**2、超高弹性网络架构** + +声网的 SD-RTN™ 网络采用超高弹性架构设计，能够承受 10 倍以上的负荷，可以缓解流量暴增带来的传输压力。 + +**3、稳定可靠的高质量体验** + +提供 XLA 质量保证，登录成功率 > 99%，全年可用时间高达 99.99%。 + +**4、极致弱网对抗能力** + +业界领先的弱网对抗算法，在 80% 丢包情况下都能保证音频通话流畅，真正做到低卡顿、不掉线。当用户网络带宽不足时，声网的网络自适应策略可以实现音频优先、主播优先。 + +**5、安全合规** + +声网具备 ISO 27001、ISO 27017、ISO 27018 等国际通用的信息安全和个人信息保护认证，符合 GDPR、CCPA、COPPA、HIPAA 、个人信息保护法（草案）等国内外隐私保护法律法规的要求，为用户的信息安全提供稳固保障。 + +**6、高音质** + +支持 48 kHz 全频带采样，采用自研的 NOVA™ 语音引擎和业界领先的 3A 算法（回声消除、噪声抑制、自动增益），在嘈杂环境下也能保持语音清澈，提供高品质的互动体验。 \ No newline at end of file