瀏覽代碼

fix browser js path error

Melon 2 年之前
父節點
當前提交
dab9adecb1

文件差異過大導致無法顯示
+ 0 - 0
.flutter-plugins-dependencies


+ 3 - 6
assets/wwwroot/source.html

@@ -12,8 +12,8 @@
             margin: 0;
             height: 100%;
             overflow: hidden;
-            background-color: rgba(0, 0, 0, 0);
-            ;
+            /* background-color: rgba(0, 0, 0, 0); */
+            background-color: #000;
         }
 
         #live {
@@ -25,11 +25,8 @@
 
 <body>
     <canvas id="live"></canvas>
-    <script src="./assets/packages/fis_live/assets/wwwroot/node_player_beta/NodePlayer.min.js"></script>
+    <script src="./node_player/NodePlayer.min.js"></script>
     <script>
-        function setBgColor(r, g, b, a) {
-            document.body.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
-        }
         main();
 
         async function main() {

+ 1 - 1
example/android/app/build.gradle

@@ -47,7 +47,7 @@ android {
         applicationId "com.example.example"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
-        minSdkVersion 17
+        minSdkVersion 19
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

+ 4 - 6
example/lib/main.dart

@@ -63,13 +63,11 @@ class _MyHomePageState extends State<MyHomePage> {
               '$_counter',
               style: Theme.of(context).textTheme.headlineMedium,
             ),
+            SizedBox(height: _counter.toDouble()),
             SizedBox(
-              width: 640,
-              height: 480,
-              child: FLivePlayer(
-                controller: controller,
-                style: LivePlayerStyle(Colors.red),
-              ),
+              width: 320,
+              height: 240,
+              child: FLivePlayer(controller: controller),
             ),
           ],
         ),

+ 1 - 1
lib/widgets/live_player.dart

@@ -39,7 +39,7 @@ class _FLivePlayerState extends State<FLivePlayer> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: widget.style?.backgroundColor ?? Colors.black,
+      color: Colors.black, // 由于播放器第一帧未显示时会有黑屏,默认背景色为黑色
       child: Stack(
         children: [
           _buildLiveView(),

+ 45 - 42
lib/widgets/single/single_view_io.dart

@@ -1,11 +1,8 @@
-import 'package:fis_live/controller/adapters/core.dart';
 import 'package:fis_live/controller/adapters/single/adapter_io.dart';
 import 'package:fis_live/controller/controller.dart';
-import 'package:fis_live/utils/asset_util.dart';
-import 'package:flutter/foundation.dart';
+import 'package:fis_live/controller/exception.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
-import 'package:webviewx/webviewx.dart';
 
 import '../data_root.dart';
 
@@ -18,9 +15,12 @@ class SingleChannelView extends StatefulWidget {
 }
 
 class _SingleChannelViewState extends State<SingleChannelView> {
-  late final LiveController controller;
-  late final LiveControllerSingleIOAdapter adapter;
-  bool isLoaded = false;
+  late final LiveShareDateProxy dataProxy;
+
+  LiveController get controller => dataProxy.controller;
+  LiveControllerSingleIOAdapter get adapter =>
+      controller.adapter! as LiveControllerSingleIOAdapter;
+  InAppWebViewController get wvController => adapter.webViewController!;
 
   @override
   void initState() {
@@ -29,27 +29,14 @@ class _SingleChannelViewState extends State<SingleChannelView> {
 
   @override
   void didChangeDependencies() {
-    print("!!!!!!!!!!!didChangeDependencies");
-    controller = LiveShareDateProxy.of(context)!.controller;
-    adapter = controller.adapter! as LiveControllerSingleIOAdapter;
+    dataProxy = LiveShareDateProxy.of(context)!;
+    controller.adapter = LiveControllerSingleIOAdapter();
     super.didChangeDependencies();
   }
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
-      children: [
-        _buildWebView(),
-        if (!isLoaded)
-          Center(
-            child: Image.asset(
-              AssetUtil.getPath("loading.gif"),
-              width: 36,
-              height: 36,
-            ),
-          ),
-      ],
-    );
+    return _buildWebView();
   }
 
   Widget _buildWebView() {
@@ -61,33 +48,49 @@ class _SingleChannelViewState extends State<SingleChannelView> {
           disableHorizontalScroll: true,
           disableVerticalScroll: true,
           allowFileAccessFromFileURLs: true,
+          allowUniversalAccessFromFileURLs: true,
         ),
       ),
       onWebViewCreated: (c) {
         adapter.webViewController = c;
-        c.addJavaScriptHandler(
-            handlerName: 'myHandlerName',
-            callback: (args) {
-              // print arguments coming from the JavaScript side!
-              print(args);
-
-              // return data to the JavaScript side!
-              return {'bar': 'bar_value', 'baz': 'baz_value'};
-            });
-      },
-      onLoadStop: (c, url) {
-        final url = controller.source.url;
-        c.evaluateJavascript(source: "load('$url')");
-        Future.delayed(const Duration(seconds: 2), () {
-          setState(() {
-            isLoaded = true;
-          });
-        });
+        c.addJavaScriptHandler(handlerName: 'onReady', callback: _onReady);
+        c.addJavaScriptHandler(handlerName: 'onStart', callback: _onStart);
+        c.addJavaScriptHandler(handlerName: 'onStop', callback: _onStop);
+        c.addJavaScriptHandler(handlerName: 'onTimeout', callback: _onTimeout);
+        c.addJavaScriptHandler(handlerName: 'onError', callback: _onError);
+        c.addJavaScriptHandler(handlerName: 'onBuffering', callback: _onError);
       },
-      onConsoleMessage: (controller, consoleMessage) {
+      onLoadStop: (c, url) {},
+      onConsoleMessage: (c, consoleMessage) {
         print(
             "[WebView Console][${consoleMessage.messageLevel}] ${consoleMessage.message}");
       },
     );
   }
+
+  dynamic _onReady(List args) {
+    final url = controller.source.url;
+    wvController.evaluateJavascript(source: "load('$url')");
+    controller.ready.emit(this, null);
+  }
+
+  dynamic _onStart(List args) {
+    controller.playStarted.emit(this, null);
+  }
+
+  dynamic _onStop(List args) {
+    controller.playStopped.emit(this, null);
+  }
+
+  dynamic _onTimeout(List args) {
+    controller.timeout.emit(this, null);
+  }
+
+  dynamic _onError(List args) {
+    final error = args.first;
+    controller.errorOccurred.emit(
+      this,
+      FLivePlayerException(error.code, error.msg),
+    );
+  }
 }

+ 10 - 21
lib/widgets/single/single_view_web.dart

@@ -19,7 +19,6 @@ class SingleChannelView extends StatefulWidget {
 
 class _SingleChannelViewState extends State<SingleChannelView> {
   late final LiveShareDateProxy dataProxy;
-  bool isLoaded = false;
 
   LiveController get controller => dataProxy.controller;
   LiveControllerSingleWebAdapter get adapter =>
@@ -53,8 +52,15 @@ class _SingleChannelViewState extends State<SingleChannelView> {
             if (snapshot.connectionState == ConnectionState.done &&
                 snapshot.data != null &&
                 snapshot.data!.isNotEmpty) {
+              // !!! 【Important】Web端js资源路径和Native不一样,需要特殊处理一下
+              final webJsAssetPath = AssetUtil.getPath(
+                  "wwwroot/node_player_beta/NodePlayer.min.js");
+              String content = snapshot.data!;
+              content = content.replaceFirst("./node_player/NodePlayer.min.js",
+                  "./assets/$webJsAssetPath");
+              //<script src="./assets/packages/fis_live/assets/wwwroot/node_player_beta/NodePlayer.min.js"></script>
               return _buildWebView(
-                snapshot.data!,
+                content,
                 constraints.maxWidth,
                 constraints.maxHeight,
               );
@@ -72,6 +78,7 @@ class _SingleChannelViewState extends State<SingleChannelView> {
       initialContent: content,
       width: width,
       height: height,
+      ignoreAllGestures: true,
       dartCallBacks: {
         DartCallback(name: "onReady", callBack: _onReady),
         DartCallback(name: "onStart", callBack: _onStart),
@@ -82,9 +89,7 @@ class _SingleChannelViewState extends State<SingleChannelView> {
       onWebViewCreated: (c) {
         adapter.webViewController = c;
       },
-      onPageFinished: (src) {
-        _syncWebViewBgColor();
-      },
+      onPageFinished: (src) {},
     );
   }
 
@@ -112,20 +117,4 @@ class _SingleChannelViewState extends State<SingleChannelView> {
       FLivePlayerException(args.code, args.msg),
     );
   }
-
-  /// 向WebView同步背景色
-  void _syncWebViewBgColor() {
-    if (style != null && style!.backgroundColor != null) {
-      final color = style!.backgroundColor!;
-      wvController.callJsMethod(
-        "setBgColor",
-        [
-          color.red,
-          color.green,
-          color.blue,
-          color.opacity,
-        ],
-      );
-    }
-  }
 }

+ 1 - 4
lib/widgets/style.dart

@@ -2,8 +2,5 @@ import 'dart:ui';
 
 /// 直播样式
 class LivePlayerStyle {
-  /// 背景色
-  final Color? backgroundColor;
-
-  LivePlayerStyle(this.backgroundColor);
+  LivePlayerStyle();
 }

部分文件因文件數量過多而無法顯示