luis901101 / cloudflare

BSD 2-Clause "Simplified" License
13 stars 2 forks source link

Getting error #8

Closed developer-zerobug closed 6 months ago

developer-zerobug commented 8 months ago

The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer. This indicates an error which most likely cannot be solved by the library

luis901101 commented 8 months ago

Without any other information I think I can not help you, the more details you describe about your issue the better the help, me or anyone else could provide you.

developer-zerobug commented 7 months ago

Basically i try to build a flutter app that can stream a live video in app and multiple host are doing streaming. So basically i find diffucult to integrate a video player that run a stream

luis901101 commented 7 months ago

This package is a Dart API for Cloudflare API, so you will be able to CRUD on the resources already supported by the APIs of Images, Stream Videos and Stream Live, but to play Streams you have to use plugins, for instance for Stream Video you can use: chewie and for Stream Live you can use: apivideo_live_stream. Both plugins are used in the sample project of this package so you can see it to get an idea for your use case.

developer-zerobug commented 7 months ago

Actually, I tried to run the example folder, and this error I got if I clicked on create live input

Screenshot from 2024-03-11 16-23-14

luis901101 commented 7 months ago

@developer-zerobug that seems like a CORS error, you can confirm it in the Network and Console tabs from Chrome dev tools, anyway if you want to test the live streaming you can not do it on the Web because apivideo_live_stream doesn't support web, you have to check first the plugins platform support.

developer-zerobug commented 7 months ago

Thanks for the help @luis901101 but now i got a authorization error in fluttter apk I already added a stream token and app id for authorization Please have a look> 51d1eb2a-9d20-4a47-8280-a1388f05ea7d

luis901101 commented 7 months ago

@developer-zerobug I'm afraid you are trying to use the package in a non recommended way, please check the README.md, specifically here: How to use. In short, authorized api access must not be done through clients but server side, this means that all requests to Cloudflare API that relies on a token or key should be done on server side not directly from app because you would be exposing your api credentials. This package allows you to do authorized requests but it's intended to be used in a Dart Server backend. Having said that, if you still want to use this package to do authorized requests from client app, then make sure you are instantiating the Cloudflare class as expected, check docs I mentioned above, check the sample project, and make sure your accountId and token are correct.

developer-zerobug commented 7 months ago

So what should I follow your example folder or whole repository.

luis901101 commented 7 months ago

So what should I follow your example folder or whole repository.

The example project is just a way to explain how the package can be used but it is not a way of showing how the package must be used because that's the dev decision. The package documentation explains and recommends but again it's up to the developer to decide what to do and how to do it. The main recommendation in this package documentation is "not to use the package for authorized requests to Cloudflare's APIs from a client app”.

This package can be used in a Flutter app or a Dart server app because it's a dart package, but the recommended way to use it in an Flutter app is for unsigned requests as explained here: Unsigned api access, any other request you need to do must be signed and therefore must be done by a server side app... in other words for you to properly work with Cloudflare's API will need an intermediate API that handles the authorized requests to Cloudflare's API.

developer-zerobug commented 7 months ago

Hey @luis901101 I want to build a instagram live feature using a cloudflare please guide me. In which as a creator I just go live and viewer watch the stream . I really help me a lot.

luis901101 commented 7 months ago

Regarding Backend:

If you plan to implement your backend using some dart based backend like ServerPod or DartFrog or TheConduit or any other you can use this package to handle all the logic of Cloudflare’s APIs, otherwise you will have to find some library for the stack you plan to use to be able to make the requests to Cloudflare or simply implement that logic yourself at backend side.

Regarding Frontend:

For your Flutter app you can use this package using the Cloudflare.basic() instance as explained in the docs but this will only to do basic unsigned requests like direct Image/Stream uploads, and easy handling of CloudflareImage and CloudflareStreamVideo DTO parsing

Note

You could use this package to handle everything from your Flutter app but as mentioned before this is not recommended because you would have to use your Cloudflare's accountId and token directly from app which is not secure. Unless you ha e some secure way to use your Cloudflare’s credentials from app, don't use this approach.

developer-zerobug commented 7 months ago

Hey @luis901101 in Cloudflare how can I invite a person to join the Live streaming there is any way to do it. In which 2 or 4 people interact with each other.

luis901101 commented 7 months ago

You have to check that in the Cloudflare’s documentation https://developers.cloudflare.com/stream/

developer-zerobug commented 7 months ago

I think it not possibe with cloudflare that in which 2 or more people interact with each other

developer-zerobug commented 6 months ago

I am facing a issue while running a Live HLS Video in my app here is a code for this:

It easily run recorded HLS video but no Live... Any solution for this...

`import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';`

`class Stream1 extends StatefulWidget {
  final String videoUrl;
  final String name;
  const Stream1({Key? key, required this.videoUrl, required this.name})
      : super(key: key);`

@override
  State<StatefulWidget> createState() {
    return _Stream1State();
  }
}
class _Stream1State extends State<Stream1> {
  TargetPlatform? _platform;
  late VideoPlayerController _videoPlayerController1;
  ChewieController? _chewieController1;

  @override
  void initState() {
    super.initState();
    initializePlayer();
  }

  @override
  void dispose() {
    _videoPlayerController1.dispose();
    _chewieController1?.dispose();
    super.dispose();
  }

  Future<void> initializePlayer() async {
    _videoPlayerController1 = VideoPlayerController.networkUrl(
        Uri.parse(widget.videoUrl),
        videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true));

    await _videoPlayerController1.initialize();
    _createChewieController();
    setState(() {});
  }

  void _createChewieController() {
    _chewieController1 = ChewieController(
      videoPlayerController: _videoPlayerController1,
      autoPlay: true,
      looping: true,
      customControls: Column(
        children: <Widget>[
          Align(
            alignment: Alignment.bottomLeft,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(8.0, 24.0, 8.0, 8.0),
              child: Container(
                padding: EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0), // Set border radius
                  color: Colors.black.withOpacity(
                      0.5), 
                ),
                child: Text(
                  '${widget.name}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    // fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
          LinearProgressIndicator(
            value: 0.0, // Hide the progress bar
            valueColor: AlwaysStoppedAnimation<Color>(
                Colors.transparent), 
            backgroundColor:
                Colors.transparent, 
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: AppTheme.light.copyWith(
        platform: _platform ?? Theme.of(context).platform,
      ),
      home: Scaffold(
        body: Center(
            child: Padding(
          padding: const EdgeInsets.all(4.0),
          child: _chewieController1 != null &&
                  _chewieController1!.videoPlayerController.value.isInitialized
              ? Chewie(
                  controller: _chewieController1!,
                )
              : CircularProgressIndicator(),
        )),
      ),
    );
  }
}
`
luis901101 commented 6 months ago

@developer-zerobug that's a question for Stackoverflow or the Chewie or VideoPlayer plugins you are using, but it doesn't seem a problem related to this package