现场直播 [英] Flutter live streaming

问题描述

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

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.

我正在Flutter中构建应用程序，但似乎在Flutter中找不到使用HLS/RTSL/WebRTC/etc的文档齐全的库/软件包.

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?

先谢谢您！

推荐答案

对于WebRTC，请尝试使用此程序包flutter_webrtc
https://github.com/cloudwebrtc/flutter-webrtc
和更多示例链接
https://github.com/cloudwebrtc/flutter-webrtc-demo/

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),
      ),
    );
  }
}

这篇关于现场直播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！