Flutter WebRTC 中如何在 Safari 和 iOS 上解决 getUserMedia 难题？

2024-03-29 20:19:29

Flutter WebRTC 中解决 Safari 和 iOS 设备上 getUserMedia 疑难

问题解析

在 Flutter WebRTC 应用中，在 macOS Safari 和 iOS Chrome/Safari 上调用 getUserMedia 方法时，可能会遇到一个棘手的问题：无法提示用户授权摄像头权限，导致应用程序陷入困境。

这个难题的根源在于 getUserMedia 方法在这些平台上的特定实现。Flutter 采用了 webkitGetUserMedia 方法，它似乎适用于 Safari，但由于 Apple 的限制而无法正常工作。

解决方法

针对该问题的灵光一现解决方案是使用 askPermission 方法，它在 Flutter WebRTC 1.0.0 中闪亮登场。askPermission 方法将巧妙地向用户发出授权请求，从而绕过 Safari 和 iOS 设备上的障碍。

使用指南

使用 askPermission 方法的步骤轻而易举：

确保你的 Flutter WebRTC 版本达到 1.0.0 或以上。
在调用 getUserMedia 之前，用 askPermission 方法征求用户的许可。
将适当的媒体约束传递给 getUserMedia 方法。

以下是使用 askPermission 方法的代码范例：

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

// 向用户申请权限
await Permission.camera.request();

// 现在调用 getUserMedia
var stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);