Manage Audio and Video Devices - Flutter

This feature allows hosts to switch their microphone, speaker, or camera devices during a live stream. Only hosts (in SEND_AND_RECV mode) can change input/output devices, ensuring they maintain control over their audio and video quality, while audience members (in RECV_ONLY mode) continue to receive the broadcast seamlessly.

Changing Audio Input Device

During the livestream at any point a host wishes to switch his/her input audio device, it can be done using the below mentioned methods.

important

This feature is only available on the Web and Desktop; if you want to use it on Mobile, please refer this guide.

getAudioDevices()

• The getAudioDevices() method will help you to list down all possible connected audio input devices which will return a list of AudioDeviceInfo objects.

• The AudioDeviceInfo object will contain the deviceId , kind , groupId and label for the device.

changeMic()

• After selecting the desired device, you can switch the audio input by passing the corresponding AudioDeviceInfo object as a parameter to the changeMic() method.

Example

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class LiveStreamScreen extends StatefulWidget {
  const LiveStreamScreen({Key? key}) : super(key: key);

  @override
  _LiveStreamScreenState createState() => _LiveStreamScreenState();
}

class _LiveStreamScreenState extends State<LiveStreamScreen> {
  late Room _room;
  List<AudioDeviceInfo>? mics = [];

  @override
  void initState() {
    super.initState();
    fetchMics();
  }

  void fetchMics() async {
    List<AudioDeviceInfo>? audioDevices = await VideoSDK.getAudioDevices();
    if (kIsWeb || Platform.isMacOS || Platform.isWindows) {
      for (AudioDeviceInfo device in audioDevices!) {
        if (device.kind == 'audioinput') {
          mics?.add(device);
        }
      }
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
          child: Text("Change Input Device"),
          onPressed: () => {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: const Text("Select Audio Device"),
                    content: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        SingleChildScrollView(
                          reverse: true,
                          child: mics != null && mics!.isNotEmpty
                              ? Column(
                                  children: mics!
                                      .map(
                                        (device) => ElevatedButton(
                                          child: Text(device.label),
                                          onPressed: () {
                                            _room.changeMic(device);
                                            Navigator.pop(context);
                                          },
                                        ),
                                      )
                                      .toList(),
                                )
                              : const Text("No Microphone Devices found."),
                        )
                      ],
                    ),
                  ),
                )
              }),
    ]);
  }
}

Changing Audio Output Device

During the livestream at any point a host wishes to switch his/her output audio like from headphones to speaker, it can be done using the below mentioned methods.

important

This feature works for input and output device on Mobile apps, and for output device on Web and Desktop apps.

getAudioDevices()

• The getAudioDevices() method will help you to list down all possible connected audio output devices which will return a list of AudioDeviceInfo objects.

• The AudioDeviceInfo object will contain the deviceId , kind , groupId and label for the device.

switchAudioDevice()

• After selecting the desired device, you can switch the audio output by passing the corresponding AudioDeviceInfo object as a parameter to the switchAudioDevice() method.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class LiveStreamScreen extends StatefulWidget {
  const LiveStreamScreen({Key? key}) : super(key: key);

  @override
  _LiveStreamScreenState createState() => _LiveStreamScreenState();
}

class _LiveStreamScreenState extends State<LiveStreamScreen> {
  late Room _room;
  List<AudioDeviceInfo>? speakers = [];

  @override
  void initState() {
    super.initState();
    fetchSpeakers();
  }

  void fetchSpeakers() async {
    List<AudioDeviceInfo>? audioDevices = await VideoSDK.getAudioDevices();
      for (AudioDeviceInfo device in audioDevices!) {
        if (device.kind == 'audiooutput') {
          speakers?.add(device);
        }
      }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
          child: const Text("Change Audio Device"),
          onPressed: () => {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: const Text("Select Audio Device"),
                    content: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        SingleChildScrollView(
                          reverse: true,
                          child: speakers != null && speakers!.isNotEmpty
                              ? Column(
                                  children: speakers!
                                      .map(
                                        (device) => ElevatedButton(
                                          child: Text(device.label),
                                          onPressed: () {
                                            _room.switchAudioDevice(device);
                                            Navigator.pop(context);
                                          },
                                        ),
                                      )
                                      .toList(),
                                )
                              : const Text("No Speaker Devices found."),
                        )
                      ],
                    ),
                  ),
                )
              }),
    ]);
  }
}

note

For iOS devices:

• EARPIECE is not supported whenever WIRED_HEADSET or BLUETOOTH device is connected.
• WIRED_HEADSET and BLUETOOTH devices are not supported simultaneously. Priority is given to the most recently connected device.

caution

On the web, the microphone will now be muted when the input audio device is disconnected. Users will need to unmute it to continue.

Changing Camera Input Device

During the livestream at any point a host wishes to switch his/her input video device, it can be done using the below mentioned methods.

getVideoDevices()

• This method of the VideoSDK class will give you the list of all the available cameras which can be shown in a list.

• This method will return an array of VideoDeviceInfo which will contain the deviceId , label , kind and groupId of the camera input devices.

changeCam()

• After selecting the desired device, you can switch the camera input by passing the corresponding VideoDeviceInfo object as a parameter to the changeCam() method.

Example

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class LiveStreamScreen extends StatefulWidget {
  const LiveStreamScreen({Key? key}) : super(key: key);

  @override
  _LiveStreamScreenState createState() => _LiveStreamScreenState();
}

class _LiveStreamScreenState extends State<LiveStreamScreen> {
  late Room _room;
  List<VideoDeviceInfo>? cameras = [];

  @override
  void initState() {
    super.initState(); 
    fetchCameras();
  }

  void fetchCameras() async {
    cameras = await VideoSDK.getVideoDevices();
    setState(() {});  
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          child: const Text("Change Camera"),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: const Text("Select Camera Device"),
                content: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    SingleChildScrollView(
                      reverse: true,
                      child: cameras != null && cameras!.isNotEmpty
                          ? Column(
                              children: cameras!.map(
                                (device) => ElevatedButton(
                                  child: Text(device.label),
                                  onPressed: () {
                                    _room.changeCam(device);
                                    Navigator.pop(context);
                                  },
                                ),
                              ).toList(),
                            )
                          : const Text("No Camera Devices found."),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ],
    );
  }
}

API Reference

The API references for all the methods and events utilised in this guide are provided below.

• getAudioDevices()
• switchAudioDevice()
• getVideoDevices
• changeCam()
• getVideoDevices
• changeCam()