Can't work on web platform.

[YowFung]

Hi @jaumard, It seems can't work on the web platform.

Simple code:

import 'package:flutter/material.dart';
import 'package:flutter_mjpeg/flutter_mjpeg.dart';


void main() => runApp(MjpegPluginDemo());


class MjpegPluginDemo extends StatelessWidget {
  MjpegPluginDemo({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MJPEG PLUGIN DEMO",
      home: Scaffold(
        appBar: AppBar(
          title: Text("MJPEG PLUGIN DEMO"),
        ),
        body: Center(
          child: Container(
            width: 500,
            height: 280,
            color: Colors.black26,
            child: Mjpeg(
              stream: "https://mjpeg-server.herokuapp.com/",
              isLive: true,
              fit: BoxFit.fill,
            )
          ),
        ),
      ),
    );;
  }
}

These screenshots may help you:

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.1, on macOS 11.3.1 20E241 darwin-x64, locale zh-Hans-CN)
    • Flutter version 2.2.1 at /Users/yowfung/Library/Flutter
    • Framework revision 02c026b03c (13 days ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/yowfung/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/yowfung/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.3.1 20E241 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Microsoft Edge 90.0.818.62

• No issues found!

[YowFung]

It seems that it can't get the data until the request is finished, but MJPEG can't be finished. This may be related to JavaScript's inability to handle keep-alive connections.

[jaumard]

I'm using this package in flutter web without issue... I'll double check your example when I can!

[YowFung]

Hi @jaumard, Have you updated to Flutter 2.x?

[YowFung]

If you upgrade to the latest version of Flutter, you can only see the canvas tag and no img tag.

[jaumard]

I've updated to flutter 2.0 but I don't think I have tested it on web. I'll try to do that this weekend but not sure I'll have time.
But normally this package doesn't have any dependencies that make it not work on web. Maybe you have CORS issues on your URL you try to access, because on web that was to root cause of my issue when making the mjpeg to work.

[YowFung]

It's not CORS. If it's a CORS problem, it will throw an error like this:

[jaumard]

If I tried your URL in a browser https://mjpeg-server.herokuapp.com/ I still have timeout, something is wrong with the server, so problem is coming from that, not the package I think. (I will still test when I have time) but look like you might want to check your URL on plain HTML page as it should work there first.

[YowFung]

@jaumard

It works ok on the browser. It's really slow because it's mounted on a third-party platform. Sorry, I don't have my own web server. You can use your own MJPEG address to test. Note the web platform and the stable flutter branch.

[YowFung]

Or you can set the timeout longer.

Mjpeg(
  stream: "https://mjpeg-server.herokuapp.com/",
  isLive: true,
  fit: BoxFit.fill,
  timeout: const Duration(seconds: 60),
)

[jaumard]

I was able to test on web and you're right, stream is not loading and get a timeout... Didn't dig that much but I'll ! Thanks for the report!

[jaumard]

I've searched a bit but so far no idea what really append on web... just getting timeout

[oberoivarun]

Getting same error on Flutter web.

flutter doctor -v
[√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1052], locale en-IN)
    • Flutter version 2.2.3 at C:\Users\varun\Code\flutter
    • Framework revision f4abaa0735 (3 days ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at C:\Users\varun\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] VS Code, 64-bit edition (version 1.57.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.24.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.124
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 91.0.864.64

• No issues found!

Tried to increase the timeout as well didn't work. Any update on what's causing this?

[YowFung]

Maybe related to flutter/flutter#84252.

[oberoivarun]

Yup.. found that just two minutes ago. It might just work if I downgrade flutter. Let me try and revert.

[jaumard]

@YowFung where did you see that JS can't handle keep-alive request ? I this it does, look like a Dart issue to me, once compiled into JS they have a bug I will say