我在Flutter應用程式中使用Agora。這是一個非常基本的應用程式，其中 2 個用戶可以在線進行視頻聊天。源代碼體積很小，也很容易理解。但我的問題是：我只想在視頻中顯示一個人 (Person1) 而不是另一個人 (Person2)。
我使用了agora_rtc_engine插件。
主要.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）一側的小矩形？
uj5u.com熱心網友回復：
您需要從代碼中洗掉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視頻分配給中心小部件
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Agora Video Call'),
),
body: Stack(
children: [
Center(
child: _localUserJoined
? RtcLocalView.SurfaceView()
: CircularProgressIndicator(),
),
],
),
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/399676.html