html - 请求相机权限 Flutter Web

Question

我需要在我的网络应用程序中使用摄像头。所以我想如果用户拒绝在他/她的浏览器上使用相机，我会再次询问是否允许相机许可。

这是我的代码

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

但是当我点击“授予权限”按钮时，它会记录这个错误

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

根据MDN的信息, permissions API 仍然是实验性的，它的 request 方法被标记为非标准的，但是我们可以使用 query 方法:

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);
    // ...
  },
),