Flutter live streaming
Asked Answered
M

1

27

I am trying to build a mobile app which streams video from the camera of the device and sends it live to a server. Also, the mobile device should be able to play live video received from the server.

I am building the app in Flutter, but can't seem to find a well documented library/package in Flutter which uses HLS/RTSL/WebRTC/etc.

Should I use the byte stream and make a custom solution or is there a official package I can use to do the work?

Thank you in advance!

Melodymeloid answered 4/3, 2019 at 17:14 Comment(7)
Possible duplicate of Is it possible to stream a video with flutter camera plugin?Pollster
Hey, did you find any solution to this?Marquis
I found a package for that purpose, dart wrapper for android native code github.com/espresso3389/flutter_rtmp_publisher. Here is the native android library github.com/TakuSemba/RtmpPublisher If you already found a solution, please drop it here just to weigh options.Derron
I think this can help: youtu.be/tPcuBo5QAW4Alcoholic
It doesn't seem like it helps @devDeejay, as it shows how to play video from a network stream (unless there's something else to the end of it).Pentagon
I am looking solution of Stream Screen Recording in flutter, is there any suggestion?? Thanks in advance.Benyamin
has anyone tried docs.agora.io/en/Video/start_live_flutter?platform=Flutter ?Mardis
S
7

For WebRTC Please try this package flutter_webrtc
https://github.com/cloudwebrtc/flutter-webrtc
and more example link
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),
      ),
    );
  }
}
Strong answered 25/6, 2019 at 2:4 Comment(11)
Can we do the same for audio..like for songs I mean??Endosperm
@JalakamKiran, Are you looking for audio stream? please reference this https://mcmap.net/q/535263/-flutter-how-to-stream-live-audio-provided-by-a-http-url-without-mp3-extensionStrong
@Strong I am looking solution of Stream Screen Recording in flutter, is there any suggestion?? Thanks in advance.Benyamin
@Strong Please share your suggestion on my last query. Thanks.Benyamin
@Kamlesh, may be you can try this pub.dev/packages/camera_with_rtmpStrong
@Kamlesh, and this pub.dev/packages/flutter_rtmp_publisherStrong
@Strong Thanks for sharing your solutions, I have already tried them. My requirement is to capture video by camera then add an overlay at bottom of screen (something like fixed text/message) then want to stream screen output (capturing video + overlay text) on RTMP. Could you please suggest me how can I do this? Thanks a lot.Benyamin
@Kamlesh, sorry, I am not major in this area.Strong
@Strong Ok, thanks to confirm. I am still searching, will post the solution here when I will get it. Thanks again :)Benyamin
Hi @Kamlesh,Did you get any solutions? If you have anything, could you please share it here? It would be a great help for everyone.Rafat
Hello @RanjitKumarPandit No, I did not get any proper solution yet while I have checked so many flutter plugins/packages. Some are not working and some packages are not compatible with flutter 3. I think we will have to research on it's core functionalities and make own custom package to solve this issue. Thank you :)Benyamin

© 2022 - 2024 — McMap. All rights reserved.