Add turn relay support for web.

Author: cloudwebrtc

lib/main.dart

@@ -1,7 +1,8 @@
-import 'package:flutter/material.dart';
-import 'src/utils/key_value_store.dart'
-    if (dart.library.js) 'src/utils/key_value_store_web.dart';
 import 'dart:core';
+
+import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
 import 'src/basic_sample/basic_sample.dart';
 import 'src/call_sample/call_sample.dart';
 import 'src/call_sample/data_channel_sample.dart';
@@ -21,8 +22,9 @@ enum DialogDemoAction {
 
 class _MyAppState extends State<MyApp> {
   List<RouteItem> items;
-  String _serverAddress = '';
-  KeyValueStore keyValueStore = KeyValueStore();
+  String _server = '';
+  SharedPreferences _prefs;
+
   bool _datachannel = false;
   @override
   initState() {
@@ -60,9 +62,9 @@ class _MyAppState extends State<MyApp> {
   }
 
   _initData() async {
-    await keyValueStore.init();
+    _prefs = await SharedPreferences.getInstance();
     setState(() {
-      _serverAddress = keyValueStore.getString('server') ?? 'demo.cloudwebrtc.com';
+      _server = _prefs.getString('server') ?? 'demo.cloudwebrtc.com';
     });
   }
 
@@ -74,13 +76,13 @@ class _MyAppState extends State<MyApp> {
       // The value passed to Navigator.pop() or null.
       if (value != null) {
         if (value == DialogDemoAction.connect) {
-          keyValueStore.setString('server', _serverAddress);
+          _prefs.setString('server', _server);
           Navigator.push(
               context,
               MaterialPageRoute(
                   builder: (BuildContext context) => _datachannel
-                      ? DataChannelSample(ip: _serverAddress)
-                      : CallSample(ip: _serverAddress)));
+                      ? DataChannelSample(ip: _server)
+                      : CallSample(ip: _server)));
         }
       }
     });
@@ -94,11 +96,11 @@ class _MyAppState extends State<MyApp> {
             content: TextField(
               onChanged: (String text) {
                 setState(() {
-                  _serverAddress = text;
+                  _server = text;
                 });
               },
               decoration: InputDecoration(
-                hintText: _serverAddress,
+                hintText: _server,
               ),
               textAlign: TextAlign.center,
             ),

lib/src/call_sample/signaling.dart

@@ -1,13 +1,15 @@
 import 'dart:convert';
 import 'dart:async';
-import 'dart:io';
 import 'package:flutter_webrtc/webrtc.dart';
+
 import 'random_string.dart';
 
 import '../utils/device_info.dart'
     if (dart.library.js) '../utils/device_info_web.dart';
 import '../utils/websocket.dart'
     if (dart.library.js) '../utils/websocket_web.dart';
+import '../utils/turn.dart'
+    if (dart.library.js) '../utils/turn_web.dart';
 
 enum SignalingState {
   CallStateNew,
@@ -37,7 +39,7 @@ class Signaling {
   SimpleWebSocket _socket;
   var _sessionId;
   var _host;
-  var _port = 4443;
+  var _port = 8086;
   var _peerConnections = new Map<String, RTCPeerConnection>();
   var _dataChannels = new Map<String, RTCDataChannel>();
   var _remoteCandidates = [];
@@ -104,17 +106,6 @@ class Signaling {
     if (_socket != null) _socket.close();
   }
 
-  getTurnCredential(String host) async {
-    var httpClient = new HttpClient();
-    var uri = new Uri.http('$host', '/api/turn',
-        {'service': 'turn', 'username': 'flutter-webrtc'});
-    var request = await httpClient.getUrl(uri);
-    var response = await request.close();
-    var responseBody = await response.transform(Utf8Decoder()).join();
-    Map data = _decoder.convert(responseBody);
-    return data;
-  }
-
   void switchCamera() {
     if (_localStream != null) {
       _localStream.getVideoTracks()[0].switchCamera();
@@ -273,14 +264,14 @@ class Signaling {
   }
 
   void connect() async {
-    var url = 'wss://$_host:$_port/ws';
+    var url = 'https://$_host:$_port/ws';
     _socket = SimpleWebSocket(url);
 
     print('connect to $url');
 
     if (_turnCredential == null) {
       try {
-        _turnCredential = await getTurnCredential(_host);
+        _turnCredential = await getTurnCredential(_host, _port);
         /*{
             "username": "1584195784:mbzrxpgjys",
             "password": "isyl6FF6nqMTB9/ig5MrMRUXqZg",

lib/src/utils/key_value_store.dart

@@ -0,0 +1,19 @@
+import 'dart:convert';
+import 'dart:async';
+import 'dart:io';
+
+Future<Map> getTurnCredential(String host, int port) async {
+    HttpClient client = HttpClient(context: SecurityContext());
+    client.badCertificateCallback =
+        (X509Certificate cert, String host, int port) {
+      print('getTurnCredential: Allow self-signed certificate => $host:$port. ');
+      return true;
+    };
+    var url = 'https://$host:$port/api/turn?service=turn&username=flutter-webrtc';
+    var request = await client.getUrl(Uri.parse(url));
+    var response = await request.close();
+    var responseBody = await response.transform(Utf8Decoder()).join();
+    print('getTurnCredential:response => $responseBody.');
+    Map data = JsonDecoder().convert(responseBody);
+    return data;
+  }

lib/src/utils/key_value_store_web.dart

@@ -0,0 +1,13 @@
+import 'dart:convert';
+import 'package:http/http.dart' as http;
+
+Future<Map> getTurnCredential(String host, int port) async {
+  var url = 'https://$host:$port/api/turn?service=turn&username=flutter-webrtc';
+    final res = await http.get(url);
+    if (res.statusCode == 200) {
+      var data = json.decode(res.body);
+      print('getTurnCredential:response => $data.');
+      return data;
+    }
+    return {};
+  }

lib/src/utils/turn.dart

@@ -17,8 +17,8 @@ class SimpleWebSocket {
 
   connect() async {
     try {
-      _socket = await WebSocket.connect(_url);
-      //socket = await _connectForSelfSignedCert(_host, _port);
+      //_socket = await WebSocket.connect(_url);
+      _socket = await _connectForSelfSignedCert(_url);
       this?.onOpen();
       _socket.listen((data) {
         this?.onMessage(data);
@@ -38,23 +38,22 @@ class SimpleWebSocket {
   }
 
   close() {
-    _socket.close();
+    if (_socket != null)
+      _socket.close();
   }
 
-  Future<WebSocket> _connectForSelfSignedCert(String host, int port) async {
+  Future<WebSocket> _connectForSelfSignedCert(url) async {
     try {
       Random r = new Random();
       String key = base64.encode(List<int>.generate(8, (_) => r.nextInt(255)));
-      SecurityContext securityContext = new SecurityContext();
-      HttpClient client = HttpClient(context: securityContext);
+      HttpClient client = HttpClient(context: SecurityContext());
       client.badCertificateCallback =
           (X509Certificate cert, String host, int port) {
-        print('Allow self-signed certificate => $host:$port. ');
+        print('SimpleWebSocket: Allow self-signed certificate => $host:$port. ');
         return true;
       };
 
-      HttpClientRequest request = await client.getUrl(
-          Uri.parse('https://$host:$port/ws')); // form the correct url here
+      HttpClientRequest request = await client.getUrl(Uri.parse(url)); // form the correct url here
       request.headers.add('Connection', 'Upgrade');
       request.headers.add('Upgrade', 'websocket');
       request.headers.add(

lib/src/utils/turn_web.dart

@@ -11,7 +11,9 @@ class SimpleWebSocket {
   OnMessageCallback onMessage;
   OnCloseCallback onClose;
 
-  SimpleWebSocket(this._url);
+  SimpleWebSocket(this._url) {
+    _url = _url.replaceAll('https:', 'wss:');
+  }
 
   connect() async {
     try {
@@ -28,7 +30,7 @@ class SimpleWebSocket {
         this?.onClose(e.code, e.reason);
       });
     } catch (e) {
-      this?.onClose(e.code, e.reason);
+      this?.onClose(500, e.toString());
     }
   }
 
@@ -42,6 +44,6 @@ class SimpleWebSocket {
   }
 
   close() {
-    _socket.close();
+    if (_socket != null) _socket.close();
   }
 }

lib/src/utils/websocket.dart

@@ -19,9 +19,10 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^0.1.2
-  flutter_webrtc: ^0.2.2
+  flutter_webrtc: ^0.2.6
   shared_preferences:
   shared_preferences_macos:
+  shared_preferences_web:
 
   # Required for MediaRecorder example
   path_provider: