Flutter Web请求摄像头权限

Question

我需要在web应用程序中使用相机。所以我想如果用户拒绝在他/她的浏览器上使用摄像头，我会再次请求它允许摄像头权限。

这是我的代码

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

Answer 2

这就是您请求相机/音频权限的方式。

await html.window.navigator.getUserMedia(audio: true, video: true);

然后检查许可

final status =
await html.window.navigator.permissions?.query({"name": "camera"});