First App
Step 1#
Create or use an existing flutter app project and add flutter_webrtc to your pubspec.yaml file
flutter create myapp- Add
flutter_webrtcto yourpubspec.yamlfile
flutter pub add flutter_webrtcStep 2#
Setup required permissions for audio and video, link to Project Settings
Using navigator.mediaDevices.getUserMedia to get access to the camera and microphone.
you can view getUserMedia docs here
class _MyHomePageState extends State<MyHomePage> { RTCVideoRenderer? _renderer; MediaStream? _stream;
void _openCamera() async { // create and initialize renderer _renderer ??= RTCVideoRenderer(); await _renderer!.initialize();
// try { _stream = await navigator.mediaDevices .getUserMedia({'audio': false, 'video': true}); } catch (e) { //if you get an error, please check the permissions in the project settings. print(e.toString()); }
// set the MediaStream to the video renderer _renderer!.srcObject = _stream; setState(() {}); }Step 3#
render the video renderer in the widget tree
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: SizedBox( width: 320, height: 240, // render the video renderer in the widget tree child: _renderer != null ? RTCVideoView(_renderer!) : Container(), ), ), floatingActionButton: FloatingActionButton( onPressed: _setup, tooltip: 'open camera', child: const Icon(Icons.camera_alt), ), ); }