flutter如何实现投屏电视

“在Flutter中如何实现将手机屏幕投屏到电视上？需要用到哪些插件或技术方案？目前尝试过一些方法但效果不太理想，求推荐稳定可靠的实现方案。”

caililin 1楼

Flutter实现投屏主要有两种方式：

使用DLNA/Chromecast协议：

通过dart_upnp或flutter_upnp插件发现局域网内的投屏设备
使用chewie等播放器控件+dart_upnp实现视频推流
需要电视支持DLNA协议

使用第三方SDK：

集成flutter_cast_framework（Chromecast）
通过Google Cast SDK连接设备
适合Android TV/Chromecast设备

实现步骤：

设备发现：扫描局域网寻找可用设备
连接建立：与电视建立投屏会话
内容推送：将媒体URL或本地文件推送到电视
播放控制：实现播放/暂停/进度调节

注意点：

需要网络权限
测试时确保手机和电视在同一WiFi
不同电视厂商协议兼容性可能不同

推荐先尝试DLNA方案，兼容性较好且开源库成熟。

更多关于flutter如何实现投屏电视的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 2楼

在Flutter中实现投屏到电视，主要通过DLNA/Chromecast协议实现。以下是具体实现方案：

1. 使用第三方库推荐

upnp_discovery (推荐)

dependencies:
  upnp_discovery: ^1.1.0

2. 核心实现代码

设备发现

import 'package:upnp_discovery/upnp_discovery.dart';

class DLNAService {
  List<Device> devices = [];
  
  // 搜索设备
  Future<void> discoverDevices() async {
    devices = await UpnpDiscovery.discover(
      deviceType: 'urn:schemas-upnp-org:device:MediaRenderer:1',
      timeout: Duration(seconds: 5)
    );
  }
  
  // 获取设备列表
  List<String> getDeviceList() {
    return devices.map((device) => device.friendlyName).toList();
  }
}

投屏控制

import 'package:http/http.dart' as http;

class ScreenCastService {
  // 投屏视频
  Future<void> castToTV(String deviceUrl, String videoUrl) async {
    final response = await http.post(
      Uri.parse('$deviceUrl/AVTransport/Control'),
      headers: {
        'Content-Type': 'text/xml; charset="utf-8"',
        'SOAPAction': '"urn:schemas-upnp-org:service:AVTransport:1#SetAVTransportURI"'
      },
      body: '''
        <?xml version="1.0" encoding="utf-8"?>
        <s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
          <s:Body>
            <u:SetAVTransportURI xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
              <InstanceID>0</InstanceID>
              <CurrentURI>$videoUrl</CurrentURI>
              <CurrentURIMetaData></CurrentURIMetaData>
            </u:SetAVTransportURI>
          </s:Body>
        </s:Envelope>
      '''
    );
    
    if (response.statusCode == 200) {
      // 投屏成功
      await _play(deviceUrl);
    }
  }
  
  // 播放控制
  Future<void> _play(String deviceUrl) async {
    await http.post(
      Uri.parse('$deviceUrl/AVTransport/Control'),
      headers: {
        'SOAPAction': '"urn:schemas-upnp-org:service:AVTransport:1#Play"'
      },
      body: '''
        <?xml version="1.0" encoding="utf-8"?>
        <s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
          <s:Body>
            <u:Play xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
              <InstanceID>0</InstanceID>
              <Speed>1</Speed>
            </u:Play>
          </s:Body>
        </s:Envelope>
      '''
    );
  }
}

3. 权限配置

Android权限 (android/app/src/main/AndroidManifest.xml)

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE" />

4. 使用示例

class ScreenCastPage extends StatefulWidget {
  @override
  _ScreenCastPageState createState() => _ScreenCastPageState();
}

class _ScreenCastPageState extends State<ScreenCastPage> {
  final DLNAService _dlnaService = DLNAService();
  final ScreenCastService _castService = ScreenCastService();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('投屏到电视')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _searchDevices,
            child: Text('搜索设备'),
          ),
          // 显示设备列表
          // 投屏按钮
        ],
      ),
    );
  }
  
  void _searchDevices() async {
    await _dlnaService.discoverDevices();
    setState(() {});
  }
}

注意事项

网络要求：手机和电视必须在同一WiFi网络下
设备兼容：电视需要支持DLNA或Chromecast协议
视频格式：确保视频格式被目标设备支持
错误处理：添加适当的网络异常处理