zdpjs_webrtc

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>EasyRTC Documentation</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> <link href="../assets/easyrtc-docs-jsdoc-styles-1.css" media="all" rel="stylesheet" /> </head> <body> <header class="template"> <div class="wrapper-content"> <a href="../index.html"><img src="../assets/easyrtc-logo.png" alt="EasyRTC Documentation"></a> <h1 title="EasyRTC Documentation">Documentation</h1> </div> </header> <div class="wrapper-docs"> <nav> <h2><a href="../index.html">Docs Home</a></h2> <h3>EasyRTC Guides</h3> <ul> <li><a href="../easyrtc_faq.html">FAQ</a></li> <li><a href="../easyrtc_gettingStarted.html">Getting Started</a></li> <li><a href="../easyrtc_server_install.html">EasyRTC Server: Installation</a></li> <li><a href="../easyrtc_client_tutorial.html">EasyRTC Framework Tutorial</a></li> <li><a href="../easyrtc_rooms.html">Rooms</a></li> <li><a href="../easyrtc_server_configuration.html">EasyRTC Server: Configuration</a></li> <li><a href="../easyrtc_server_events.html">EasyRTC Server: Events</a></li> <li><a href="../easyrtc_server_ice.html">EasyRTC Server: ICE Configuration</a></li> <li><a href="../easyrtc_with_other_servers.html">Using Alongside Other Servers</a></li> <li><a href="../easyrtc_server_ssl.html">EasyRTC Server: Using SSL</a></li> <li><a href="../easyrtc_webrtc_problems.html">WebRTC Problems and Possible Fixes</a></li> <li><a href="../easyrtc_upcoming_features.html">Upcoming Features</a></li> <li><a href="../easyrtc_changelog.html">Change Log</a></li> </ul> <h3>EasyRTC Client Classes</h3> <ul> <li><a href="../client-api/Easyrtc.html">Easyrtc</a></li> <li><a href="../client-api/Easyrtc_App.html">Easyrtc_App</a></li> <li><a href="../client-api/Easyrtc_ft.html">Easyrtc_ft</a></li> <li><a href="../client-api/Easyrtc_IframeCapture.html">Easyrtc_IframeCapture</a></li> <li><a href="../client-api/Easyrtc_No_IframeCapture.html">Easyrtc_No_IframeCapture</a></li> <li><a href="../client-api/Easyrtc_Rates.html">Easyrtc_Rates</a></li> <li><a href="../client-api/Easyrtc_Recorder.html">Easyrtc_Recorder</a></li> </ul> <h3>EasyRTC Server Modules</h3> <ul> <li><a href="../server-api/module-easyrtc_default_event_listeners.html">easyrtc_default_event_listeners</a></li> <li><a href="../server-api/module-easyrtc_default_options.html">easyrtc_default_options</a></li> <li><a href="../server-api/module-easyrtc_private_obj.html">easyrtc_private_obj</a></li> <li><a href="../server-api/module-easyrtc_public_obj.html">easyrtc_public_obj</a></li> <li><a href="../server-api/module-easyrtc_util.html">easyrtc_util</a></li> <li><a href="../server-api/module-general_util.html">general_util</a></li> </ul> <h3>EasyRTC Server Classes</h3> <ul> <li><a href="../server-api/module-easyrtc_default_event_listeners-eventListener.html">eventListener</a></li> <li><a href="../server-api/module-easyrtc_public_obj-pub.html">pub</a></li> <li><a href="../server-api/module-easyrtc_public_obj-pub.events.html">events</a></li> <li><a href="../server-api/module-easyrtc_public_obj-pub.util.html">util</a></li> <li><a href="../server-api/module-easyrtc_util-eu.html">eu</a></li> <li><a href="../server-api/module-general_util-g.html">g</a></li> <li><a href="../server-api/pub.appObj.html">appObj</a></li> <li><a href="../server-api/pub.appObj.connectionObj.html">connectionObj</a></li> <li><a href="../server-api/pub.appObj.connectionObj.connectionRoomObj.html">connectionRoomObj</a></li> <li><a href="../server-api/pub.appObj.roomObj.html">roomObj</a></li> <li><a href="../server-api/pub.appObj.sessionObj.html">sessionObj</a></li> </ul> </nav> <div class="easyrtc-docs-content"> <div id="main"> <h1 class="page-title">Source: desktop_capture_iframe_version.js</h1> <section> <article> <pre class="prettyprint source linenums easyrtc"><code><a name="line1"></a><div class="linenumber">1</div> <a name="line2"></a><div class="linenumber">2</div><div style="width:0em;display:inline-block"></div>//  This file is a modification of Muaz Khan's getScreenId.js. It uses loads an iframe  <a name="line3"></a><div class="linenumber">3</div><div style="width:0em;display:inline-block"></div>//  pointed at Muaz Khan's page, and then communicates with that Iframe. You can also point <a name="line4"></a><div class="linenumber">4</div><div style="width:0em;display:inline-block"></div>//  it at other urls. <a name="line5"></a><div class="linenumber">5</div><div style="width:0em;display:inline-block"></div>//   <a name="line6"></a><div class="linenumber">6</div><div style="width:0em;display:inline-block"></div>//  Technically, it is possible to desktop capture without iframes and for a production system. <a name="line7"></a><div class="linenumber">7</div><div style="width:0em;display:inline-block"></div>//  However, this solution get will get you running with the minimal effort on your side. <a name="line8"></a><div class="linenumber">8</div><div style="width:0em;display:inline-block"></div>//   <a name="line9"></a><div class="linenumber">9</div><div style="width:0em;display:inline-block"></div>//  // <a name="line10"></a><div class="linenumber">10</div><div style="width:0em;display:inline-block"></div>//   <a name="line11"></a><div class="linenumber">11</div><div style="width:0em;display:inline-block"></div>// // Last time updated at July 29, 2014, 08:32:23 <a name="line12"></a><div class="linenumber">12</div><div style="width:0em;display:inline-block"></div>// Latest file can be found here: https://cdn.webrtc-experiment.com/getScreenId.js <a name="line13"></a><div class="linenumber">13</div> <a name="line14"></a><div class="linenumber">14</div><div style="width:0em;display:inline-block"></div>// Muaz Khan         - www.MuazKhan.com <a name="line15"></a><div class="linenumber">15</div><div style="width:0em;display:inline-block"></div>// MIT License       - www.WebRTC-Experiment.com/licence <a name="line16"></a><div class="linenumber">16</div><div style="width:0em;display:inline-block"></div>// Documentation     - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/getScreenId.js <a name="line17"></a><div class="linenumber">17</div><div style="width:0em;display:inline-block"></div>// Modified by Eric Davies Sept 1/ 2014. <a name="line18"></a><div class="linenumber">18</div><div style="width:0em;display:inline-block"></div>//  <a name="line19"></a><div class="linenumber">19</div><div style="width:0em;display:inline-block"></div>// ______________ <a name="line20"></a><div class="linenumber">20</div><div style="width:0em;display:inline-block"></div>// getScreenId.js <a name="line21"></a><div class="linenumber">21</div> <a name="line22"></a><div class="linenumber">22</div><div style="width:0em;display:inline-block"></div>/** <a name="line23"></a><div class="linenumber">23</div><div style="width:0em;display:inline-block"></div>* Provides a method for window/screen capture using an iframe. <a name="line24"></a><div class="linenumber">24</div><div style="width:0em;display:inline-block"></div>* This requires that your users install Muah Khans desktop extension. <a name="line25"></a><div class="linenumber">25</div><div style="width:0em;display:inline-block"></div>* Read the source code for more details. <a name="line26"></a><div class="linenumber">26</div><div style="width:0em;display:inline-block"></div>* @class Easyrtc_IframeCapture <a name="line27"></a><div class="linenumber">27</div><div style="width:0em;display:inline-block"></div>*/ <a name="line28"></a><div class="linenumber">28</div> <a name="line29"></a><div class="linenumber">29</div> <a name="line30"></a><div class="linenumber">30</div> <a name="line31"></a><div class="linenumber">31</div><div style="width:0em;display:inline-block"></div>(function() { <a name="line32"></a><div class="linenumber">32</div><div style="width:1em;display:inline-block"></div>/** Create a local media stream for desktop capture. <a name="line33"></a><div class="linenumber">33</div><div style="width:2em;display:inline-block"></div>* This will fail if a desktop capture extension is not installed. <a name="line34"></a><div class="linenumber">34</div><div style="width:2em;display:inline-block"></div>* not granting permission. <a name="line35"></a><div class="linenumber">35</div><div style="width:2em;display:inline-block"></div>* @function <a name="line36"></a><div class="linenumber">36</div><div style="width:2em;display:inline-block"></div>* @memberOf Easyrtc_IframeCapture <a name="line37"></a><div class="linenumber">37</div><div style="width:2em;display:inline-block"></div>* @param {function(Object)} successCallback - will be called with localmedia stream on success.  <a name="line38"></a><div class="linenumber">38</div><div style="width:2em;display:inline-block"></div>* @param {function(String,String)} errorCallback - is called with an error code and error description. <a name="line39"></a><div class="linenumber">39</div><div style="width:2em;display:inline-block"></div>* @param {String} streamName - an optional name for the media source so you can use multiple cameras and screen share simultaneously. <a name="line40"></a><div class="linenumber">40</div><div style="width:2em;display:inline-block"></div>* @param {String} iframeUrl - an optional url for the iframe. The default is to use Muaz Khan's. <a name="line41"></a><div class="linenumber">41</div><div style="width:2em;display:inline-block"></div>* @example <a name="line42"></a><div class="linenumber">42</div><div style="width:2em;display:inline-block"></div>*       easyrtc.initMediaSource( <a name="line43"></a><div class="linenumber">43</div><div style="width:2em;display:inline-block"></div>*          function(mediastream){ <a name="line44"></a><div class="linenumber">44</div><div style="width:2em;display:inline-block"></div>*              easyrtc.setVideoObjectSrc( document.getElementById("mirrorVideo"), mediastream); <a name="line45"></a><div class="linenumber">45</div><div style="width:2em;display:inline-block"></div>*          }, <a name="line46"></a><div class="linenumber">46</div><div style="width:2em;display:inline-block"></div>*          function(errorCode, errorText){ <a name="line47"></a><div class="linenumber">47</div><div style="width:2em;display:inline-block"></div>*               easyrtc.showError(errorCode, errorText); <a name="line48"></a><div class="linenumber">48</div><div style="width:2em;display:inline-block"></div>*          }); <a name="line49"></a><div class="linenumber">49</div><div style="width:2em;display:inline-block"></div>* <a name="line50"></a><div class="linenumber">50</div><div style="width:2em;display:inline-block"></div>*/ <a name="line51"></a><div class="linenumber">51</div><div style="width:2em;display:inline-block"></div>var iframeUrl =  'https://www.webrtc-experiment.com/getSourceId/'; <a name="line52"></a><div class="linenumber">52</div> <a name="line53"></a><div class="linenumber">53</div><div style="width:2em;display:inline-block"></div>easyrtc.initDesktopStream= function(successCallback, failureCallback, streamName) { <a name="line54"></a><div class="linenumber">54</div><div style="width:4em;display:inline-block"></div>// for Firefox: <a name="line55"></a><div class="linenumber">55</div><div style="width:4em;display:inline-block"></div>// sourceId == 'firefox' <a name="line56"></a><div class="linenumber">56</div><div style="width:4em;display:inline-block"></div>// screen_constraints = {...} <a name="line57"></a><div class="linenumber">57</div> <a name="line58"></a><div class="linenumber">58</div> <a name="line59"></a><div class="linenumber">59</div> <a name="line60"></a><div class="linenumber">60</div><div style="width:4em;display:inline-block"></div>if (!!navigator.mozGetUserMedia) { <a name="line61"></a><div class="linenumber">61</div><div style="width:6em;display:inline-block"></div>easyrtc._presetMediaConstraints = { <a name="line62"></a><div class="linenumber">62</div><div style="width:8em;display:inline-block"></div>video: { <a name="line63"></a><div class="linenumber">63</div><div style="width:10em;display:inline-block"></div>mozMediaSource: 'window', <a name="line64"></a><div class="linenumber">64</div><div style="width:10em;display:inline-block"></div>mediaSource: 'window', <a name="line65"></a><div class="linenumber">65</div><div style="width:10em;display:inline-block"></div>maxWidth: 1920, <a name="line66"></a><div class="linenumber">66</div><div style="width:10em;display:inline-block"></div>maxHeight: 1080, <a name="line67"></a><div class="linenumber">67</div><div style="width:10em;display:inline-block"></div>minAspectRatio: 1.77 <a name="line68"></a><div class="linenumber">68</div><div style="width:8em;display:inline-block"></div>}, <a name="line69"></a><div class="linenumber">69</div><div style="width:8em;display:inline-block"></div>audio: false <a name="line70"></a><div class="linenumber">70</div><div style="width:8em;display:inline-block"></div>}; <a name="line71"></a><div class="linenumber">71</div><div style="width:6em;display:inline-block"></div>easyrtc.initMediaSource(successCallback, failureCallback, streamName); <a name="line72"></a><div class="linenumber">72</div><div style="width:6em;display:inline-block"></div>return; <a name="line73"></a><div class="linenumber">73</div><div style="width:4em;display:inline-block"></div>} <a name="line74"></a><div class="linenumber">74</div> <a name="line75"></a><div class="linenumber">75</div><div style="width:4em;display:inline-block"></div>postMessage(); <a name="line76"></a><div class="linenumber">76</div> <a name="line77"></a><div class="linenumber">77</div><div style="width:4em;display:inline-block"></div>var cb = function(event) { <a name="line78"></a><div class="linenumber">78</div><div style="width:6em;display:inline-block"></div>if (!event.data) return; <a name="line79"></a><div class="linenumber">79</div> <a name="line80"></a><div class="linenumber">80</div><div style="width:6em;display:inline-block"></div>if (event.data.chromeMediaSourceId) { <a name="line81"></a><div class="linenumber">81</div><div style="width:8em;display:inline-block"></div>window.removeEventListener("message", cb); <a name="line82"></a><div class="linenumber">82</div><div style="width:8em;display:inline-block"></div>if (event.data.chromeMediaSourceId === 'PermissionDeniedError') { <a name="line83"></a><div class="linenumber">83</div><div style="width:10em;display:inline-block"></div>failureCallback(easyrtc.errCodes.MEDIA_ERR, 'permission-denied'); <a name="line84"></a><div class="linenumber">84</div><div style="width:8em;display:inline-block"></div>} else { <a name="line85"></a><div class="linenumber">85</div><div style="width:10em;display:inline-block"></div>easyrtc._presetMediaConstraints = { <a name="line86"></a><div class="linenumber">86</div><div style="width:12em;display:inline-block"></div>video: { <a name="line87"></a><div class="linenumber">87</div><div style="width:14em;display:inline-block"></div>mandatory: { <a name="line88"></a><div class="linenumber">88</div><div style="width:16em;display:inline-block"></div>chromeMediaSource:'desktop', <a name="line89"></a><div class="linenumber">89</div><div style="width:16em;display:inline-block"></div>chromeMediaSourceId: event.data.chromeMediaSourceId, <a name="line90"></a><div class="linenumber">90</div><div style="width:16em;display:inline-block"></div>maxWidth: 1920, <a name="line91"></a><div class="linenumber">91</div><div style="width:16em;display:inline-block"></div>maxHeight: 1080, <a name="line92"></a><div class="linenumber">92</div><div style="width:16em;display:inline-block"></div>minAspectRatio: 1.77 <a name="line93"></a><div class="linenumber">93</div><div style="width:14em;display:inline-block"></div>} <a name="line94"></a><div class="linenumber">94</div><div style="width:12em;display:inline-block"></div>}, <a name="line95"></a><div class="linenumber">95</div><div style="width:12em;display:inline-block"></div>audio: false <a name="line96"></a><div class="linenumber">96</div><div style="width:10em;display:inline-block"></div>} <a name="line97"></a><div class="linenumber">97</div><div style="width:10em;display:inline-block"></div>easyrtc.initMediaSource(successCallback, failureCallback, streamName); <a name="line98"></a><div class="linenumber">98</div><div style="width:8em;display:inline-block"></div>} <a name="line99"></a><div class="linenumber">99</div><div style="width:6em;display:inline-block"></div>} <a name="line100"></a><div class="linenumber">100</div> <a name="line101"></a><div class="linenumber">101</div><div style="width:6em;display:inline-block"></div>if (event.data.chromeExtensionStatus) { <a name="line102"></a><div class="linenumber">102</div><div style="width:8em;display:inline-block"></div>console.log("extension status is ", event.data.chromeExtensionStatus);   <a name="line103"></a><div class="linenumber">103</div><div style="width:6em;display:inline-block"></div>} <a name="line104"></a><div class="linenumber">104</div><div style="width:4em;display:inline-block"></div>}; <a name="line105"></a><div class="linenumber">105</div><div style="width:4em;display:inline-block"></div>easyrtc.desktopCaptureInstalled = null; <a name="line106"></a><div class="linenumber">106</div><div style="width:4em;display:inline-block"></div>window.addEventListener('message', cb); <a name="line107"></a><div class="linenumber">107</div><div style="width:2em;display:inline-block"></div>}; <a name="line108"></a><div class="linenumber">108</div> <a name="line109"></a><div class="linenumber">109</div> <a name="line110"></a><div class="linenumber">110</div><div style="width:2em;display:inline-block"></div>var iframe = document.createElement('iframe'); <a name="line111"></a><div class="linenumber">111</div> <a name="line112"></a><div class="linenumber">112</div><div style="width:2em;display:inline-block"></div>function postMessage() { <a name="line113"></a><div class="linenumber">113</div><div style="width:4em;display:inline-block"></div>if (!iframe.isLoaded) { <a name="line114"></a><div class="linenumber">114</div><div style="width:6em;display:inline-block"></div>setTimeout(postMessage, 100); <a name="line115"></a><div class="linenumber">115</div><div style="width:6em;display:inline-block"></div>return; <a name="line116"></a><div class="linenumber">116</div><div style="width:4em;display:inline-block"></div>} <a name="line117"></a><div class="linenumber">117</div> <a name="line118"></a><div class="linenumber">118</div><div style="width:4em;display:inline-block"></div>iframe.contentWindow.postMessage({ <a name="line119"></a><div class="linenumber">119</div><div style="width:6em;display:inline-block"></div>captureSourceId: true <a name="line120"></a><div class="linenumber">120</div><div style="width:4em;display:inline-block"></div>}, '*'); <a name="line121"></a><div class="linenumber">121</div><div style="width:2em;display:inline-block"></div>} <a name="line122"></a><div class="linenumber">122</div> <a name="line123"></a><div class="linenumber">123</div><div style="width:2em;display:inline-block"></div>iframe.onload = function() { <a name="line124"></a><div class="linenumber">124</div><div style="width:4em;display:inline-block"></div>iframe.isLoaded = true; <a name="line125"></a><div class="linenumber">125</div><div style="width:2em;display:inline-block"></div>}; <a name="line126"></a><div class="linenumber">126</div> <a name="line127"></a><div class="linenumber">127</div><div style="width:2em;display:inline-block"></div>iframe.src = iframeUrl; <a name="line128"></a><div class="linenumber">128</div> <a name="line129"></a><div class="linenumber">129</div><div style="width:2em;display:inline-block"></div>iframe.style.display = 'none'; <a name="line130"></a><div class="linenumber">130</div><div style="width:2em;display:inline-block"></div>(document.body || document.documentElement).appendChild(iframe); <a name="line131"></a><div class="linenumber">131</div><div style="width:0em;display:inline-block"></div>})(); </code></pre> </article> </section> </div> </div> </div> <footer class="template"> <div class="wrapper-content"> <p>Copyright ©2016 EasyRTC</p> </div> </footer>   </body> </html>