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

Question

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

我已经使用了agora_rtc_engine插件。

ma​​in.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 使用相同的代码，但进行了一些更改。以上代码 fragment 适用于 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

您需要从代码中删除对齐小部件，才能在通话用户界面中隐藏小屏幕。这将隐藏框，即使您不调用_engine.enableLocalVideo(false)函数，本地视频也不会可见，并且执行后所以你的两个问题都应该得到解决。尝试一次

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

对于自己的全屏视频，您可以将本地视频而不是远程视频分配给中心小部件

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