在抖动的Webview上访问相机

时间:2019-06-06 13:13:28

标签: flutter dart

我有一个网页可以显示用户相机,如何在抖动的Webview中访问相机?

我尝试使用此网址“ https://webrtc.github.io/samples/src/content/getusermedia/gum/”来执行此操作,但返回getUserMedia错误:NotAllowedError

1 个答案:

答案 0 :(得分:1)

您可以尝试使用我的插件flutter_inappbrowser编辑:它已重命名为flutter_inappwebview)。

要请求有关摄像头和麦克风的权限,可以使用permission_handler插件。

使用可在Android上使用的WebRTC的示例:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  await PermissionHandler().requestPermissions([PermissionGroup.camera, PermissionGroup.microphone]);
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("InAppWebView")
      ),
      body: Container(
          child: Column(children: <Widget>[
            Expanded(
              child: Container(
                child: InAppWebView(
                  initialUrl: "https://appr.tc/r/158489234",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                    inAppWebViewOptions: InAppWebViewOptions(
                      mediaPlaybackRequiresUserGesture: false,
                      debuggingEnabled: true,
                    ),
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {

                  },
                  onLoadStop: (InAppWebViewController controller, String url) {

                  },
                  onPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
                    print(origin);
                    print(resources);
                    return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
                  }
                ),
              ),
            ),
          ]))
    );
  }
}

此示例使用https://appr.tc/上的158489234房间,这是一个基于WebRTC(https://github.com/webrtc/apprtc)的视频聊天演示应用程序。 要使其正常工作,您需要将选项mediaPlaybackRequiresUserGesture设置为false并实现onPermissionRequest事件(对于Android)。

此外,您需要在AndroidManifest.xml中添加以下权限:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />