Search code examples
flutterpackagemediarecorder

How to use package:web in Flutter web?

I want to start recording von Mic using Flutter web (only, no mobile support needed). With dart:html everything worked smoothly.

No I converted to package:web but everything full of errors. Can anyone help me what it the correct call here?

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

and then...

enter image description here

Solution

  • I guess your _startRecording should look like this:

    // needed imports
import 'dart:js_interop';
import 'dart:js_util';
import 'package:web/web.dart' as web;

Future<void> _startRecording() async {
  print("Start Recording");
  final mediaStream = await promiseToFuture<web.MediaStream>(web
      .window.navigator.mediaDevices
      .getUserMedia(web.MediaStreamConstraints(audio: true.toJS)));
  final _mediaRecorder = web.MediaRecorder(
      mediaStream,
      web.MediaRecorderOptions(
          mimeType: 'audio/webm', audioBitsPerSecond: 16000));
}

    First – need to convert true to JSBoolean with true.toJS. Then convert JSpromise (getUserMedia returns it) to Future with promiseToFuture and await it. Now, when creating MediaRecorder, mediaStream will have appropriate type. And last but not least, MediaRecorderOptions are now typed so you pass not just Map but options themselves.

    Good luck!