Can't work on web platform.

YowFung commented 3 years ago

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

```txt [✓] 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 commented 3 years ago

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 commented 3 years ago

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

YowFung commented 3 years ago

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

YowFung commented 3 years ago

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

jaumard commented 3 years ago

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 commented 3 years ago

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

jaumard commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

oberoivarun commented 3 years ago

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 commented 3 years ago

oberoivarun commented 3 years ago

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

jaumard commented 3 years ago

@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

YowFung commented 3 years ago

where did you see that JS can't handle keep-alive request ?

From some discussions in other community website. You can write an Ajax demo through javascript to request your mjpeg stream to verify that.

delphi007 commented 2 years ago

I am not sure whether it's related for this issue. But I have found import 'dart:io' in mjpeg.dart , which is not supported for flutter web.

Do the change will remove dart:io from // import 'dart:io'; to import 'dart:_http';

I have no time to test it but just a guess.

jaumard commented 1 year ago

Limitation is due to dart not supporting fetch on web, it can be tracked here https://github.com/dart-lang/http/issues/595

@delphi007 sure io would have to be removed be for now that's not the issue

claireliu14 commented 1 year ago

Any update ? I got this error on flutter web too ..

TimeoutException after 0:01:00.000000: Future not completed

heafox commented 5 months ago

mark

mylisabox / flutter_mjpeg

Can't work on web platform. #13