Does anyone know how to round the video corners in a video call? The container that I place them in has a border radius, but when the video starts it always shows a square container.
My video render code is below:
@override
Widget build(BuildContext context) {
return Stack(
children: [
_localSwitchRender == true
? rtc_local_view.SurfaceView()
: rtc_remote_view.SurfaceView(uid: widget.remoteUid.first),
Align(
alignment: Alignment.topLeft,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: GestureDetector(
onTap: _switchRender,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 42, 0, 0),
child: Stack(
children: [
Column(
children: [
const SizedBox(
height: 20
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Color(0x66333333),
),
width: 158,
height: 220,
foregroundDecoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: _localSwitchRender
? rtc_remote_view.SurfaceView(
uid: widget.remoteUid.first,
renderMode: VideoRenderMode.FILL,
)
: rtc_local_view.SurfaceView(
renderMode: VideoRenderMode.Hidden,
zOrderMediaOverlay: true,
),
),
],
),
],
),
),
),
),
),
],
);
}
}
Any help is greatly appreciated!
Place your widget inside ClipRRect:
ClipRRect(
borderRadius: BorderRadius.circular(10)
child: // your widget
)