Theo
Theo

Reputation: 23

Display chunked mp4 from a livestream in Flutter Web

I am developing a Flutter web application that needs to display a live stream from a HoloLens headset. The headset sends chunks of mp4 data. I have tried setting up a live stream solution but I get the following error: enter image description here

Here is the function to get the data:

getVideo3() async {
String username = 'username';
String password = 'password';
String basicAuth =
    'Basic ' + base64.encode(utf8.encode('$username:$password'));
//print('1');
var request = html.HttpRequest();
request.open('GET',
    'https://' + '158.37.238.9' + '/api/holographic/stream/live.mp4');
request.setRequestHeader('authorization', basicAuth);

final completer = Completer<VideoPlayerController>();
request.onProgress.listen((html.ProgressEvent event) {
  //final response = utf8.decode(request.response);

  final blob = html.Blob([request.response]);
  final url = html.Url.createObjectUrl(blob);
  final controller = VideoPlayerController.network(url);
  controller.initialize().then((_) {
    completer.complete(controller);
  });
});
request.send();

final controller = await completer.future;

setState(() {
  _controller?.dispose();
  _controller = controller;
});
}

And here is the rest of the code:

class StreamTest extends StatefulWidget {
  const StreamTest({super.key});

  @override
  State<StreamTest> createState() => _StreamTestState();
}

class _StreamTestState extends State<StreamTest> {
  VideoPlayerController? _controller; //Fjernet null
  Future<void>? videoPlayerFuture;

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

    //getVideo();
    getVideo3();
  }
  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
              onPressed: ((() => Navigator.of(context).pop())),
              icon: Icon(
                Icons.arrow_back,
                color: Colors.white,
              )),
          title: Text('Livestream'),
        ),
        body: FutureBuilder(
            future: videoPlayerFuture,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                print('connection state done');
                return AspectRatio(
                  aspectRatio: _controller!.value.aspectRatio,
                  child: VideoPlayer(_controller!),
                );
              } else {
                return Center(child: CircularProgressIndicator());
              }
            }),
      ),
    );
  }
}

Additional info: Using the HTML package and video_player package

Upvotes: 0

Views: 354

Answers (0)

Related Questions