Flutter 直播

Posted

技术标签:

【中文标题】Flutter 直播【英文标题】:Flutter live streaming 【发布时间】:2019-07-26 01:30:56 【问题描述】:

我正在尝试构建一个移动应用程序,该应用程序从设备的摄像头流式传输视频并将其实时发送到服务器。此外,移动设备应该能够播放从服务器接收到的实况视频。

我正在 Flutter 中构建应用程序,但似乎无法在 Flutter 中找到使用 HLS/RTSL/WebRTC/等的有据可查的库/包。

我应该使用字节流并制作自定义解决方案,还是我可以使用官方包来完成这项工作?

提前感谢您!

【问题讨论】:

Is it possible to stream a video with flutter camera plugin?的可能重复 嘿,你找到解决办法了吗? 我找到了一个用于此目的的包,用于 android 本机代码的 dart 包装器 github.com/espresso3389/flutter_rtmp_publisher。这里是原生android库github.com/TakuSemba/RtmpPublisher如果你已经找到了解决方案,请把它放在这里只是为了权衡选项。 我认为这会有所帮助:youtu.be/tPcuBo5QAW4 它似乎对@devDeejay 没有帮助,因为它展示了如何从网络流中播放视频(除非最后还有其他内容)。 【参考方案1】:

对于 WebRTC 请试试这个包 flutter_webrtc https://github.com/cloudwebrtc/flutter-webrtc 以及更多示例链接 https://github.com/cloudwebrtc/flutter-webrtc-demo/

import 'package:flutter/material.dart';
import 'package:flutter_webrtc/webrtc.dart';
import 'dart:core';

/**
 * getUserMedia sample
 */
class GetUserMediaSample extends StatefulWidget 
  static String tag = 'get_usermedia_sample';

  @override
  _GetUserMediaSampleState createState() => new _GetUserMediaSampleState();


class _GetUserMediaSampleState extends State<GetUserMediaSample> 
  MediaStream _localStream;
  final _localRenderer = new RTCVideoRenderer();
  bool _inCalling = false;

  @override
  initState() 
    super.initState();
    initRenderers();
  

  @override
  deactivate() 
    super.deactivate();
    if (_inCalling) 
      _hangUp();
    
  

  initRenderers() async 
    await _localRenderer.initialize();
  

  // Platform messages are asynchronous, so we initialize in an async method.
  _makeCall() async 
    final Map<String, dynamic> mediaConstraints = 
      "audio": true,
      "video": 
        "mandatory": 
          "minWidth":'640', // Provide your own width, height and frame rate here
          "minHeight": '480',
          "minFrameRate": '30',
        ,
        "facingMode": "user",
        "optional": [],
      
    ;

    try 
      var stream = await navigator.getUserMedia(mediaConstraints);
      _localStream = stream;
      _localRenderer.srcObject = _localStream;
     catch (e) 
      print(e.toString());
    
    if (!mounted) return;

    setState(() 
      _inCalling = true;
    );
  

  _hangUp() async 
    try 
      await _localStream.dispose();
      _localRenderer.srcObject = null;
     catch (e) 
      print(e.toString());
    
    setState(() 
      _inCalling = false;
    );
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('GetUserMedia API Test'),
      ),
      body: new OrientationBuilder(
        builder: (context, orientation) 
          return new Center(
            child: new Container(
              margin: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: RTCVideoView(_localRenderer),
              decoration: new BoxDecoration(color: Colors.black54),
            ),
          );
        ,
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _inCalling ? _hangUp : _makeCall,
        tooltip: _inCalling ? 'Hangup' : 'Call',
        child: new Icon(_inCalling ? Icons.call_end : Icons.phone),
      ),
    );
  

【讨论】:

我们可以对音频做同样的事情吗?就像我的意思是歌曲一样? @JalakamKiran,您在寻找音频流吗?请参考***.com/a/59405990/2179571 @chunhunghan 我正在寻找流屏幕录制的解决方案,有什么建议吗?提前致谢。 @chunhunghan 请分享您对我上次查询的建议。谢谢。 @Kamlesh,也许你可以试试这个pub.dev/packages/camera_with_rtmp

以上是关于Flutter 直播的主要内容,如果未能解决你的问题,请参考以下文章

直播深入聊聊不一样的Flutter

Flutter - agora - 如何做直播

预告 · Flutter Live 2018 全球同步直播

正在直播:基于CloudBase的Flutter端云一体化实践

大年初四,Flutter Forward 中国社区直播活动与你不见不散

Flutter上线项目实战——腾讯点播直播下载