在抖动的Webview上访问相机 [英] Access the camera on flutter webview

问题描述

我有用于显示用户摄像头的网页，如何在抖动的Webview中访问摄像头?

I have web Page to Show user camera, how I can access the camera on the flutter webview?

我尝试使用以下URL进行此操作:" https://webrtc.github.io/samples/src/content/getusermedia/gum/"，但返回getUserMedia错误:NotAllowedError

I try to do that with this URL "https://webrtc.github.io/samples/src/content/getusermedia/gum/" but return getUserMedia error: NotAllowedError

推荐答案

您可以尝试我的插件 flutter_inappwebview .

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

To request permissions about the camera and microphone, you can use the permission_handler plugin.

此外，它具有用于Android的 androidOnPermissionRequest 事件，该事件是在WebView请求访问指定资源的权限时触发的事件(即Android本机

Also, it has the androidOnPermissionRequest event for Android, that is an event fired when the WebView is requesting permission to access the specified resources (that is the Android native WebChromeClient.onPermissionRequest event).

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

An example of using WebRTC that works on Android:

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 {
  WidgetsFlutterBinding.ensureInitialized();

  await Permission.camera.request();
  await Permission.microphone.request();

  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

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

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController _webViewController;

  @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",
                      initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          mediaPlaybackRequiresUserGesture: false,
                          debuggingEnabled: true,
                        ),
                      ),
                      onWebViewCreated: (InAppWebViewController controller) {
                        _webViewController = controller;
                      },
                      androidOnPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
                        return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
                      }
                  ),
                ),
              ),
            ]))
    );
  }
}

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

This example uses the room 158489234 on https://appr.tc/, that is a video chat demo app based on WebRTC (https://github.com/webrtc/apprtc). To get it work, you need to set the option mediaPlaybackRequiresUserGesture to false.

此外，您需要在 AndroidManifest.xml 中添加这些权限:

Also, you need to add these permissions in the 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" />

这篇关于在抖动的Webview上访问相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！