Flutter_vlc_player 和 stream URL 树莓派 4（网络摄像头 USB）

Question

I am trying to see the image of a USB camera of my Raspberry pi but I am not able because I do not know how I get my stream URL of Raspberry pi and in addition the code is giving me an error in defaultHeight: 480, defaultWidth: 640 , Can anyone help me with these two questions? thank you!

import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';
void main() {runApp(MyApp());}
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Raspberry Pi 4 stream'),
    );}}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  String _streamUrl;
  VlcPlayerController _vlcPlayerController;
  @override
  void iniState(){
    super.initState();
    _vlcPlayerController = new VlcPlayerController();
  }
  void _incrementCounter() {
    setState(() {
      _streamUrl = 'http://192.168.1.14:8081';
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _streamUrl == null
                ? new Container(
             child: RichText(
               text: TextSpan(
                 children: [
                   TextSpan(
                       text: 'stream closed',
                         style: TextStyle(
                             fontSize: 14,
                             fontWeight: FontWeight.bold,
                             color: Colors.white,
                             background: Paint()..color = Colors.red,
                         ),
                   )
                 ]
               ),),): new VlcPlayer(
              defaultHeight: 480,
              defaultWidth: 640,
              url: _streamUrl,
              controller: _vlcPlayerController,
              placeholder: Container(),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.play_arrow),
      ),);}}

Answer 1

There is no defaultHeight and defaultWidth parameter for VlcPlayer . What you can do is put that widget in a SizedBox to adjust the width and height:

new SizedBox(
    height: 480,
    width: 640,
    child: new VlcPlayer(
        controller: _vlcPlayerController,
        aspectRatio: 4 / 3,
        url: _streamUrl,
        placeholder: Container(),
    ),
)

I am not sure what software or service you are using for the Raspberry Pi side. According to that, you need to enter the stream url inside the app. Make sure that your Raspberry Pi and smartphone are in the same network.

I'm guessing that you used this video to write this code. It also explains that you need to use Motion on the Raspberry Pi side.

Good luck!

Edit : Below is my code so you can try this one;

import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';

class LiveStream extends StatefulWidget {

@override
_LiveStreamState createState() => _LiveStreamState();
}

class _LiveStreamState extends State<LiveStream> {

VlcPlayerController _liveController;
final String _url = "YOUR_STREAM_URL";

@override
void initState() {
    _liveController = new VlcPlayerController(
            onInit: () {}
    );
    super.initState();
}

@override
 Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _back,
    child: Scaffold(
        appBar: AppBar(
            backgroundColor: Colors.red,
            title: Text("Live View"),
            centerTitle: true,
            leading: IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: _back,
            ),
        ),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                    Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Colors.black,
                                style: BorderStyle.solid,
                            ),
                        borderRadius: BorderRadiuscircular(2),
                        ),
                        child: SizedBox(
                            width: 400,
                            height: 300,
                            child: new VlcPlayer(
                                url: _url,
                                controller: _liveController,
                                aspectRatio: 4 / 3,
                                placeholder: Container(
                                    height: 250,
                                    child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.red),),],
                                    )
                                ),
                            ),
                        ),
                    ),
                    RaisedButton.icon(
                        onPressed: _play,
                        icon: Icon(Icons.play_circle_outline),
                        label: Text("Click to watch", style: TextStyle(fontSize: 22),)),
                ],
            ),
        ),
    )
);
}

Future<bool> _back() async {
    if (_liveController.initialized) {
        print("Disposing...");
        _liveController.dispose(); // to ensure disposing of the liveController to free up resources
    }
    Navigator.pop(context);
}

void _play() {
    print(_liveController.initialized);
    if (_liveController.initialized) {
        _liveController.play();
    }
}
}