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 , 誰能幫我解決這兩個問題？ 謝謝你！

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

VlcPlayer沒有defaultHeight和defaultWidth參數。 您可以做的是將該小部件放在 SizedBox 中以調整寬度和高度：

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

我不確定您在 Raspberry Pi 端使用什么軟件或服務。 據此，您需要在應用程序中輸入 stream url。 確保您的 Raspberry Pi 和智能手機在同一個網絡中。

我猜你是用這個視頻來寫這段代碼的。 它還解釋了您需要在 Raspberry Pi 端使用Motion 。

祝你好運！

編輯：下面是我的代碼，所以你可以試試這個；

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();
    }
}
}