Flutter中的Agora-在视频聊天中禁用一个人的视频并使另一个人的视频全屏

Question

我正在使用 Agora in a Flutter 应用程序。这是一个非常基本的应用程序，2 个用户只需上网即可彼此进行视频聊天。源代码非常小，也很容易理解。但我的问题是：我只想在视频中显示一个人 (Person1) 而不是另一个人 (Person2)。

我已经使用了agora_rtc_engine插件。

main.dart:

import 'dart:async';

import 'package:agora_rtc_engine/rtc_engine.dart';
import 'package:agora_rtc_engine/rtc_local_view.dart' as RtcLocalView;
import 'package:agora_rtc_engine/rtc_remote_view.dart' as RtcRemoteView;
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';


const appId = "...";//Obtain it from Agora site
const token = ""; // Temporary token generated from Agora site

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // int? _remoteUid=1;

  int _remoteUid=1; // for another user remoteUid=2;
  bool _localUserJoined = false;
  late RtcEngine _engine;

  @override
  void initState() {
    super.initState();
    initAgora();
  }

  Future<void> initAgora() async {
    // retrieve permissions
    await [Permission.microphone, Permission.camera].request();

    //create the engine
    _engine = await RtcEngine.create(appId);
    await _engine.enableVideo();
    _engine.setEventHandler(
      RtcEngineEventHandler(
        joinChannelSuccess: (String channel, int uid, int elapsed) {
          print("local user $uid joined");
          setState(() {
            _localUserJoined = true;
          });
        },
        userJoined: (int uid, int elapsed) {
          print("remote user $uid joined");
          setState(() {
            _remoteUid = uid;
          });
        },
        userOffline: (int uid, UserOfflineReason reason) {
          print("remote user $uid left channel");
          setState(() {
            // _remoteUid = null;
            _remoteUid = 0;
          });
        },
      ),
    );

    // await _engine.joinChannel(token, "test", null, 0);
    await _engine.joinChannel(token, "InstaClass", null, 0);

  }

  // Create UI with local view and remote view
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Agora Video Call'),
      ),
      body: Stack(
        children: [
          Center(
            child: _remoteVideo(),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              width: 100,
              height: 150,
              child: Center(
                child: _localUserJoined
                    ? RtcLocalView.SurfaceView()
                    : CircularProgressIndicator(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Display remote user's video
  Widget _remoteVideo() {
    
    if (_remoteUid != 0) {
      return RtcRemoteView.SurfaceView(
        uid: _remoteUid,
        channelId: "InstaClass",
      );
    }else {
      return Text(
        'Please wait for remote user to join',
        textAlign: TextAlign.center,
      );
    }
  }
}

相同的代码用于 Person1 和 Person2，但有一些变化。以上代码片段适用于 Person1（注意 int remoteUid=1;）。对于 Person2，我使用了 int remoteUid=2;。为了禁用 Person2 的视频，在 Person2 的应用程序中，我添加了以下行

_engine.enableLocalVideo(false)

行后：

await _engine.enableVideo();

现在 Person2 可以全屏看到 Person1 的视频（即远程视频），但看不到自己（Person2）的视频（即本地视频）。本地视频位置显示黑色矩形。

Q1) 如何隐藏这个黑色矩形？我只想显示Person2这边的远程视频。

而从 person1 的角度来看，没有显示 Person2 的视频，Person1 的视频显示在一个小矩形中。

Q2) 我怎样才能全屏显示 Person1 的视频而不是他自己 (Person1) 一侧的小矩形？

Answer 1

您需要从您的代码中删除 Align 小部件，以便在您的通话中隐藏小屏幕 UI。这将隐藏 box，即使您不调用 _engine.enableLocalVideo(false) 函数，本地视频也不会 visible，这样做之后您的两个问题都应该得到解决。尝试一次

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Agora Video Call'),
      ),
      body: Stack(
        children: [
          Center(
            child: _remoteVideo(),
          ),
        ],
      ),
    );
  }

对于自己的全屏视频，您可以将 local 视频而不是 remote 视频分配给 Center 小部件

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Agora Video Call'),
      ),
      body: Stack(
        children: [
          Center(
            child: _localUserJoined
                ? RtcLocalView.SurfaceView()
                : CircularProgressIndicator(),
          ),
        ],
      ),
    );
  }

Flutter中的Agora-在视频聊天中禁用一个人的视频并使另一个人的视频全屏

Agora in Flutter- disablle one persons's video and make another person's video full screen in the video chat

android

videochat

flutter

agora.io