Search code examples
flutterwebrtciot

How implement WEBRTC with flutter Bloc pattern


I have a flutter app and I need to get the video stream from a smart device the device actually returns this data

{
     
  moto_id: 'moto_usprod001',
  auth: 'XX/XL?EF?OL/XXX',   
  icesServers: [
    { urls: 'stun:44.240.73.31:3478' },
    { urls: 'stun:aws5stun.tuyaus.com:3478' },
    { urls: 'nat:aws3nat.tuyaus.com:3478' },
    { urls: 'nat:aws4nat.tuyaus.com:3478' },
    {
      credential: 'XXXX',
      ttl: 3600,
      urls: 'turn:55.55.55.55:3478',
      username: 'XXXXXX:XXXXXX:XXXXX'
    },
    {
      credential: 'XXXXX',
      ttl: 3600,
      urls: 'turn:XCDS.tuyaus.com:3478',
      username: 'XXXXXXX:XXXXXX'
    }
  ]
}

How do I use this returned data to get the video streamed from device on mobile !! the way I have structured my app is using the Bloc Pattern

Thank you


Solution

  • Well... if you didn't make your mind on a webrtc library - I recommend Flutter-WebRTC. This library support any platform (including mobile + ios + android) and also has a very nice demo app to start with.

    Please note that in order to sync your devices you should have a sync server and as the sample app states, you can use you own instance (using the WebRTC Flutter Server) or just use the publicly accessible stun server (please note it is NOT properly secured)

    To answer your use case - please refer to this portion of the app demo to help you get started fast (a video call implementation, including video stream)

    And.. if (by chance) this is your first time using WebRTC and you are not entirely confident about your understating the entire process (I, for instance, still learning and getting amazed by WebRTC - no shame in that) - please refer to this excellent document which helps to get the core concepts and how WebRTC component are co-operating with each other

    Hope you will find your way with that project of your, ad of course - feel free to share here and educate us all when you get interesting results. Cheers