expert.htm 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <!DOCTYPE html>
  2. <!--
  3. * Copyright (C) 2012 Doubango Telecom <http://www.doubango.org>
  4. * License: BSD
  5. * This file is part of Open Source sipML5 solution <http://www.sipml5.org>
  6. -->
  7. <html lang="en">
  8. <head>
  9. <meta charset="utf-8" />
  10. <title>sipML5 - Expert mode</title>
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  12. <meta name="Keywords" content="doubango, VoIP, HTML5, WebRTC, RTCWeb, SIP, IMS, Video chat, VP8 " />
  13. <meta name="Description" content="HTML5 SIP client using WebRTC framework" />
  14. <meta name="author" content="Doubango Telecom" />
  15. <!-- Le styles -->
  16. <link href="./assets/css/bootstrap.css" rel="stylesheet" />
  17. <style type="text/css">
  18. body
  19. {
  20. padding-top: 80px;
  21. padding-bottom: 40px;
  22. }
  23. </style>
  24. <link href="./assets/css/bootstrap-responsive.css" rel="stylesheet" />
  25. <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  26. <!--[if lt IE 9]>
  27. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  28. <![endif]-->
  29. <!-- Le fav and touch icons -->
  30. <link rel="shortcut icon" href="./assets/ico/favicon.ico" />
  31. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/ico/apple-touch-icon-114-precomposed.png" />
  32. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/ico/apple-touch-icon-72-precomposed.png" />
  33. <link rel="apple-touch-icon-precomposed" href="./assets/ico/apple-touch-icon-57-precomposed.png" />
  34. </head>
  35. <script type="text/javascript">
  36. var cbVideoDisable;
  37. var cbAVPFDisable;
  38. var txtWebsocketServerUrl;
  39. var txtSIPOutboundProxyUrl;
  40. var txtInfo;
  41. window.onload = function () {
  42. cbVideoDisable = document.getElementById("cbVideoDisable");
  43. cbRTCWebBreaker = document.getElementById("cbRTCWebBreaker");
  44. txtWebsocketServerUrl = document.getElementById("txtWebsocketServerUrl");
  45. txtSIPOutboundProxyUrl = document.getElementById("txtSIPOutboundProxyUrl");
  46. txtInfo = document.getElementById("txtInfo");
  47. txtWebsocketServerUrl.disabled = !window.WebSocket || navigator.appName == "Microsoft Internet Explorer"; // Do not use WS on IE
  48. document.getElementById("btnSave").disabled = !window.localStorage;
  49. document.getElementById("btnRevert").disabled = !window.localStorage;
  50. if(window.localStorage){
  51. settingsRevert(true);
  52. }
  53. }
  54. function settingsSave() {
  55. window.localStorage.setItem('org.doubango.expert.disable_video', cbVideoDisable.checked ? "true" : "false");
  56. window.localStorage.setItem('org.doubango.expert.enable_rtcweb_breaker', cbRTCWebBreaker.checked ? "true" : "false");
  57. if (!txtWebsocketServerUrl.disabled) {
  58. window.localStorage.setItem('org.doubango.expert.websocket_server_url', txtWebsocketServerUrl.value);
  59. }
  60. window.localStorage.setItem('org.doubango.expert.sip_outboundproxy_url', txtSIPOutboundProxyUrl.value);
  61. window.localStorage.setItem('org.doubango.expert.ice_servers', txtIceServers.value);
  62. window.localStorage.setItem('org.doubango.expert.bandwidth', txtBandwidth.value);
  63. window.localStorage.setItem('org.doubango.expert.video_size', txtSizeVideo.value);
  64. window.localStorage.setItem('org.doubango.expert.disable_early_ims', cbEarlyIMS.checked ? "true" : "false");
  65. window.localStorage.setItem('org.doubango.expert.disable_debug', cbDebugMessages.checked ? "true" : "false");
  66. window.localStorage.setItem('org.doubango.expert.enable_media_caching', cbCacheMediaStream.checked ? "true" : "false");
  67. window.localStorage.setItem('org.doubango.expert.disable_callbtn_options', cbCallButtonOptions.checked ? "true" : "false");
  68. txtInfo.innerHTML = '<i>Saved</i>';
  69. }
  70. function settingsRevert(bNotUserAction) {
  71. cbVideoDisable.checked = (window.localStorage.getItem('org.doubango.expert.disable_video') == "true");
  72. cbRTCWebBreaker.checked = (window.localStorage.getItem('org.doubango.expert.enable_rtcweb_breaker') == "true");
  73. txtWebsocketServerUrl.value = (window.localStorage.getItem('org.doubango.expert.websocket_server_url') || "");
  74. txtSIPOutboundProxyUrl.value = (window.localStorage.getItem('org.doubango.expert.sip_outboundproxy_url') || "");
  75. txtIceServers.value = (window.localStorage.getItem('org.doubango.expert.ice_servers') || "");
  76. txtBandwidth.value = (window.localStorage.getItem('org.doubango.expert.bandwidth') || "");
  77. txtSizeVideo.value = (window.localStorage.getItem('org.doubango.expert.video_size') || "");
  78. cbEarlyIMS.checked = (window.localStorage.getItem('org.doubango.expert.disable_early_ims') == "true");
  79. cbDebugMessages.checked = (window.localStorage.getItem('org.doubango.expert.disable_debug') == "true");
  80. cbCacheMediaStream.checked = (window.localStorage.getItem('org.doubango.expert.enable_media_caching') == "true");
  81. cbCallButtonOptions.checked = (window.localStorage.getItem('org.doubango.expert.disable_callbtn_options') == "true");
  82. if (!bNotUserAction) {
  83. txtInfo.innerHTML = '<i>Reverted</i>';
  84. }
  85. }
  86. </script>
  87. <body>
  88. <div class="container">
  89. <div class="span7 well">
  90. <label align="center" id="txtInfo"> </label>
  91. <h2> Expert settings</h2>
  92. <br />
  93. <table style='width: 100%'>
  94. <tr>
  95. <td>
  96. <label style="height: 100%">Disable Video:</label>
  97. </td>
  98. <td>
  99. <input type='checkbox' id='cbVideoDisable' />
  100. </td>
  101. </tr>
  102. <tr>
  103. <td>
  104. <label style="height: 100%">Enable RTCWeb Breaker<sup><a href="#aRTCWebBreaker">[1]</a></sup>:</label>
  105. </td>
  106. <td>
  107. <input type='checkbox' id='cbRTCWebBreaker' />
  108. </td>
  109. </tr>
  110. <tr>
  111. <td>
  112. <label style="height: 100%">WebSocket Server URL<sup><a href="#aWebSocketServerURL">[2]</a></sup>:</label>
  113. </td>
  114. <td>
  115. <input type="text" style="width: 100%; height: 100%" id="txtWebsocketServerUrl" value="" placeholder="e.g. ws://sipml5.org:5062" />
  116. </td>
  117. </tr>
  118. <tr>
  119. <td>
  120. <label style="height: 100%">SIP outbound Proxy URL<sup><a href="#aSIPOutboundProxyURL">[3]</a></sup>:</label>
  121. </td>
  122. <td>
  123. <input type="text" style="width: 100%; height: 100%" id="txtSIPOutboundProxyUrl" value="" placeholder="e.g. udp://sipml5.org:5060" />
  124. </td>
  125. </tr>
  126. <tr>
  127. <td>
  128. <label style="height: 100%">ICE Servers<sup><a href="#aIceServers">[4]</a></sup>:</label>
  129. </td>
  130. <td>
  131. <input type="text" style="width: 100%; height: 100%" id="txtIceServers" value="" placeholder="e.g. [{ url: 'stun:stun.l.google.com:19302'}, { url:'turn:[email protected]', credential:'myPassword'}]" />
  132. </td>
  133. </tr>
  134. <tr>
  135. <td>
  136. <label style="height: 100%">Max bandwidth (kbps)<sup><a href="#aBandwidth">[5]</a></sup>:</label>
  137. </td>
  138. <td>
  139. <input type="text" style="width: 100%; height: 100%" id="txtBandwidth" value="" placeholder="{ audio:64, video:512 }" />
  140. </td>
  141. </tr>
  142. <tr>
  143. <td>
  144. <label style="height: 100%">Video size<sup><a href="#aSizeVideo">[6]</a></sup>:</label>
  145. </td>
  146. <td>
  147. <input type="text" style="width: 100%; height: 100%" id="txtSizeVideo" value="" placeholder="{ minWidth: 640, minHeight:480, maxWidth: 640, maxHeight:480 }" />
  148. </td>
  149. </tr>
  150. <tr>
  151. <td>
  152. <label style="height: 100%">Disable 3GPP Early IMS<sup><a href="#aEarlyIMS">[7]</a></sup>:</label>
  153. </td>
  154. <td>
  155. <input type='checkbox' id='cbEarlyIMS' />
  156. </td>
  157. </tr>
  158. <tr>
  159. <td>
  160. <label style="height: 100%">Disable debug messages<sup><a href="#aDebugMessages">[8]</a></sup>:</label>
  161. </td>
  162. <td>
  163. <input type='checkbox' id='cbDebugMessages' />
  164. </td>
  165. </tr>
  166. <tr>
  167. <td>
  168. <label style="height: 100%">Cache the media stream<sup><a href="#aCacheMediaStream">[9]</a></sup>:</label>
  169. </td>
  170. <td>
  171. <input type='checkbox' id='cbCacheMediaStream' />
  172. </td>
  173. </tr>
  174. <tr>
  175. <td>
  176. <label style="height: 100%">Disable Call button options<sup><a href="#aCallButtonOptions">[10]</a></sup>:</label>
  177. </td>
  178. <td>
  179. <input type='checkbox' id='cbCallButtonOptions' />
  180. </td>
  181. </tr>
  182. <tr>
  183. <td colspan="2" align="right">
  184. <input type="button" class="btn-success" id="btnSave" value="Save" onclick='settingsSave();' />
  185. &nbsp;
  186. <input type="button" class="btn-danger" id="btnRevert" value="Revert" onclick='settingsRevert();' />
  187. </td>
  188. </tr>
  189. </table>
  190. </div>
  191. </div>
  192. <hr />
  193. <footer>
  194. <a name="aRTCWebBreaker"><sup><b>[1]</b></sup></a> The <b>RTCWeb Breaker</b> is used to enable audio and video transcoding when the endpoints do not support the same codecs or the remote server is not RTCWeb-compliant. Please note that the <b>Media Coder</b> will most likely be disabled on the <b>sipml5.org</b> hosted server.<br />
  195. For example, you can enable this feature if:
  196. <ul>
  197. <li>You want to make call from/to <b>Chrome</b> to/from <b>Firefox Nightly</b></li>
  198. <li>You're using any RTCWeb-capable browser and trying to call the PSTN network</li>
  199. <li>You're using any RTCWeb-capable browser and trying to call any SIP client (e.g. <b>xlite</b>) not implementing some mandatory features (e.g. <b>ICE</b>, <b>DTLS-SRTP</b>...)</li>
  200. <li>You're using <b>Google Chrome</b> which only support VP8 codec and trying to call a SIP-legacy client supporting only <b>H.264</b>, <b>H.263</b>, <b>Theora</b> or <b>MP4V-ES</b></li>
  201. <li>Making audio/video calls from/to <a href="https://www.google.com/intl/en/chrome/browser/">Google Chrome</a> to/from <a href="https://labs.ericsson.com/apps/bowser">Ericsson Bowser</a></li>
  202. <li>Your media server is not RTCWeb-capable (e.g. <b>FreeSWITCH</b>)</li>
  203. </ul>
  204. Please check the <a href="http://webrtc2sip.org/technical-guide-1.0.pdf">Technical guide</a> for more information about the <b>RTCWeb Breaker</b> and <b>Media Coder</b>.<br />
  205. <a name="aWebSocketServerURL"><sup><b>[2]</b></sup></a> The <b>WebSocket Server URL</b> is only required if you're a developer and using your own SIP Proxy gateway not publicly reachable. <br />
  206. <a name="aSIPOutboundProxyURL"><sup><b>[3]</b></sup></a> The <b>SIP outbound Proxy URL</b> is used to set the destination IP address and Port to use for all outgoing requests regardless the <i>domain name</i> (a.k.a <i>realm</i>).
  207. This is a good option for developers using a SIP domain name without valid DNS A/NAPTR/SRV records. <br />
  208. <a name="aIceServers"><sup><b>[4]</b></sup></a> This must be an array of STUN/TURN servers to use. The format is as explained at <a href="http://www.w3.org/TR/webrtc/#rtciceserver-type">http://www.w3.org/TR/webrtc/#rtciceserver-type</a> <br />
  209. To disable TURN/STUN to speedup ICE candidates gathering you can use an empty array. e.g. <i>[]</i>. <br />
  210. Example: <i>[{ url: 'stun:stun.l.google.com:19302'}, { url:'turn:[email protected]', credential:'myPassword'}]</i> <br />
  211. <a name="aBandwidth"><sup><b>[5]</b></sup></a> Defines the maximum audio and video bandwidth to use. This will change the outhoing SDP to include a "b:AS=" attribute. Use <i>0</i> to let the browser negotiates the right value using RTCP-REMB and congestion control.<br />
  212. Example: <i>{ audio:64, video:512 }</i> <br />
  213. <a name="aSizeVideo"><sup><b>[6]</b></sup></a> Defines the maximum and minimum video size to be used. All values are optional. The browser will try to find the best video size between <i>max</i> and <i>min</i> based on the camera capabilities. <br />
  214. Example: <i><b>{</b> minWidth: 640, minHeight:480, maxWidth: 640, maxHeight:480 <b>}</b></i>. The <b>{</b> and <b>}</b> around the values are required. <br />
  215. <a name="aEarlyIMS"><sup><b>[7]</b></sup></a> Whether to enable 3GGP Early IMS as per <a href="http://www.arib.or.jp/english/html/overview/doc/STD-T63v9_60/5_Appendix/Rel6/33/33978-660.pdf" target=_blank>TR 33.978</a>. This option should not be checked unless you're using a real IMS/LTE network. <br />
  216. If earlyIMS is disabled then, authentication will be done as per <i>3GPP TS 24.229 - 5.1.1.2.2</i>. <br />
  217. <a name="aDebugMessages"><sup><b>[8]</b></sup></a> Whether to disable debug messages. SIPML5 supports #4 debug levels: <i>INFO</i>, <i>WARN</i>, <i>ERROR</i> and <i>FATAL</i>. Default level is <i>INFO</i>. Check this option to set the level value to <i>ERROR</i>. <br />
  218. <a name="aCacheMediaStream"><sup><b>[9]</b></sup></a> Whether to reuse the same media stream for all calls. If your website is <b>not using https</b> then, the browser will request access to the camera (or microphone) every time you try to make a call. Caching the media stream will avoid getting these notifications for each call. <br />
  219. <a name="aCallButtonOptions"><sup><b>[10]</b></sup></a> Whether to add options (<i>Audio</i>, <i>Video</i>, <i>Screen share</i>) in the the call button. <br />
  220. </footer>
  221. </body>
  222. </html>