flutter如何实现webrtc画中画功能

在Flutter中如何实现WebRTC的画中画功能？我正在开发一个视频会议应用，需要在主视频流上方显示一个小窗口作为画中画效果。尝试过使用flutter_webrtc插件，但不知道如何控制视频流的层级和位置。是否有现成的解决方案或需要自定义实现？具体应该如何操作？

2 回复

在Flutter中实现WebRTC画中画功能，需使用flutter_webrtc插件并结合picture_in_picture功能。通过创建独立的OverlayEntry或使用系统PiP API（Android 8.0+、iOS 14+）实现小窗播放。

更多关于flutter如何实现webrtc画中画功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现 WebRTC 画中画（Picture-in-Picture, PiP）功能，可以通过结合 flutter_webrtc 插件和画中画 API（如 Android 的 PictureInPicture 或 iOS 的 AVPictureInPictureController）来实现。以下是实现步骤和示例代码：

实现步骤

  1. 集成依赖：在 pubspec.yaml 中添加 flutter_webrtc 插件。
  2. 配置平台权限：
    • Android：在 AndroidManifest.xml 中声明画中画支持，并设置 android:supportsPictureInPicture="true"。
    • iOS：在 Info.plist 中启用后台模式（如 audio 和 video）。
  3. 创建 WebRTC 视频渲染：使用 RTCVideoView 显示本地或远程视频流。
  4. 触发画中画模式：通过平台通道调用原生画中画 API，或使用 video_player 插件（如果仅播放视频）。

示例代码（Android 为主）

1. 添加依赖

dependencies:
  flutter_webrtc: ^0.9.0

2. 配置 AndroidManifest.xml

<activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true"
  android:configChanges="orientation|screenSize|smallestScreenSize|screenLayout"
  ... />

3. Flutter 代码实现

import 'package:flutter/material.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:flutter/services.dart';

class WebRTCVideoScreen extends StatefulWidget {
  @override
  _WebRTCVideoScreenState createState() => _WebRTCVideoScreenState();
}

class _WebRTCVideoScreenState extends State<WebRTCVideoScreen> {
  late RTCPeerConnection _peerConnection;
  late RTCVideoRenderer _localRenderer;
  late RTCVideoRenderer _remoteRenderer;
  MediaStream? _localStream;

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

  void _initRenderers() async {
    _localRenderer = RTCVideoRenderer();
    _remoteRenderer = RTCVideoRenderer();
    await _localRenderer.initialize();
    await _remoteRenderer.initialize();
  }

  void _createPeerConnection() async {
    // 创建 WebRTC 连接并获取本地流（示例）
    _peerConnection = await createPeerConnection(configuration);
    _localStream = await navigator.mediaDevices.getUserMedia({'audio': true, 'video': true});
    _localRenderer.srcObject = _localStream;
    _peerConnection.addStream(_localStream!);
    
    // 设置远程流渲染
    _peerConnection.onAddStream = (stream) {
      _remoteRenderer.srcObject = stream;
    };
  }

  // 触发画中画模式（Android）
  void _enterPipMode() {
    if (defaultTargetPlatform == TargetPlatform.android) {
      const platform = MethodChannel('your_channel_name');
      platform.invokeMethod('enterPipMode');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: RTCVideoView(_remoteRenderer), // 主视频
          ),
          Container(
            height: 150,
            child: RTCVideoView(_localRenderer), // 画中画小窗口
          ),
          ElevatedButton(
            onPressed: _enterPipMode,
            child: Text('Enter PiP'),
          ),
        ],
      ),
    );
  }

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

4. Android 原生代码（Kotlin）

在 MainActivity.kt 中处理画中画逻辑：

import android.app.PictureInPictureParams
import android.util.Rational
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity: FlutterActivity() {
    private val CHANNEL = "your_channel_name"

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
            call, result ->
            if (call.method == "enterPipMode") {
                enterPipMode()
                result.success(null)
            } else {
                result.notImplemented()
            }
        }
    }

    private fun enterPipMode() {
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            val rational = Rational(16, 9) // 视频宽高比
            val params = PictureInPictureParams.Builder()
                .setAspectRatio(rational)
                .build()
            enterPictureInPictureMode(params)
        }
    }
}

注意事项

  • iOS 实现：需使用 AVPictureInPictureController，但 flutter_webrtc 目前对 iOS 画中画支持有限，可能需要自定义原生代码。
  • 权限处理：确保应用有摄像头和麦克风权限。
  • 兼容性：画中画功能在 Android 8.0（API 26）及以上版本支持。

通过以上步骤，可以在 Flutter 中结合 WebRTC 实现画中画功能。根据实际需求调整视频流和 UI 布局。

回到顶部