Can't work on web platform. #13

YowFung · 2021-06-09T09:36:21Z

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 · 2021-06-09T09:40:09Z

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 · 2021-06-09T11:09:42Z

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

YowFung · 2021-06-09T11:12:42Z

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

YowFung · 2021-06-09T11:15:23Z

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

jaumard · 2021-06-09T12:31:17Z

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 · 2021-06-09T13:13:43Z

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

jaumard · 2021-06-09T13:23:24Z

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 · 2021-06-09T15:39:13Z

@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 · 2021-06-09T15:42:01Z

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 · 2021-06-10T08:04:38Z

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 · 2021-06-10T18:45:10Z

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

oberoivarun · 2021-07-05T05:17:13Z

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 · 2021-07-05T05:47:46Z

Maybe related to flutter/flutter#84252.

oberoivarun · 2021-07-05T05:54:53Z

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

jaumard · 2021-07-15T06:53:42Z

@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 · 2021-07-17T06:51:39Z

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 · 2022-03-22T09:24:36Z

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 · 2022-09-26T12:05:57Z

Limitation is due to dart not supporting fetch on web, it can be tracked here dart-lang/http#595

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

claireliu14 · 2023-08-04T08:27:15Z

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

TimeoutException after 0:01:00.000000: Future not completed

heafox · 2024-03-27T15:02:46Z

mark

jaumard mentioned this issue May 14, 2022

XMLHTTPrequest error in web platform #21

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't work on web platform. #13

Can't work on web platform. #13

YowFung commented Jun 9, 2021

YowFung commented Jun 9, 2021

jaumard commented Jun 9, 2021

YowFung commented Jun 9, 2021

YowFung commented Jun 9, 2021 •

edited

Loading

jaumard commented Jun 9, 2021

YowFung commented Jun 9, 2021

jaumard commented Jun 9, 2021 •

edited

Loading

YowFung commented Jun 9, 2021 •

edited

Loading

YowFung commented Jun 9, 2021

jaumard commented Jun 10, 2021

jaumard commented Jun 10, 2021

oberoivarun commented Jul 5, 2021

YowFung commented Jul 5, 2021

oberoivarun commented Jul 5, 2021

jaumard commented Jul 15, 2021

YowFung commented Jul 17, 2021

delphi007 commented Mar 22, 2022

jaumard commented Sep 26, 2022

claireliu14 commented Aug 4, 2023

heafox commented Mar 27, 2024

Can't work on web platform. #13

Can't work on web platform. #13

Comments

YowFung commented Jun 9, 2021

YowFung commented Jun 9, 2021

jaumard commented Jun 9, 2021

YowFung commented Jun 9, 2021

YowFung commented Jun 9, 2021 • edited Loading

jaumard commented Jun 9, 2021

YowFung commented Jun 9, 2021

jaumard commented Jun 9, 2021 • edited Loading

YowFung commented Jun 9, 2021 • edited Loading

YowFung commented Jun 9, 2021

jaumard commented Jun 10, 2021

jaumard commented Jun 10, 2021

oberoivarun commented Jul 5, 2021

YowFung commented Jul 5, 2021

oberoivarun commented Jul 5, 2021

jaumard commented Jul 15, 2021

YowFung commented Jul 17, 2021

delphi007 commented Mar 22, 2022

jaumard commented Sep 26, 2022

claireliu14 commented Aug 4, 2023

heafox commented Mar 27, 2024

YowFung commented Jun 9, 2021 •

edited

Loading

jaumard commented Jun 9, 2021 •

edited

Loading

YowFung commented Jun 9, 2021 •

edited

Loading