在元宇宙中搭建语聊房，设计思路和实现方法分享
目标 1. 制定目标 不妨大家想一下这个场景： 你走进一个咖啡厅，看到了一个美女或者帅哥，想要一个微信号，方便后续发展。 那我们要怎么做呢？ 走到对方跟前，小声对他说：“你好，你长的很像我的前女友（前男友），可以加下你的微信吗？”。 对方有可能悄声的说，“我扫你”。 你这个时候你就需要把你的二维码展示给他。 当你们恋爱成功，求婚的时候，可能要找一个更加浪漫的环境，并且你们的对话希望给更多人看到、听到。 通过这个上面场景的想象，我们可以简单的确定一些基本的要素 可以更改的场景 （咖啡厅和求婚现场） 自主塑造形象功能（毕竟外貌是一见钟情的原点） 单聊 （要微信号不能一次要一群人得呀。不然可能被当成流氓给打得哟） 文件共享 （把自己得二维码展示给对方，让对方加好友） 群聊、群视频 （把求婚现场给其他用户看） 2. 拆解目标 为了满足上面提到得要求，我们需要以下功能： 支持unity的方便接入。毕竟unity是一个非常好的3D引擎，如果可以方便接入得话，在后续得场景创建和人物创造上都可以有更大的扩展空间 1 vs 1的视频，或者 1 vs 多的直播模式。可以满足单聊和群聊的需求 同步本地播放的本地视频或者远端视频给其他用户。可以满足共享二维码的需求。 3. 效果预览 如果要完整的实现一个完整的项目会花费比较多的时间，而我发现目前声网的 Demo 会提供简单的人物模型和素材，但是他们开放度较高，开发者可以根据需要使用自己定制化的模型素材，为了实现上述提到的需求，我只做了一些微小的修改，就满足了我们的需求。本次主要看下效果，为后续在生产环境中落地做一些技术上的储备。 以下是在demo上调整后显示出来的效果。 这是用unity来实现的一个咖啡厅的样子 这是一个服装店，我们可以给人物进行换装，这个也是由unity来实现的。 以上两个的接入都非常的方便，我们可以很好的对接unity，如果需要的话，后续有自己的unity场景也可以快速接入。 这个是我自己测试的1 vs 1的视频测试效果 这个是我自己测试的将本地视频分享给对方的一个效果 想象一下，是不是可以和你的对象一起看剧了呢？ 简单实现 以上效果都是基于声网的sdk来实现的，如果你也想进行尝试或者使用，可以继续查看我的接入过程和中间遇到的问题以及解决方案。 1. 账号准备 我们既然使用了声网的sdk，那注册一个声网的账号做一些声网的账号配置也很合理吧。 注册账号 完成实名 创建项目 配置项目 然后进入详细配置 生成token，并将appid、证书、token复制保存。 注意！！！这里很重要，一定要看仔细，项目中会使用到！ 至此，账号的准备已经完成了。 2. 配置项目 demo源码 通过声网官网客服，申请元宇宙 SDK、Unity工程文件、开发指南，同时申请开通使用权限，详情可访问 shengwang.cn 将sdk解压并配置到项目中 一定要注意目录，如果自己的项目中不存在当前的目录要自己创建 配置id一般情况下，这个文件是不会上传到远程仓库的，写到这里也主要是安全考虑。将在后台中申请的appid、证书，复制后粘贴到/Android/local.properties里面，如下： 配置channel 将在后台生成token的时候，填写的channel给写到类中，如下 配置项目权限 <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.BLUETOOTH" /> <!-- 对于 Android 12.0 及以上设备，还需要添加如下权限： --> <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> 注意： Manifest.permission.RECORD_AUDIO, Manifest.permission.CAMERA 需要动态申请权限，否则无法正常完成视频功能。 sdk本身是不会去申请权限的，所以需要我们自己在合适的位置帮sdk申请好权限。 混淆配置 咖啡厅 做形象 服装店 这里是直接使用了声网给的效果，如果自己项目需要的话，可以去自己去调整。 其中换装和捏脸都需要unity上的一些修改和native与unity的通信。整个可以参考换装和捏脸 3. 视频1vs1 前面已经完成了整体项目的构建。并且已经把unity内容跑起来了，那么接下来我们看下，如果要实现 1vs1的视频要怎么处理。为了方便处理，我单独写了一个页面来处理视频1vs1，效果如下： 视频聊天 这个流程图，建议大家多看几遍，在我们遇到问题的时候，这个图会给我们启发，帮助我们解决问题。 详细流程： 1. 创建RtcEngine对象 该对象管理了整个的视频等场景，是一个非常核心的对象。 try { RtcEngineConfig config = new RtcEngineConfig(); config.mContext = getBaseContext(); config.mAppId = appId; config.mEventHandler = mRtcEventHandler; config.mAudioScenario = Constants.AudioScenario.getValue(Constants.AudioScenario.DEFAULT); mRtcEngine = RtcEngine.create(config); } catch (Exception e) { throw new RuntimeException("Check the error."); } 2. 创建RtcEngine属性 // 视频默认禁用，你需要调用 enableVideo 启用视频流。 mRtcEngine.enableVideo(); // 录音默认禁用，你需要调用 enableAudio 启用录音。 mRtcEngine.enableAudio(); // 开启本地视频预览。 mRtcEngine.startPreview(); 3. 将本地摄像头内容显示到local_video_view_container上 FrameLayout container = findViewById(R.id.local_video_view_container); // 创建一个 SurfaceView 对象，并将其作为 FrameLayout 的子对象。 SurfaceView surfaceView = new SurfaceView (getBaseContext()); container.addView(surfaceView); // 将 SurfaceView 对象传入声网，以渲染本地视频。 mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, KeyCenter.RTC_UID)); 4. 设置当前的模式 ChannelMediaOptions options = new ChannelMediaOptions(); // 将用户角色设置为 BROADCASTER。 options.clientRoleType = Constants.CLIENT_ROLE_BROADCASTER; // 视频通话场景下，设置频道场景为 BROADCASTING。 options.channelProfile = Constants.CHANNEL_PROFILE_LIVE_BROADCASTING; 其中clientRoleType有两种，如果是CLIENT_ROLE_BROADCASTER就是可以播和收，如果是CLIENT_ROLE_AUDIENCE就只能收看，当前就成了主播模式。 5. 加入频道 // 使用临时 Token 加入频道。 // 你需要自行指定用户 ID，并确保其在频道内的唯一性。 int res = mRtcEngine.joinChannel(token, channelName, KeyCenter.RTC_UID, options); if (res != 0) { // Usually happens with invalid parameters // Error code description can be found at: // en: https://docs.agora.io/en/Voice/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_i_rtc_engine_event_handler_1_1_error_code.html // cn: https://docs.agora.io/cn/Voice/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_i_rtc_engine_event_handler_1_1_error_code.html Log.e("video","join err:"+RtcEngine.getErrorDescription(Math.abs(res))); } joinChannel方法有返回值，可以看到我们加入频道是否成功了，如果不成功的话，我们可以看下错误原因，并对照解决；如果成功了，就可以观察IRtcEngineEventHandler对象的回调方法，重点关注下 onError(int err) 和onJoinChannelSuccess(String channel, int uid, int elapsed) 如果收到 onJoinChannelSuccess方法的回调，我们就可以关注 onUserJoined(int uid, int elapsed) 方法，我们可以在这个方法里开始显示远端内容。 6. 显示远端内容 @Override // 监听频道内的远端主播，获取主播的 uid 信息。 public void onUserJoined(int uid, int elapsed) { Log.e(TAG, "onUserJoined->" + uid); runOnUiThread(new Runnable() { @Override public void run() { // 从 onUserJoined 回调获取 uid 后，调用 setupRemoteVideo，设置远端视频视图。 setupRemoteVideo(uid); } }); } private void setupRemoteVideo(int uid) { FrameLayout container = findViewById(R.id.remote_video_view_container); SurfaceView surfaceView = new SurfaceView (getBaseContext()); surfaceView.setZOrderMediaOverlay(true); container.addView(surfaceView); mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, uid)); } 最终，远端的视频会显示在 remote_video_view_container 上。 4. 将本地播放的视频显示给远端用户 同步本地播放给远端 将本地视频怎么同步给远端的用户呢？其实从本质上来讲，将本地摄像头和将本地播放的视频给远端用户看，对远端用户都是一样的，不一样的是本地用户给远端用户的数据源是哪个。一个是摄像头，一个是播放器。 设置本地video的时候做下修改 FrameLayout container = findViewById(R.id.local_video_view_container); // 创建一个 SurfaceView 对象，并将其作为 FrameLayout 的子对象。 SurfaceView surfaceView = new SurfaceView (getBaseContext()); container.addView(surfaceView); // 将 SurfaceView 对象传入声网，以渲染本地视频。 VideoCanvas videoCanvas = new VideoCanvas(surfaceView, Constants.RENDER_MODE_HIDDEN, Constants.VIDEO_MIRROR_MODE_AUTO, Constants.VIDEO_SOURCE_MEDIA_PLAYER, mediaPlayer.getMediaPlayerId(), KeyCenter.RTC_UID); mRtcEngine.setupLocalVideo(videoCanvas); 在int res = mRtcEngine.joinChannel(token, channelName, KeyCenter.RTC_UID, options);是0的时候，调用如下方法： int res = mRtcEngine.joinChannel(token, channelName, KeyCenter.RTC_UID, options); if (res != 0) { // Usually happens with invalid parameters // Error code description can be found at: // en: https://docs.agora.io/en/Voice/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_i_rtc_engine_event_handler_1_1_error_code.html // cn: https://docs.agora.io/cn/Voice/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_i_rtc_engine_event_handler_1_1_error_code.html Log.e("video","join err:"+RtcEngine.getErrorDescription(Math.abs(res))); }else { mediaPlayer = mRtcEngine.createMediaPlayer(); mediaPlayer.registerPlayerObserver(this); mediaPlayer.open(MetaChatConstants.VIDEO_URL, 0); } 3.监听onPlayerStateChanged回调并在state是PLAYER_STATE_OPEN_COMPLETED的时候执行play方法，代码如下： public void onPlayerStateChanged(io.agora.mediaplayer.Constants.MediaPlayerState state, io.agora.mediaplayer.Constants.MediaPlayerError error) { if(state == io.agora.mediaplayer.Constants.MediaPlayerState.PLAYER_STATE_OPEN_COMPLETED){ mediaPlayer.play(); } } 至此，就完成了功能上的使用。 其它功能 除了上面提到的功能外，声网还提供了一些其他的功能，在需要的时候可以直接使用，或者少量修改就可以用的。 比如说空间音效功能，该功能基于声学原理，模拟声音在不同空间环境中的传播、反射、吸收效果。可以为用户提供旅游中路人聊天声、海浪声、风声等，让用户更沉浸式体验 再比如说实时共赏影音功能。该功能可以几乎无延时的实现，远程观影、听歌等功能。甚至可以实现k歌的能力。 更多的功能期待大家一起发掘！ 参考资料 注册声网账号 声网官网 SDK下载 快速开始 - 实现音视频通话 媒体播放器
