{"id":4788,"date":"2021-12-08T14:53:58","date_gmt":"2021-12-08T06:53:58","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4788"},"modified":"2021-12-08T19:42:16","modified_gmt":"2021-12-08T11:42:16","slug":"video-embed-with-flutter-app","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/low-code-video-embed\/video-embed-with-flutter-app\/","title":{"rendered":"Low Code Video Embed with Flutter App"},"content":{"rendered":"\n<p>We recommend to:<\/p>\n\n\n\n<ul><li>Use the <code>flutter_inappwebview<\/code> and <code>permission_handler<\/code> modules to handle Media Device permissions in the <code>webview<\/code>. <\/li><li>Update Settings in your iOS and Android projects to match your requirements.<\/li><li>Add the <code>WebView<\/code> component to your code,. Setup properties and fill the room URL and parameters.<\/li><\/ul>\n\n\n\n<p><strong>Note:<\/strong> There is a known issue to show the keyboard in Android <code>webviews<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import 'dart:io';\n\nimport 'package:flutter\/material.dart';\nimport 'package:flutter_inappwebview\/flutter_inappwebview.dart';\nimport 'package:permission_handler\/permission_handler.dart';\n\nvar _lowCodeUrl = \"YOUR-LOW-CODE-EMBED-MEETING-URL\"; \n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    if (Platform.isAndroid) {\n      _lowCodeUrl += '?skipMediaPermissionPrompt';\n    }\n    return const MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: InAppWebViewPage(),\n    );\n  }\n}\n\nclass InAppWebViewPage extends StatefulWidget {\n  const InAppWebViewPage();\n\n  @override\n  State&lt;InAppWebViewPage&gt; createState() =&gt; _InAppWebViewPageState();\n}\n\nclass _InAppWebViewPageState extends State&lt;InAppWebViewPage&gt; {\n\n  @override\n\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text(\"Meeting\")),\n      body: Column(children: &lt;Widget&gt;[\n        Expanded(\n          child: InAppWebView(\n            initialUrlRequest: URLRequest(url: Uri.parse(_lowCodeUrl)),\n            initialOptions: InAppWebViewGroupOptions(\n              crossPlatform: InAppWebViewOptions(\n                mediaPlaybackRequiresUserGesture: false,\n              ),\n              ios: IOSInAppWebViewOptions(\n                allowsInlineMediaPlayback: true,\n              )\n            ),\n            androidOnPermissionRequest: (\n              InAppWebViewController controller,\n              String origin, List&lt;String&gt; resources) async {\n                await Permission.camera.request();\n                await Permission.microphone.request();\n                return PermissionRequestResponse(\n                  resources: resources,\n                  action: PermissionRequestResponseAction.GRANT\n                );\n              },\n            ),\n          ),\n        ]\n      )\n    );\n  }\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>We recommend to: Use the flutter_inappwebview and permission_handler modules to handle Media Device permissions in the webview. Update Settings in your iOS and Android projects to match your requirements. Add the WebView component to your code,. Setup properties and fill the room URL and parameters. Note: There is a known issue to show the keyboard in Android webviews. import &#8216;dart:io&#8217;; import &#8216;package:flutter\/material.dart&#8217;; import &#8216;package:flutter_inappwebview\/flutter_inappwebview.dart&#8217;; import &#8216;package:permission_handler\/permission_handler.dart&#8217;; var _lowCodeUrl = &#8220;YOUR-LOW-CODE-EMBED-MEETING-URL&#8221;;&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2363,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"We recommend to: Use the flutter_inappwebview and permission_handler modules to handle Media Device permissions in the webview. Update Settings in your iOS and Android projects to match your requirements. Add the WebView component to your code,. Setup properties and fill the room URL and parameters. Note: There is a known issue to show the keyboard&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4788"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=4788"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4788\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/2363"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}