110316118/topicApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增監視器畫面全螢幕

Browse Source
This commit is contained in:
JingChiang 2024-09-22 16:52:41 +08:00
parent ab0c259231
commit 36b2d7c151
1 changed files with 196 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
lib/MessagePage.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mysql_client/mysql_client.dart';
import 'package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MessagePage extends StatefulWidget {
@ -13,6 +15,7 @@ class MessagePage extends StatefulWidget {
class _MessagePageState extends State<MessagePage> {
late WebViewController _webViewController;
late int _cameraId = 0;
@override
void initState() {
@ -56,8 +59,9 @@ class _MessagePageState extends State<MessagePage> {
Container(
height: 240,
width: double.infinity,
// TODO: 如果用http需要分別設定ios, android權限
child: WebViewWidget(
child: Stack(
children: [
WebViewWidget(
controller: _webViewController
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
@ -75,8 +79,7 @@ class _MessagePageState extends State<MessagePage> {
print(error.description);
},
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith(
'http://203.64.84.154:8088/video_feed')) {
if (request.url.startsWith('http://203.64.84.154:8088/video_feed')) {
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
@ -85,6 +88,30 @@ class _MessagePageState extends State<MessagePage> {
)
..loadRequest(Uri.parse('http://203.64.84.154:8088/0')),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.all(16.0),
// Adjust padding as needed
child: SizedBox(
width: 45.0, // Set custom width
height: 45.0, // Set custom height
child: FloatingActionButton(
onPressed: () {
// Handle zoom-in action
pushWithoutNavBar(
context,
MaterialPageRoute(
builder: (context) => WebViewPage(_cameraId),
));
},
child: Icon(Icons.zoom_in),
),
),
),
),
],
),
),
Text(
'即時畫面',
@ -119,6 +146,7 @@ class _MessagePageState extends State<MessagePage> {
color: Colors.white,
child: InkWell(
onTap: () {
_cameraId = camera_id;
_webViewController.loadRequest(Uri.parse('http://203.64.84.154:8088/$camera_id'));
},
child: Center(
@ -135,3 +163,92 @@ class _MessagePageState extends State<MessagePage> {
);
}
}
class WebViewPage extends StatefulWidget {
final int _cameraId;
WebViewPage(this._cameraId);
@override
_WebViewPageState createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
late WebViewController _webViewController;
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
_webViewController = WebViewController();
}
@override
void dispose() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
WebViewWidget(
controller: _webViewController
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
// Update loading bar.
},
onPageStarted: (String url) {},
onPageFinished: (String url) {},
onHttpError: (HttpResponseError error) {
print("httpError");
},
onWebResourceError: (WebResourceError error) {
print("httpResourceError");
print(error.description);
},
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith('http://203.64.84.154:8088/video_feed')) {
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
)
..loadRequest(Uri.parse('http://203.64.84.154:8088/${widget._cameraId}')),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.all(16.0),
child: SizedBox(
width: 45.0,
height: 45.0,
child: FloatingActionButton(
backgroundColor: Color(0xFFF5E3C3),
onPressed: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios),
),
),
),
)
],
));
}
}