8000 fix renderer issue for web. (#1558) · baihua666/flutter-webrtc@17c2863 · GitHub
[go: up one dir, main page]
Skip to content

Commit 17c2863

Browse files
cloudwebrtccloudwebrtc
authored
fix renderer issue for web. (flutter-webrtc#1558)
* fix renderer issue for web. * bump version.
1 parent 3871348 commit 17c2863

File tree

4 files changed

+64
-65
lines changed

4 files changed

+64
-65
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Changelog
22

33
--------------------------------------------
4+
[0.10.1] - 2024-04-08
5+
6+
* [Web] fix renderer issue for web.
7+
48
[0.10.0] - 2024-04-08
59

610
* [Web] move to package:web.

‎lib/src/web/rtc_video_renderer_impl.dart

Lines changed: 58 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'dart:async';
22
import 'dart:js_interop';
33
import 'dart:js_util' as jsutil;
4+
import 'dart:ui_web' as web_ui;
45

56
import 'package:flutter/foundation.dart';
67
import 'package:flutter/services.dart';
@@ -213,7 +214,9 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
213214
}
214215

215216
web.VideoElement? findHtmlView() {
216-
return videoElement;
217+
final element = web.document.getElementById(_elementIdForVideo);
218+
if (null != element) return element as web.VideoElement;
219+
return null;
217220
}
218221

219222
@override
@@ -250,62 +253,62 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
250253
return false;
251254
}
252255

253-
web.VideoElement? videoElement;
254-
255256
@override
256257
Future<void> initialize() async {
257-
// ignore: undefined_prefixed_name
258-
for (var s in _subscriptions) {
259-
s.cancel();
260-
}
261-
_subscriptions.clear();
262-
263-
final element = web.VideoElement()
264-
..autoplay = true
265-
..muted = true
266-
..controls = false
267-
..srcObject = _videoStream
268-
..id = _elementIdForVideo
269-
..setAttribute('playsinline', 'true');
270-
271-
_applyDefaultVideoStyles(element);
272-
273-
_subscriptions.add(
274-
element.onCanPlay.listen((dynamic _) {
275-
_updateAllValues();
276-
}),
277-
);
278-
279-
_subscriptions.add(
280-
element.onResize.listen((dynamic _) {
281-
_updateAllValues();
282-
onResize?.call();
283-
}),
284-
);
285-
286-
// The error event fires when some form of error occurs while attempting to load or perform the media.
287-
_subscriptions.add(
288-
element.onError.listen((web.Event _) {
289-
// The Event itself (_) doesn't contain info about the actual error.
290-
// We need to look at the HTMLMediaElement.error.
291-
// See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error
292-
final error = element.error;
293-
print('RTCVideoRenderer: videoElement.onError, ${error.toString()}');
294-
throw PlatformException(
295-
code: _kErrorValueToErrorName[error!.code]!,
296-
message: error.message != '' ? error.message : _kDefaultErrorMessage,
297-
details: _kErrorValueToErrorDescription[error.code],
298-
);
299-
}),
300-
);
301-
302-
_subscriptions.add(
303-
element.onEnded.listen((dynamic _) {
304-
// print('RTCVideoRenderer: videoElement.onEnded');
305-
}),
306-
);
307-
308-
videoElement = element;
258+
web_ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
259+
for (var s in _subscriptions) {
260+
s.cancel();
261+
}
262+
_subscriptions.clear();
263+
264+
final element = web.VideoElement()
265+
..autoplay = true
266+
..muted = true
267+
..controls = false
268+
..srcObject = _videoStream
269+
..id = _elementIdForVideo
270+
..setAttribute('playsinline', 'true');
271+
272+
_applyDefaultVideoStyles(element);
273+
274+
_subscriptions.add(
275+
element.onCanPlay.listen((dynamic _) {
276+
_updateAllValues();
277+
}),
278+
);
279+
280+
_subscriptions.add(
281+
element.onResize.listen((dynamic _) {
282+
_updateAllValues();
283+
onResize?.call();
284+
}),
285+
);
286+
287+
// The error event fires when some form of error occurs while attempting to load or perform the media.
288+
_subscriptions.add(
289+
element.onError.listen((web.Event _) {
290+
// The Event itself (_) doesn't contain info about the actual error.
291+
// We need to look at the HTMLMediaElement.error.
292+
// See: https://developer.mozilla.org/en- F438 US/docs/Web/API/HTMLMediaElement/error
293+
final error = element.error;
294+
print('RTCVideoRenderer: videoElement.onError, ${error.toString()}');
295+
throw PlatformException(
296+
code: _kErrorValueToErrorName[error!.code]!,
297+
message:
298+
error.message != '' ? error.message : _kDefaultErrorMessage,
299+
details: _kErrorValueToErrorDescription[error.code],
300+
);
301+
}),
302+
);
303+
304+
_subscriptions.add(
305+
element.onEnded.listen((dynamic _) {
306+
// print('RTCVideoRenderer: videoElement.onEnded');
307+
}),
308+
);
309+
310+
return element;
311+
});
309312
}
310313

311314
void _applyDefaultVideoStyles(web.VideoElement element) {

‎lib/src/web/rtc_video_view_impl.dart

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import 'dart:async';
33
import 'package:flutter/material.dart';
44

55
import 'package:dart_webrtc/dart_webrtc.dart';
6-
import 'package:web/web.dart' as web;
76
import 'package:webrtc_interface/webrtc_interface.dart';
87

98
import 'rtc_video_renderer_impl.dart';
@@ -67,14 +66,7 @@ class RTCVideoViewState extends State<RTCVideoView> {
6766
}
6867

6968
Widget buildVideoElementView() {
70-
return HtmlElementView.fromTagName(
71-
tagName: "div",
72-
onElementCreated: (element) {
73-
final div = element as web.HTMLDivElement;
74-
div.style.width = '100%';
75-
div.style.height = '100%';
76-
div.appendChild(videoRenderer.videoElement!);
77-
});
69+
return HtmlElementView(viewType: videoRenderer.viewType);
7870
}
7971

8072
@override

‎pubspec.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: flutter_webrtc
22
description: Flutter WebRTC plugin for iOS/Android/Destkop/Web, based on GoogleWebRTC.
3-
version: 0.10.0
3+
version: 0.10.1
44
homepage: https://github.com/cloudwebrtc/flutter-webrtc
55
environment:
66
sdk: '>=3.3.0 <4.0.0'

0 commit comments

Comments
 (0)
0