How to put live stream video inside the container using flutter?

Viewed 1636

I am new in flutter and i read some stuffed about it, i have a medium knowledge about it, my question is , How do i put live video from the api ?

import 'package:flutter_webrtc/flutter_webrtc.dart';

.....
final videocolumn = Container(
    padding: EdgeInsets.only(top: 5),
    width: globals.screenWidth * 0.96,
    decoration: BoxDecoration(
        borderRadius:BorderRadius.circular(20),
        border: Border.all(color: Colors.grey,width: 1.0,),
        ),
    child: Column(
      children: [
          Container(
            height: globals.screenHeight * 0.25,
             // get the live video from the api
          ),
       ]
    ),
);

pubspec.yaml

dependencies:
  http: ^0.12.2
  flutter_section_table_view: ^1.0.3
  page_transition: ^1.1.7+6
  path_provider: ^1.6.24
  cupertino_icons: ^1.0.0
  flutter_webrtc: ^0.5.8
  flutter:
    sdk: flutter

Please give an example using my code

just like this

enter image description here

3 Answers

You can use the chewie plugin

    import 'package:chewie/chewie.dart';
final videoPlayerController = VideoPlayerController.network(
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');

await videoPlayerController.initialize();

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = Chewie(
  controller: chewieController,
);

dont forget to dispose the controller widget

    @override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

/* To create and initialize the VideoPlayerController do the following:

  1. Create a StatefulWidget with a companion State class

  2. Add a variable to the State class to store the VideoPlayerController

  3. Add a variable to the State class to store the Future returned from

  4. VideoPlayerController.initialize Create and initialize the controller in the initState method

  5. Dispose of the controller in the dispose method */

     import 'dart:async';
     import 'package:flutter/material.dart';
     import 'package:video_player/video_player.dart';
    
     void main() => runApp(VideoPlayerApp());
    
     class VideoPlayerApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           title: 'Video Player Demo',
           home: VideoPlayerScreen(),
         );
       }
     }
    
     class VideoPlayerScreen extends StatefulWidget {
       VideoPlayerScreen({Key key}) : super(key: key);
    
       @override
       _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
     }
    
     class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
       VideoPlayerController _controller;
       Future<void> _initializeVideoPlayerFuture;
    
       @override
       void initState() {
         // Create and store the VideoPlayerController. The VideoPlayerController
         // offers several different constructors to play videos from assets, files,
         // or the internet.
         _controller = VideoPlayerController.network(
           'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
         );
    
         // Initialize the controller and store the Future for later use.
         _initializeVideoPlayerFuture = _controller.initialize();
    
         // Use the controller to loop the video.
         _controller.setLooping(true);
    
         super.initState();
       }
    
       @override
       void dispose() {
         // Ensure disposing of the VideoPlayerController to free up resources.
         _controller.dispose();
    
         super.dispose();
       }
    
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: Text('Butterfly Video'),
           ),
           // Use a FutureBuilder to display a loading spinner while waiting for the
           // VideoPlayerController to finish initializing.
           body: FutureBuilder(
             future: _initializeVideoPlayerFuture,
             builder: (context, snapshot) {
               if (snapshot.connectionState == ConnectionState.done) {
                 // If the VideoPlayerController has finished initialization, use
                 // the data it provides to limit the aspect ratio of the video.
                 return AspectRatio(
                   aspectRatio: _controller.value.aspectRatio,
                   // Use the VideoPlayer widget to display the video.
                   child: VideoPlayer(_controller),
                 );
               } else {
                 // If the VideoPlayerController is still initializing, show a
                 // loading spinner.
                 return Center(child: CircularProgressIndicator());
               }
             },
           ),
    

    /* Play and pause the video By default, the video starts in a paused state. To begin playback, call the play() method provided by the VideoPlayerController. To pause playback, call the pause() method. For this example, add a FloatingActionButton to your app that displays a play or pause icon depending on the situation. When the user taps the button, play the video if it’s currently paused, or pause the video if it’s playing. */

           floatingActionButton: FloatingActionButton(
             onPressed: () {
               // Wrap the play or pause in a call to `setState`. This ensures the
               // correct icon is shown.
               setState(() {
                 // If the video is playing, pause it.
                 if (_controller.value.isPlaying) {
                   _controller.pause();
                 } else {
                   // If the video is paused, play it.
                   _controller.play();
                 }
               });
             },
             // Display the correct icon depending on the state of the player.
             child: Icon(
               _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
             ),
           ), // This trailing comma makes auto-formatting nicer for build methods.
         );
       }
     }
    

Here's the complete code and example for playing videos using an API. I think this should help you.

Related