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

Posted 2023-03-14

【中文标题】Flutter 中的 Agora - 在视频聊天中禁用一个人的视频并让另一个人的视频全屏

【英文标题】：Agora in Flutter- disablle one persons's video and make another person's video full screen in the video chat

【发布时间】：2021-12-31 09:48:10

【问题描述】：

我在Flutter 应用程序中使用Agora。这是一个非常基本的应用程序，两个用户可以在线进行视频聊天。源代码很小，也很容易理解。但我的问题是：我只想在视频中显示一个人（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 使用相同的代码，但有一些变化。 上面的代码sn-p 用于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) 一侧的小矩形？

【参考方案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(),
          ),
        ],
      ),
    );
  

【讨论】：

我可以请您在这里查看一个与集市相关的问题：***.com/questions/70822128/… 吗？