8000 fix video renderer issue for safari. (#1265) · binvb/flutter-webrtc@6446466 · GitHub
[go: up one dir, main page]
Skip to content

Commit 6446466

Browse files
cloudwebrtccloudwebrtc
authored
fix video renderer issue for safari. (flutter-webrtc#1265)
1 parent 80e7884 commit 6446466

File tree

5 files changed

+35
-22
lines changed

5 files changed

+35
-22
lines changed

‎example/lib/main.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import 'src/loopback_sample_unified_tracks.dart';
1515
import 'src/route_item.dart';
1616

1717
void main() {
18+
WidgetsFlutterBinding.ensureInitialized();
1819
if (WebRTC.platformIsDesktop) {
1920
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
2021
} else if (WebRTC.platformIsAndroid) {
21-
WidgetsFlutterBinding.ensureInitialized();
2222
startForegroundService();
2323
}
2424
runApp(MyApp());

‎example/lib/src/get_user_media_sample_web.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ class _GetUserMediaSampleState extends State<GetUserMediaSample> {
142142
Widget build(BuildContext context) {
143143
return Scaffold(
144144
appBar: AppBar(
145-
title: Text('GetUserMedia API Test'),
145+
title: Text('GetUserMedia API Test Web'),
146146
actions: _inCalling
147147
? <Widget>[
148148
IconButton(

‎example/lib/src/loopback_sample_unified_tracks.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class _MyAppState extends State<LoopBackSampleUnifiedTracks> {
2727
Timer? _timer;
2828
final _configuration = <String, dynamic>{
2929
'iceServers': [
30-
//{'url': 'stun:stun.l.google.com:19302'},
30+
{'urls': 'stun:stun.l.google.com:19302'},
3131
],
3232
'sdpSemantics': 'unified-plan'
3333
};

‎lib/src/web/rtc_video_renderer_impl.dart

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,11 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
8383
@override
8484
bool get renderVideo => _srcObject != null;
8585

86-
String get _elementIdForAudio => 'audio_RTCVideoRenderer-$textureId';
87-
String get _elementIdForVideo => 'video_RTCVideoRenderer-$textureId';
86+
String get _elementIdForAudio => 'audio_$viewType';
87+
88+
String get _elementIdForVideo => 'video_$viewType';
89+
90+
String get viewType => 'RTCVideoRenderer-$textureId';
8891

8992
void _updateAllValues() {
9093
final element = findHtmlView();
@@ -139,7 +142,11 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
139142
_audioElement?.srcObject = _audioStream;
140143
}
141144

142-
findHtmlView()?.srcObject = _videoStream;
145+
var videoElement = findHtmlView();
146+
if (null != videoElement) {
147+
videoElement.srcObject = _videoStream;
148+
_applyDefaultVideoStyles(findHtmlView()!);
149+
}
143150

144151
value = value.copyWith(renderVideo: renderVideo);
145152
}
@@ -185,7 +192,11 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
185192
_audioElement?.srcObject = _audioStream;
186193
}
187194

188-
findHtmlView()?.srcObject = _videoStream;
195+
var videoElement = findHtmlView();
196+
if (null != videoElement) {
197+
videoElement.srcObject = _videoStream;
198+
_applyDefaultVideoStyles(findHtmlView()!);
199+
}
189200

190201
value = value.copyWith(renderVideo: renderVideo);
191202
}
@@ -244,8 +255,7 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
244255
@override
245256
Future<void> initialize() async {
246257
// ignore: undefined_prefixed_name
247-
ui.platformViewRegistry.registerViewFactory('RTCVideoRenderer-$textureId',
248-
(int viewId) {
258+
ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
249259
for (var s in _subscriptions) {
250260
s.cancel();
251261
}
@@ -255,26 +265,22 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
255265
..autoplay = true
256266
..muted = true
257267
..controls = false
258-
..style.objectFit = _objectFit
259-
..style.border = 'none'
260-
..style.width = '100%'
261-
..style.height = '100%'
262268
..srcObject = _videoStream
263269
..id = _elementIdForVideo
264270
..setAttribute('playsinline', 'true');
265271

272+
_applyDefaultVideoStyles(element);
273+
266274
_subscriptions.add(
267275
element.onCanPlay.listen((dynamic _) {
268276
_updateAllValues();
269-
// print('RTCVideoRenderer: videoElement.onCanPlay ${value.toString()}');
270277
}),
271278
);
272279

273280
_subscriptions.add(
274281
element.onResize.listen((dynamic _) {
275282
_updateAllValues();
276283
onResize?.call();
277-
// print('RTCVideoRenderer: videoElement.onResize ${value.toString()}');
278284
}),
279285
);
280286

@@ -305,6 +311,19 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
305311
});
306312
}
307313

314+
void _applyDefaultVideoStyles(html.VideoElement element) {
315+
// Flip the video horizontally if is mirrored.
316+
if (mirror) {
317+
element.style.transform = 'scaleX(-1)';
318+
}
319+
320+
element
321+
..style.objectFit = _objectFit
322+
..style.border = 'none'
323+
..style.width = '100%'
324+
..style.height = '100%';
325+
}
326+
308327
@override
309328
Function? onResize;
310329

‎lib/src/web/rtc_video_view_impl.dart

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import 'dart:async';
2-
import 'dart:math';
32

43
import 'package:flutter/material.dart';
54

@@ -67,12 +66,7 @@ class RTCVideoViewState extends State<RTCVideoView> {
6766
}
6867

6968
Widget buildVideoElementView() {
70-
return Transform(
71-
alignment: Alignment.center,
72-
transform: Matrix4.rotationY(videoRenderer.mirror ? pi * -1 : 0),
73-
child: HtmlElementView(
74-
viewType: 'RTCVideoRenderer-${videoRenderer.textureId}'),
75-
);
69+
return HtmlElementView(viewType: videoRenderer.viewType);
7670
}
7771

7872
@override

0 commit comments

Comments
 (0)
0