fluttercamerafeedhikvision

Camera Live view (Hikvision) with Flutter


I'm building a Flutter app and I need to connect and view live feed of our Hikvision IP camera inside our building:

I have tried these two libraries but they are very old and I couldn't get them to work:

a) flutter_hk: ^1.0.2 => it does not support 'Null Safety' so I was not able to build my application https://pub.dev/packages/flutter_hk/install

b) remote_ip_camera: ^2.0.0 => it is giving many errors since it is using old widgets like FlatButton & RaisedButton https://pub.dev/packages/remote_ip_camera/example

How this connection can be done from inside my Flutter app and show the camera feed inside a ‘Container’ widget? I have my camera IP address, port, username and password.

I have looked everywhere but couldn’t find any official documentation from Hikvision or any other IP cameras manufacturer.


Solution

  • I used https://pub.dev/packages/flutter_vlc_player to stream rtsp stream of hikvision camera.

    create a widget video_streaming_window.dart with the below code

    import 'package:flutter/material.dart';
    import 'package:flutter_vlc_player/flutter_vlc_player.dart';
    
    class VideoStreamingWindow extends StatefulWidget {
      final String url;
      const VideoStreamingWindow({Key key, this.url}) : super(key: key);
    
      @override
      State<VideoStreamingWindow> createState() => _VideoStreamingWindowState();
    }
    
    class _VideoStreamingWindowState extends State<VideoStreamingWindow> {
      VlcPlayerController _videoPlayerController;
    
      @override
      void initState() {
        super.initState();
        _videoPlayerController = VlcPlayerController.network(
          widget.url,
          autoInitialize: true,
          hwAcc: HwAcc.full,
          autoPlay: true,
          options: VlcPlayerOptions(),
        );
      }
    
      @override
      void dispose() {
        super.dispose();
        _videoPlayerController.pause();
        _videoPlayerController.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return VlcPlayer(
          controller: _videoPlayerController,
          aspectRatio: 16 / 9,
          placeholder: const Center(
              child: CircularProgressIndicator(
            color: Colors.white,
          )),
        );
      }
    }
    
    

    Call it in your UI wherever necessary by VideoStreamingWindow(url: 'rtsp://<username>:<password>@<camera-ip>/ISAPI/Streaming/channels/<channel-no>')