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.
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>')
Related
I want to build a flutter project, in that
for windows using fluent ui
for macos using macos ui and
for mobile apps using material ui.
Inner content will be the same for all platform just the layout and features makes difference.
so can i do that, and if yes then whats the approch...
I have tried to build some demo projects, but as soon as I integrate another platforms ui or their features, the project gets crash.
I expect the flow in that I can make platform according ui seprate for all platforms and the screens will be in common.
This question may be answered with personal opinions but anyway , for create multiplatform app in flutter , your difficult task is handle UI on multi-screen size and responsive it .
you can using responsive_builder package and flutter_screenutil .
in some conditions need another way to use an package .
for using responsive_builder on web and android device use this trick:
main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Builder(builder: (context) {
return kIsWeb
? const MainWidget()
: const ScreenUtilsWidget(widget: MainWidget());
});
}
}
class ScreenUtilsWidget extends StatelessWidget {
const ScreenUtilsWidget({Key? key, required this.widget}) : super(key: key);
final Widget widget;
#override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(360, 690),
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) {
return widget;
});
}
}
class MainWidget extends StatelessWidget {
const MainWidget({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
// blablabla
);
}
}
and for using in widgets do like below:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
ScreenTypeLayout(
// you can define custom breakpoint for any widget .
breakpoints: MainSizes.digitalProfileBreakpoints,
desktop: Stack(//blablabla),
tablet: Stack((//blablabla),
mobile: Stack((//blablabla),
)
],
)),
);
}
You maybe need the dart:html handles in all app, but this file are limited on the web (or You need to do something different on the web than on an Android device!).
you can create 3 file and handles this mode.
file web.dart :
import 'dart:html' as html;
void reload() {
html.window.location.reload();
}
String cookie = "";
file native.dart :
void reload() {}
String cookie = "";
file switch_native_web.dart :
import 'native.dart' if (dart.library.html) 'web.dart' as switch_value;
class SwitchNativeWeb {
static String cookie = switch_value.cookie;
static void reloadWeb() {
switch_value.reload();
}
}
I come from the web dev world. I have designed a Flutter app that needs to grab some JSON from the web very early on. I want my first screen to show up, and while it is being drawn, behind the scenes I want the JSON fetch to happen. There is a start button on Page 1 that will be disabled until the JSON is fetched. (But Page 1 will have some text info to keep the reader engaged until the fetch happens.)
Where would I stick the JSON fetch? Can I put it in initState of Page 1? Or can I initiate a call at the very start of main at the root of the app? Or somewhere else?
FWIW I use Provider for state management, if that helps?
Thanks a ton!
Calling it in the initState is best since your widgets still build. Since there will be a state change, make sure you use a stateful widget. Also, don't forget to call setState to re-enable the button. Example code:
class FirstPage extends StatefulWidget {
const FirstPage({Key? key}) : super(key: key);
#override
State<FirstPage> createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
#override
void initState() {
super.initState();
jsonFetch();
}
void jsonFetch() {
// your functionality here
// on complete call:
/*
setState(() {
isJsonFetched = true;
});
*/
}
void doSomethingOnPressed(){
// Your functionality here
}
bool isJsonFetched = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: ElevatedButton(
onPressed: (){
isJsonFetched
? doSomethingOnPressed()
:null;
},
child: Text('Press Me')
)
)
);
}
}
What is the solution of initializing things inside consumerWidget as because the initState method is not overridable here?
Riverpod v2.1.3
You can use ConsumerStatefulWidget and ConsumerState
final helloWorldProvider = Provider((_) => 'Hello world');
class RiverpodExample extends ConsumerStatefulWidget {
const RiverpodExample({super.key});
#override
ConsumerState<RiverpodExample> createState() => _RiverpodExampleState();
}
class _RiverpodExampleState extends ConsumerState<RiverpodExample> {
#override
void initState() {
super.initState();
final value = ref.read(helloWorldProvider);
print(value); // Hello world
}
#override
Widget build(BuildContext context) {
final value = ref.watch(helloWorldProvider);
return Text(value); // Hello world
}
}
I'm not totally sure how to answer your question as I have not worked with ConsumerWidget. I'd presume the idea is to keep most of your state in providers.
However, I would like to recommend using hooks_riverpod alongside flutter_hooks (same developer).
This makes keeping state local to the widget simple and also provides easy access to providers.
For example:
class Example extends HookWidget {
const Example({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
final test = useProvider(Test.provider());
final controller = useTextEditingController();
final loading = useState(false);
final buttonText = useState('Change me!');
return Column(
children: [
TextField(controller: controller),
if (!loading) RaisedButton(
onPressed: () async {
loading.value = true;
await Future.delayed(const Duration(seconds: 1));
buttonText.value = controller.text;
loading.value = false;
}
child: Text(buttonText.value),
),
if (loading) const CircularProgressIndicator(),
// Do something with providers, etc.
],
),
);
}
Just a quick example, but there are plenty of resources (flutter_hooks, hooks_riverpod) to help you along. Also, check out examples from the developer on riverpod hooks usage.
I may be late but with the upcoming 1.0.0 of Riverpod you will be able to use https://pub.dev/documentation/flutter_riverpod/1.0.0-dev.2/flutter_riverpod/ConsumerStatefulWidget-class.html and https://pub.dev/documentation/flutter_riverpod/1.0.0-dev.2/flutter_riverpod/ConsumerState-class.html, which does exactly what you want.
I have a login screen which uses phone authentication for creating account.
I have used Firebase Phone auth for login and also have stored one number for testing purpose.
But don't know how to pass the number and OTP to generate Pre Launch Report.
They are asking for Username, Username Resource ID, Password , Password Resource ID.
Where to find Resource ID for username and password fields in flutter code.
In the Google play console at the bottom of the left
Click on App content
Click on App access
Click on manage
Click on add new instructions
Add your all details here it should be test accounts
Try this :
dependencies:
flutter_runtime_env: ^0.0.4
Example:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_runtime_env/flutter_runtime_env.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isInFirebaseTestLab = false;
#override
void initState() {
super.initState();
initPlatformState();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlatformState() async {
var result = await inFirebaseTestLab();
setState(() {
_isInFirebaseTestLab = result;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('is in FirebaseTest Lab'),
),
body: Center(
child: Text('is in FirebaseTest Lab: $_isInFirebaseTestLab\n'),
),
),
);
}
}
i am facing an issue with Pageview and Futurebuild, that every-time i switch between first page and second page the page will be rebuilt again...it will call new data from API even if there is nothing new...anyone can help me in this
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
PageController pageController = PageController(keepPage: false);
#override
void initState() {
super.initState();
}
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
final homePage = HomeProjects(pageController: pageController);
final portfolioPage = Portfolio(pageController: pageController);
return Scaffold(
body: ScrollConfiguration(
behavior: MyBehavior(),
child: PageView(reverse: true, controller: pageController,
//physics: NeverScrollableScrollPhysics(),
children: [
homePage,
portfolioPage,
]),
),
);
}
}
If you are only making HTTP calls inside your pages that's a desired outcome. You'll need to cache the responses to avoid repeated network calls.
Moving api calls to initState is not something I would personally do - the data fetched on first page creation may become outdated without you knowing it.
Well, you build your pages every time build is called.
If you don't want that, move the lines that actually build the pages to a time and place where they will be called only once. initState might be a good place.