Camera Live view (Hikvision) with Flutter

Question

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.

score 1 · Accepted Answer · answered Nov 21 '22 at 08:36

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>')

Camera Live view (Hikvision) with Flutter

1 Answers1