Request Camera Permission Flutter Web

Question

I need to use camera in my web application. so i want if user denied using camera on his/her browser i ask it again to allow camera permission.

this is my code

import 'package:universal_html/html.dart' as html;


      RaisedButton(
            onPressed: () {
              var permissions = Map<String,String>();
              permissions['name']= 'camera';
              html.window.navigator.permissions.request(permissions).then((value){
                print((value).state);
              });
            },
            child: Text('Grant Permission'),
          )

but when i click on 'Grant Permission' button it logs this error

html_dart2js.dart:25368 Uncaught (in promise) TypeError: this.request is not a function
at Permissions.[dartx.request] (html_dart2js.dart:25368)
at web_camera_preview_screen.dart:157
at Generator.next (<anonymous>)
at runBody (async_patch.dart:86)
at Object._async [as async] (async_patch.dart:125)
at ink_well.InkWell.new.<anonymous> (web_camera_preview_screen.dart:154)
at _InkResponseState.new.[_handleTap] (ink_well.dart:779)
at ink_well.dart:862
at tap.TapGestureRecognizer.new.invokeCallback (recognizer.dart:182)
at tap.TapGestureRecognizer.new.handleTapUp (tap.dart:504)
at tap.TapGestureRecognizer.new.[_checkUp] (tap.dart:282)
at tap.TapGestureRecognizer.new.handlePrimaryPointer (tap.dart:217)
at tap.TapGestureRecognizer.new.handleEvent (recognizer.dart:475)
at pointer_router.PointerRouter.new.[_dispatch] (pointer_router.dart:76)
at pointer_router.dart:122
at LinkedMap.new.forEach (linked_hash_map.dart:23)
at pointer_router.PointerRouter.new.[_dispatchEventToRoutes] (pointer_router.dart:120)
at pointer_router.PointerRouter.new.route (pointer_router.dart:106)
at binding$5.WidgetsFlutterBinding.new.handleEvent (binding.dart:218)
at binding$5.WidgetsFlutterBinding.new.dispatchEvent (binding.dart:198)
at binding$5.WidgetsFlutterBinding.new.[_handlePointerEvent] (binding.dart:156)
at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (binding.dart:102)
at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (binding.dart:86)
at Object._invoke1 (window.dart:590)
at _engine.EngineWindow.new.invokeOnPointerDataPacket (window.dart:238)
at _engine.PointerBinding.__.[_onPointerData] (pointer_binding.dart:129)
at pointer_binding.dart:457
at pointer_binding.dart:418
at HTMLElement.<anonymous> (pointer_binding.dart:195)

Answer 1

According to information from MDN, permissions API is still experimental and its request method marked as non-standart, but we can use query method:

RaisedButton(
  child: Text("Request permission"),
  onPressed: () async {
    final perm = await html.window.navigator.permissions.query({"name": "camera"});
    if (perm.state == "denied") {
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text("Oops! Camera access denied!"),
        backgroundColor: Colors.orangeAccent,
      ));
      return;
    }
    final stream = await html.window.navigator.getUserMedia(video: true);
    // ...
  },
),