webrtc.js 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233
  1. "use strict";
  2. /*
  3. The MIT License (MIT)
  4. Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  5. Virtual World Framework Apache 2.0 license (https://github.com/NikolaySuslov/livecodingspace/blob/master/licenses/LICENSE_VWF.md)
  6. */
  7. /// @module vwf/view/webrtc
  8. /// @requires vwf/view
  9. define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color"], function( module, view, utility, Color) {
  10. return view.load( module, {
  11. // == Module Definition ====================================================================
  12. initialize: function( options ) {
  13. if ( !this.state ) {
  14. this.state = {};
  15. }
  16. this.state.clients = {};
  17. this.state.instances = {};
  18. this.local = {
  19. "ID": undefined,
  20. "url": undefined,
  21. "stream": undefined,
  22. "sharing": { audio: true, video: true }
  23. };
  24. if ( options === undefined ) { options = {}; }
  25. this.stereo = options.stereo !== undefined ? options.stereo : false;
  26. this.videoElementsDiv = options.videoElementsDiv !== undefined ? options.videoElementsDiv : 'videoSurfaces';
  27. this.videoProperties = options.videoProperties !== undefined ? options.videoProperties : {};
  28. this.bandwidth = options.bandwidth;
  29. this.iceServers = options.iceServers !== undefined ? options.iceServers : [ { "url": "stun:stun.l.google.com:19302" } ];
  30. this.debug = options.debug !== undefined ? options.debug : false;
  31. this.videosAdded = 0;
  32. this.msgQueue = [];
  33. },
  34. createdNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
  35. childSource, childType, childIndex, childName, callback /* ( ready ) */ ) {
  36. if ( childExtendsID === undefined )
  37. return;
  38. var self = this, node;
  39. var protos = getPrototypes.call( self, childExtendsID )
  40. if ( isClientInstanceDef.call( this, protos ) && childName ) {
  41. node = {
  42. "parentID": nodeID,
  43. "ID": childID,
  44. "extendsID": childExtendsID,
  45. "implementsIDs": childImplementsIDs,
  46. "source": childSource,
  47. "type": childType,
  48. "name": childName,
  49. "prototypes": protos,
  50. };
  51. this.state.instances[ childID ] = node;
  52. } else if ( isClientDefinition.call( this, protos ) && childName ) {
  53. // check if this instance of client and if this client is for this instance
  54. // create a login for this
  55. node = {
  56. "parentID": nodeID,
  57. "ID": childID,
  58. "moniker": undefined,
  59. "extendsID": childExtendsID,
  60. "implementsIDs": childImplementsIDs,
  61. "source": childSource,
  62. "type": childType,
  63. "name": childName,
  64. "prototypes": protos,
  65. "displayName": "",
  66. "connection": undefined,
  67. "localUrl": undefined,
  68. "remoteUrl": undefined,
  69. //"color": "rgb(0,0,0)",
  70. "createProperty": true,
  71. "sharing": { audio: true, video: true }
  72. };
  73. this.state.clients[ childID ] = node;
  74. // add the client specific locals
  75. node.moniker = appMoniker.call( this, childName );
  76. //console.info( "new client moniker: " + node.moniker );
  77. node.displayName = undefined;
  78. node.prototypes = protos;
  79. if ( this.kernel.moniker() == node.moniker ) {
  80. this.local.ID = childID;
  81. }
  82. }
  83. },
  84. deleteConnection: function(nodeID){
  85. // debugger;
  86. //if ( this.kernel.find( nodeID, "parent::element(*,'http://vwf.example.com/clients.vwf')" ).length > 0 ) {
  87. //if ( this.kernel.find( nodeID ).length > 0 ) {
  88. var moniker = nodeID.slice(-20);//this.kernel.name( nodeID );
  89. var client = undefined;
  90. if ( moniker == this.kernel.moniker() ) {
  91. // this is the client that has left the converstaion
  92. // go through the peerConnections and close the
  93. // all current connections
  94. var peer, peerMoniker;
  95. for ( var peerID in this.state.clients ) {
  96. peer = this.state.clients[ peerID ];
  97. peerMoniker = appMoniker.call( this, peer.name )
  98. if ( peerMoniker != this.kernel.moniker() ) {
  99. peer.connection && peer.connection.disconnect();
  100. let peername = 'avatar-' + peerMoniker;
  101. deletePeerConnection.call( this, peername);
  102. }
  103. }
  104. } else {
  105. // this is a client who has has a peer leave the converstaion
  106. // remove that client, and the
  107. client = findClientByMoniker.call( this, moniker );
  108. if ( client ) {
  109. client.connection && client.connection.disconnect();
  110. //removeClient.call( this, client );
  111. //delete this.state.clients[ client ]
  112. }
  113. }
  114. },
  115. stopWebRTC: function(nodeID){
  116. if( this.local.stream ){
  117. var tracks = this.local.stream.getTracks();
  118. tracks.forEach(function(track) {
  119. track.stop();
  120. });
  121. this.local.stream = undefined;
  122. let vidui = document.querySelector('#webrtcvideo');
  123. const viduicomp = new mdc.iconButton.MDCIconButtonToggle(vidui); //new mdc.select.MDCIconToggle
  124. if (vidui) viduicomp.on = false;
  125. let micui = document.querySelector('#webrtcaudio');
  126. const micuicomp = new mdc.iconButton.MDCIconButtonToggle(micui);
  127. if (micui) micuicomp.on = false;
  128. this.deleteConnection(nodeID);
  129. this.kernel.callMethod(nodeID, "removeSoundWebRTC");
  130. this.kernel.callMethod(nodeID, "removeVideoTexture");
  131. }
  132. },
  133. startWebRTC: function(childID) {
  134. var client = this.state.clients[ childID ];
  135. if ( client ) {
  136. if ( this.local.ID == childID ){
  137. // local client object
  138. // grab access to the webcam
  139. capture.call( this, this.local.sharing );
  140. var remoteClient = undefined;
  141. // existing clients
  142. for ( var clientID in this.state.clients ) {
  143. if ( clientID != this.local.ID ) {
  144. // create property for this client on each existing client
  145. remoteClient = this.state.clients[ clientID ];
  146. if ( remoteClient.createProperty ) {
  147. //console.info( "++ 1 ++ createProperty( "+clientID+", "+this.kernel.moniker()+" )" );
  148. remoteClient.createProperty = false;
  149. this.kernel.createProperty( clientID, this.kernel.moniker() );
  150. }
  151. }
  152. }
  153. } else {
  154. // not the local client, but if the local client has logged
  155. // in create the property for this on the new client
  156. if ( this.local.ID ) {
  157. if ( client.createProperty ) {
  158. client.createProperty = false;
  159. //console.info( "++ 2 ++ createProperty( "+childID+", "+this.kernel.moniker()+" )" );
  160. this.kernel.createProperty( childID, this.kernel.moniker() );
  161. }
  162. }
  163. }
  164. }
  165. },
  166. initializedNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
  167. childSource, childType, childIndex, childName ) {
  168. if ( childExtendsID === undefined )
  169. return;
  170. },
  171. deletedNode: function( nodeID ) {
  172. // debugger;
  173. //if ( this.kernel.find( nodeID, "parent::element(*,'http://vwf.example.com/clients.vwf')" ).length > 0 ) {
  174. //if ( this.kernel.find( nodeID ).length > 0 ) {
  175. var moniker = nodeID.slice(-20);//this.kernel.name( nodeID );
  176. var client = undefined;
  177. if ( moniker == this.kernel.moniker() ) {
  178. // this is the client that has left the converstaion
  179. // go through the peerConnections and close the
  180. // all current connections
  181. var peer, peerMoniker;
  182. for ( var peerID in this.state.clients ) {
  183. peer = this.state.clients[ peerID ];
  184. peerMoniker = appMoniker.call( this, peer.name )
  185. if ( peerMoniker != this.kernel.moniker() ) {
  186. peer.connection && peer.connection.disconnect();
  187. let peername = 'avatar-' + peerMoniker;
  188. deletePeerConnection.call( this, peername);
  189. }
  190. }
  191. } else {
  192. // this is a client who has has a peer leave the converstaion
  193. // remove that client, and the
  194. client = findClientByMoniker.call( this, moniker );
  195. if ( client ) {
  196. client.connection && client.connection.disconnect();
  197. removeClient.call( this, client );
  198. delete this.state.clients[ client ]
  199. }
  200. }
  201. //}
  202. },
  203. createdProperty: function( nodeID, propertyName, propertyValue ) {
  204. this.satProperty( nodeID, propertyName, propertyValue );
  205. },
  206. initializedProperty: function( nodeID, propertyName, propertyValue ) {
  207. this.satProperty( nodeID, propertyName, propertyValue );
  208. },
  209. satProperty: function( nodeID, propertyName, propertyValue ) {
  210. var client = this.state.clients[ nodeID ];
  211. if ( client ) {
  212. switch( propertyName ) {
  213. case "sharing":
  214. if ( propertyValue ) {
  215. client.sharing = propertyValue;
  216. if ( nodeID == this.local.ID ) {
  217. updateSharing.call( this, nodeID, propertyValue );
  218. }
  219. }
  220. break;
  221. case "localUrl":
  222. if ( propertyValue ) {
  223. if ( nodeID != this.local.ID ) {
  224. client.localUrl = propertyValue;
  225. }
  226. }
  227. break;
  228. case "remoteUrl":
  229. if ( propertyValue ) {
  230. client.remoteUrl = propertyValue;
  231. }
  232. break;
  233. case "displayName":
  234. if ( propertyValue ) {
  235. client.displayName = propertyValue;
  236. }
  237. break;
  238. default:
  239. // propertyName is the moniker of the client that
  240. // this connection supports
  241. if ( nodeID == this.local.ID ) {
  242. if ( propertyValue ) {
  243. // propertyName - moniker of the client
  244. // propertyValue - peerConnection message
  245. handlePeerMessage.call( this, propertyName, propertyValue );
  246. }
  247. }
  248. break;
  249. }
  250. }
  251. },
  252. gotProperty: function( nodeID, propertyName, propertyValue ) {
  253. var value = undefined;
  254. return value;
  255. },
  256. calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
  257. switch ( methodName ) {
  258. case "setLocalMute":
  259. if ( this.kernel.moniker() == this.kernel.client() ) {
  260. methodValue = setMute.call( this, methodParameters );
  261. }
  262. break;
  263. case "webrtcTurnOnOff":
  264. if ( this.kernel.moniker() == this.kernel.client() ) {
  265. console.log("WEBRTC turn on/off")
  266. methodValue = turnOnOffTracks.call( this, methodParameters );
  267. }
  268. break;
  269. case "webrtcMuteAudio":
  270. if ( this.kernel.moniker() == this.kernel.client() ) {
  271. methodValue = muteAudio.call( this, methodParameters[0] );
  272. }
  273. break;
  274. case "webrtcMuteVideo":
  275. if ( this.kernel.moniker() == this.kernel.client() ) {
  276. methodValue = this.muteVideo.call( this, methodParameters[0] );
  277. }
  278. break;
  279. }
  280. },
  281. firedEvent: function( nodeID, eventName, eventParameters ) {
  282. },
  283. muteVideo: function ( mute ) {
  284. let str = this.local.stream;
  285. if ( str ) {
  286. var tracks = str.getVideoTracks();
  287. tracks.forEach(function(track) {
  288. track.enabled = mute;
  289. });
  290. }
  291. },
  292. muteAudio: function ( mute ) {
  293. let str = this.local.stream;
  294. if ( str ) {
  295. var tracks = str.getAudioTracks();
  296. tracks.forEach(function(track) {
  297. track.enabled = mute;
  298. });
  299. }
  300. }
  301. } );
  302. function createVideoElementAsAsset(id, local) {
  303. var video = document.querySelector('#' + id);
  304. if (!video) {
  305. video = document.createElement('video');
  306. }
  307. video.setAttribute('id', id);
  308. video.setAttribute('autoplay', true);
  309. //video.setAttribute('src', '');
  310. video.setAttribute("webkit-playsinline", true);
  311. video.setAttribute("controls", true);
  312. video.setAttribute("width", 640);
  313. video.setAttribute("height", 480);
  314. if (local) video.setAttribute("muted", true);
  315. // let audioID = '#audio-' + id;
  316. // var audio = document.querySelector(audioID);
  317. // if (!audio) {
  318. // audio = document.createElement('audio');
  319. // }
  320. // audio.setAttribute('id', audioID);
  321. var assets = document.querySelector('a-assets');
  322. // if (!assets) {
  323. // assets = document.createElement('a-assets');
  324. // document.querySelector('a-scene').appendChild(assets);
  325. // }
  326. if (!assets.contains(video)) {
  327. assets.appendChild(video);
  328. }
  329. // if (!assets.contains(audio)) {
  330. // assets.appendChild(audio);
  331. // }
  332. return video //{'video': video, 'audio': audio};
  333. }
  334. function getPrototypes( extendsID ) {
  335. var prototypes = [];
  336. var id = extendsID;
  337. while ( id !== undefined ) {
  338. prototypes.push( id );
  339. id = this.kernel.prototype( id );
  340. }
  341. return prototypes;
  342. }
  343. function getPeer( moniker ) {
  344. var clientNode;
  345. for ( var id in this.state.clients ) {
  346. if ( this.state.clients[id].moniker == moniker ) {
  347. clientNode = this.state.clients[id];
  348. break;
  349. }
  350. }
  351. return clientNode;
  352. }
  353. function displayLocal( stream, name) {
  354. var id = this.kernel.moniker();
  355. return displayVideo.call( this, id, stream, this.local.url, name, id, true);
  356. }
  357. function displayVideo( id, stream, url, name, destMoniker, local) {
  358. let va = createVideoElementAsAsset(name, local);
  359. //video.setAttribute('src', url);
  360. va.srcObject = stream;
  361. //var audioCtx = new AudioContext();
  362. //var source = audioCtx.createMediaStreamSource(stream);
  363. //va.audio.src = stream;
  364. this.kernel.callMethod( 'avatar-'+id, "setVideoTexture", [name]);
  365. return id;
  366. }
  367. function removeVideo( client ) {
  368. // if ( client.videoDivID ) {
  369. // var $videoWin = $( "#" + client.videoDivID );
  370. // if ( $videoWin ) {
  371. // $videoWin.remove();
  372. // }
  373. // client.videoDivID = undefined;
  374. // }
  375. // this.kernel.callMethod( this.kernel.application(), "removeVideo", [ client.moniker ] );
  376. }
  377. function displayRemote( id, stream, url, name, destMoniker, color ) {
  378. let audioID = 'audio-' + name;
  379. this.kernel.callMethod( 'avatar-'+id, "setSoundWebRTC", [audioID]);
  380. return displayVideo.call( this, id, stream, url, name, destMoniker, true );
  381. }
  382. function capture( media ) {
  383. if ( this.local.stream === undefined && ( media.video || media.audio ) ) {
  384. var self = this;
  385. var constraints = {
  386. //audio: true,
  387. audio: {
  388. "sampleSize": 16,
  389. "channelCount": 2,
  390. "echoCancellation": true
  391. },
  392. video: true
  393. };
  394. navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
  395. function handleError(error) {
  396. console.log('navigator.getUserMedia error: ', error);
  397. }
  398. function handleSuccess(stream) {
  399. // var videoTracks = stream.getVideoTracks();
  400. // console.log('Got stream with constraints:', constraints);
  401. // if (videoTracks.length) {
  402. // videoTracks[0].enabled = true;
  403. // }
  404. self.local.url = "url" //URL.createObjectURL( stream );
  405. self.local.stream = stream;
  406. self.kernel.setProperty( self.local.ID, "localUrl", self.local.url );
  407. var localNode = self.state.clients[ self.local.ID ];
  408. self.muteAudio(false);
  409. self.muteVideo(false);
  410. let webRTCGUI = document.querySelector('#webrtcswitch');
  411. if (webRTCGUI) webRTCGUI.setAttribute("aria-pressed", true);
  412. let videoTracks = stream.getVideoTracks();
  413. let vstatus = videoTracks[0].enabled;
  414. let vidui = document.querySelector('#webrtcvideo');
  415. const viduicomp = new mdc.iconButton.MDCIconButtonToggle(vidui); //new mdc.select.MDCIconToggle
  416. if (vidui) viduicomp.on = vstatus;
  417. let audioTracks = stream.getAudioTracks();
  418. let astatus = audioTracks[0].enabled;
  419. let micui = document.querySelector('#webrtcaudio');
  420. const micuicomp = new mdc.iconButton.MDCIconButtonToggle(micui);
  421. if (micui) micuicomp.on = astatus;
  422. displayLocal.call( self, stream, localNode.displayName);
  423. sendOffers.call( self );
  424. }
  425. }
  426. }
  427. function appMoniker( name ) {
  428. return name.substr( 7, name.length-1 );
  429. }
  430. function findClientByMoniker( moniker ) {
  431. var client = undefined;
  432. for ( var id in this.state.clients ) {
  433. if ( client === undefined && moniker == this.state.clients[ id ].moniker ) {
  434. client = this.state.clients[ id ];
  435. }
  436. }
  437. return client;
  438. }
  439. function removeClient( client ) {
  440. if ( client ) {
  441. removeVideo.call( this, client );
  442. }
  443. }
  444. function sendOffers() {
  445. var peerNode;
  446. for ( var id in this.state.clients ) {
  447. if ( id != this.local.ID ) {
  448. peerNode = this.state.clients[ id ];
  449. // if there's a url then connect
  450. if ( peerNode.localUrl && peerNode.localUrl != "" && peerNode.connection === undefined ) {
  451. createPeerConnection.call( this, peerNode, true );
  452. }
  453. }
  454. }
  455. }
  456. function updateSharing( nodeID, sharing ) {
  457. setMute.call( this, !sharing.audio );
  458. setPause.call( this, !sharing.video );
  459. }
  460. function turnOnOffTracks( mute ) {
  461. let str = this.local.stream;
  462. if ( str ) {
  463. var audioTracks = str.getAudioTracks();
  464. var videoTracks = str.getVideoTracks();
  465. audioTracks.forEach(function(track) {
  466. track.enabled = mute[0];
  467. });
  468. videoTracks.forEach(function(track) {
  469. track.enabled = mute[0];
  470. });
  471. }
  472. };
  473. function muteAudio( mute ) {
  474. let str = this.local.stream;
  475. if ( str ) {
  476. var audioTracks = str.getAudioTracks();
  477. audioTracks.forEach(function(track) {
  478. track.enabled = mute;
  479. });
  480. }
  481. };
  482. function setMute( mute ) {
  483. if ( this.local.stream && this.local.stream.audioTracks && this.local.stream.audioTracks.length > 0 ) {
  484. if ( mute !== undefined ) {
  485. this.local.stream.audioTracks[0].enabled = !mute;
  486. }
  487. }
  488. };
  489. function setPause( pause ) {
  490. if ( this.local.stream && this.local.stream.videoTracks && this.local.stream.videoTracks.length > 0 ) {
  491. if ( pause !== undefined ) {
  492. this.local.stream.videoTracks[0].enabled = !pause;
  493. }
  494. }
  495. }
  496. function release() {
  497. for ( id in this.connections ) {
  498. this.connections[id].disconnect();
  499. }
  500. this.connections = {};
  501. }
  502. function hasStream() {
  503. return ( this.stream !== undefined );
  504. }
  505. function createPeerConnection( peerNode, sendOffer ) {
  506. if ( peerNode ) {
  507. if ( peerNode.connection === undefined ) {
  508. peerNode.connection = new mediaConnection( this, peerNode );
  509. peerNode.connection.connect( this.local.stream, sendOffer );
  510. //if ( this.bandwidth !== undefined ) {
  511. // debugger;
  512. //}
  513. }
  514. }
  515. }
  516. function handlePeerMessage( propertyName, msg ) {
  517. var peerNode = getPeer.call( this, propertyName )
  518. if ( peerNode ) {
  519. if ( peerNode.connection !== undefined ) {
  520. peerNode.connection.processMessage( msg );
  521. } else {
  522. if ( msg.type === 'offer' ) {
  523. this.msgQueue.unshift( msg );
  524. peerNode.connection = new mediaConnection( this, peerNode );
  525. peerNode.connection.connect( this.local.stream, false );
  526. while ( this.msgQueue.length > 0 ) {
  527. peerNode.connection.processMessage( this.msgQueue.shift() );
  528. }
  529. this.msgQueue = [];
  530. } else {
  531. this.msgQueue.push( msg );
  532. }
  533. }
  534. }
  535. }
  536. function deletePeerConnection( peerID ) {
  537. var peerNode = this.state.clients[ peerID ];
  538. if ( peerNode ) {
  539. peerNode.connection.disconnect();
  540. peerNode.connection = undefined;
  541. }
  542. }
  543. function getConnectionStats() {
  544. var peerNode = undefined;
  545. for ( var id in this.state.clients ) {
  546. peerNode = this.state.clients[ id ];
  547. if ( peerNode && peerNode.connection ) {
  548. peerNode.connection.getStats();
  549. }
  550. }
  551. }
  552. function isClientDefinition( prototypes ) {
  553. var foundClient = false;
  554. if ( prototypes ) {
  555. var len = prototypes.length;
  556. for ( var i = 0; i < len && !foundClient; i++ ) {
  557. foundClient = ( prototypes[i] == "http://vwf.example.com/aframe/avatar.vwf" );
  558. }
  559. }
  560. return foundClient;
  561. }
  562. function isClientInstanceDef( nodeID ) {
  563. return ( nodeID == "http://vwf.example.com/clients.vwf" );
  564. }
  565. function mediaConnection( view, peerNode ) {
  566. this.view = view;
  567. this.peerNode = peerNode;
  568. //
  569. this.stream = undefined;
  570. this.url = undefined;
  571. this.pc = undefined;
  572. this.connected = false;
  573. this.streamAdded = false;
  574. this.state = "created";
  575. // webrtc peerConnection parameters
  576. this.pc_config = {'iceServers': [
  577. {'url': 'stun:stun.l.google.com:19302'},
  578. {'url': 'stun:stun1.l.google.com:19302'}
  579. ]};//{ "iceServers": this.view.iceServers };
  580. this.pc_constraints = { "optional": [ { "DtlsSrtpKeyAgreement": true } ] };
  581. // Set up audio and video regardless of what devices are present.
  582. this.sdpConstraints = {
  583. 'offerToReceiveAudio':1,
  584. 'offerToReceiveVideo':1 };
  585. this.connect = function( stream, sendOffer ) {
  586. var self = this;
  587. if ( this.pc === undefined ) {
  588. if ( this.view.debug ) console.log("Creating PeerConnection.");
  589. var iceCallback = function( event ) {
  590. //console.log( "------------------------ iceCallback ------------------------" );
  591. if ( event.candidate ) {
  592. var sMsg = {
  593. "type": 'candidate',
  594. "label": event.candidate.sdpMLineIndex,
  595. "id": event.candidate.sdpMid,
  596. "candidate": event.candidate.candidate
  597. };
  598. // each client creates a property for each other
  599. // the message value is broadcast via the property
  600. self.view.kernel.setProperty( self.peerNode.ID, self.view.kernel.moniker(), sMsg );
  601. } else {
  602. if ( self.view.debug ) console.log("End of candidates.");
  603. }
  604. };
  605. // if ( webrtcDetectedBrowser == "firefox" ) {
  606. // this.pc_config = {"iceServers":[{"url":"stun:23.21.150.121"}]};
  607. // }
  608. try {
  609. this.pc = new RTCPeerConnection( this.pc_config, this.pc_constraints);
  610. this.pc.onicecandidate = iceCallback;
  611. if ( self.view.debug ) console.log("Created RTCPeerConnnection with config \"" + JSON.stringify( this.pc_config ) + "\".");
  612. } catch (e) {
  613. console.log("Failed to create PeerConnection, exception: " + e.message);
  614. alert("Cannot create RTCPeerConnection object; WebRTC is not supported by this browser.");
  615. return;
  616. }
  617. this.pc.onnegotiationeeded = function( event ) {
  618. //debugger;
  619. //console.info( "onnegotiationeeded." );
  620. }
  621. this.pc.ontrack = function( event ) {
  622. if ( self.view.debug ) console.log("Remote stream added.");
  623. self.stream = event.streams[0];
  624. self.url = "url" //URL.createObjectURL( event.streams[0] );
  625. if ( self.view.debug ) console.log("Remote stream added. url: " + self.url );
  626. var divID = displayRemote.call( self.view, self.peerNode.moniker, self.stream, self.url, self.peerNode.displayName, view.kernel.moniker(), self.peerNode.color );
  627. if ( divID !== undefined ) {
  628. self.peerNode.videoDivID = divID;
  629. }
  630. };
  631. this.pc.onremovestream = function( event ) {
  632. if ( self.view.debug ) console.log("Remote stream removed.");
  633. };
  634. this.pc.onsignalingstatechange = function() {
  635. //console.info( "onsignalingstatechange state change." );
  636. }
  637. this.pc.oniceconnectionstatechange = function( ) {
  638. if ( self && self.pc ) {
  639. var state = self.pc.signalingState || self.pc.readyState;
  640. //console.info( "peerConnection state change: " + state );
  641. }
  642. }
  643. if ( stream ) {
  644. // stream.getVideoTracks();
  645. // stream.getAudioTracks();
  646. stream.getTracks().forEach(
  647. function(track) {
  648. self.pc.addTrack(
  649. track,
  650. stream
  651. );
  652. }
  653. );
  654. //this.pc.addStream( stream );
  655. this.streamAdded = true;
  656. }
  657. if ( sendOffer ){
  658. this.call();
  659. }
  660. }
  661. this.connected = ( this.pc !== undefined );
  662. };
  663. this.setMute = function( mute ) {
  664. if ( this.stream && this.stream.audioTracks && this.stream.audioTracks.length > 0 ) {
  665. if ( mute !== undefined ) {
  666. this.stream.audioTracks[0].enabled = !mute;
  667. }
  668. }
  669. }
  670. this.setPause = function( pause ) {
  671. if ( this.stream && this.stream.videoTracks && this.stream.videoTracks.length > 0 ) {
  672. if ( pause !== undefined ) {
  673. this.stream.videoTracks[0].enabled = !pause;
  674. }
  675. }
  676. }
  677. this.disconnect = function() {
  678. if ( this.view.debug ) console.log( "PC.disconnect " + this.peerID );
  679. if ( this.pc ) {
  680. this.pc.close();
  681. this.pc = undefined;
  682. }
  683. };
  684. this.processMessage = function( msg ) {
  685. //var msg = JSON.parse(message);
  686. if ( this.view.debug ) console.log('S->C: ' + JSON.stringify(msg) );
  687. if ( this.pc ) {
  688. if ( msg.type === 'offer') {
  689. // if ( this.view.stereo ) {
  690. // msg.sdp = addStereo( msg.sdp );
  691. // }
  692. this.pc.setRemoteDescription( new RTCSessionDescription( msg ) ); //msg.sdp
  693. this.answer();
  694. } else if ( msg.type === 'answer' && this.streamAdded ) {
  695. // if ( this.view.stereo ) {
  696. // msg.sdp = addStereo( msg.sdp );
  697. // }
  698. this.pc.setRemoteDescription( new RTCSessionDescription( msg ) ); //msg.sdp
  699. } else if ( msg.type === 'candidate' && this.streamAdded ) {
  700. var candidate = new RTCIceCandidate( {
  701. "sdpMLineIndex": msg.label,
  702. "candidate": msg.candidate
  703. } );
  704. this.pc.addIceCandidate( candidate );
  705. } else if ( msg.type === 'bye' && this.streamAdded ) {
  706. this.hangup();
  707. }
  708. }
  709. };
  710. this.answer = function() {
  711. if ( this.view.debug ) console.log( "Send answer to peer" );
  712. var self = this;
  713. var answerer = function( sessionDescription ) {
  714. // // Set Opus as the preferred codec in SDP if Opus is present.
  715. // sessionDescription.sdp = self.preferOpus( sessionDescription.sdp );
  716. // sessionDescription.sdp = self.setBandwidth( sessionDescription.sdp );
  717. self.pc.setLocalDescription( sessionDescription );
  718. self.view.kernel.setProperty( self.peerNode.ID, self.view.kernel.moniker(), sessionDescription );
  719. };
  720. function onCreateSessionDescriptionError(error) {
  721. console.log('Failed to create session description: ' + error.toString());
  722. }
  723. this.pc.createAnswer(
  724. self.sdpConstraints
  725. ).then(
  726. answerer,
  727. onCreateSessionDescriptionError
  728. );
  729. //this.pc.createAnswer( answerer, null, this.sdpConstraints);
  730. };
  731. this.call = function() {
  732. var self = this;
  733. var constraints = {
  734. offerToReceiveAudio: 1,
  735. offerToReceiveVideo: 1
  736. };
  737. var offerer = function( sessionDescription ) {
  738. self.pc.setLocalDescription(sessionDescription).then(
  739. function() {
  740. onSetLocalSuccess(self.pc);
  741. },
  742. onSetSessionDescriptionError
  743. );
  744. function onSetLocalSuccess(pc) {
  745. console.log(self.pc + ' setLocalDescription complete');
  746. }
  747. function onSetSessionDescriptionError(error) {
  748. console.log('Failed to set session description: ' + error.toString());
  749. }
  750. // Set Opus as the preferred codec in SDP if Opus is present.
  751. // sessionDescription.sdp = self.preferOpus( sessionDescription.sdp );
  752. // sessionDescription.sdp = self.setBandwidth( sessionDescription.sdp );
  753. // self.pc.setLocalDescription( sessionDescription );
  754. //sendSignalMessage.call( sessionDescription, self.peerID );
  755. self.view.kernel.setProperty( self.peerNode.ID, self.view.kernel.moniker(), sessionDescription );
  756. };
  757. var onFailure = function(e) {
  758. console.log(e)
  759. }
  760. self.pc.createOffer(
  761. constraints
  762. ).then(
  763. offerer,
  764. onFailure
  765. );
  766. //this.pc.createOffer( offerer, onFailure, constraints );
  767. };
  768. this.setBandwidth = function( sdp ) {
  769. // apparently this only works in chrome
  770. if ( this.bandwidth === undefined || moz ) {
  771. return sdp;
  772. }
  773. // remove existing bandwidth lines
  774. sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, '');
  775. if ( this.bandwidth.audio ) {
  776. sdp = sdp.replace(/a=mid:audio\r\n/g, 'a=mid:audio\r\nb=AS:' + this.bandwidth.audio + '\r\n');
  777. }
  778. if ( this.bandwidth.video ) {
  779. sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:' + this.bandwidth.video + '\r\n');
  780. }
  781. if ( this.bandwidth.data /*&& !options.preferSCTP */ ) {
  782. sdp = sdp.replace(/a=mid:data\r\n/g, 'a=mid:data\r\nb=AS:' + this.bandwidth.data + '\r\n');
  783. }
  784. return sdp;
  785. }
  786. this.getStats = function(){
  787. if ( this.pc && this.pc.getStats ) {
  788. console.info( "pc.iceConnectionState = " + this.pc.iceConnectionState );
  789. console.info( " pc.iceGatheringState = " + this.pc.iceGatheringState );
  790. console.info( " pc.readyState = " + this.pc.readyState );
  791. console.info( " pc.signalingState = " + this.pc.signalingState );
  792. var consoleStats = function( obj ) {
  793. console.info( ' Timestamp:' + obj.timestamp );
  794. if ( obj.id ) {
  795. console.info( ' id: ' + obj.id );
  796. }
  797. if ( obj.type ) {
  798. console.info( ' type: ' + obj.type );
  799. }
  800. if ( obj.names ) {
  801. var names = obj.names();
  802. for ( var i = 0; i < names.length; ++i ) {
  803. console.info( " "+names[ i ]+": " + obj.stat( names[ i ] ) );
  804. }
  805. } else {
  806. if ( obj.stat && obj.stat( 'audioOutputLevel' ) ) {
  807. console.info( " audioOutputLevel: " + obj.stat( 'audioOutputLevel' ) );
  808. }
  809. }
  810. };
  811. // local function
  812. var readStats = function( stats ) {
  813. var results = stats.result();
  814. var bitrateText = 'No bitrate stats';
  815. for ( var i = 0; i < results.length; ++i ) {
  816. var res = results[ i ];
  817. console.info( 'Report ' + i );
  818. if ( !res.local || res.local === res ) {
  819. consoleStats( res );
  820. // The bandwidth info for video is in a type ssrc stats record
  821. // with googFrameHeightReceived defined.
  822. // Should check for mediatype = video, but this is not
  823. // implemented yet.
  824. if ( res.type == 'ssrc' && res.stat( 'googFrameHeightReceived' ) ) {
  825. var bytesNow = res.stat( 'bytesReceived' );
  826. if ( timestampPrev > 0) {
  827. var bitRate = Math.round( ( bytesNow - bytesPrev ) * 8 / ( res.timestamp - timestampPrev ) );
  828. bitrateText = bitRate + ' kbits/sec';
  829. }
  830. timestampPrev = res.timestamp;
  831. bytesPrev = bytesNow;
  832. }
  833. } else {
  834. // Pre-227.0.1445 (188719) browser
  835. if ( res.local ) {
  836. console.info( " Local: " );
  837. consoleStats( res.local );
  838. }
  839. if ( res.remote ) {
  840. console.info( " Remote: " );
  841. consoleStats( res.remote );
  842. }
  843. }
  844. }
  845. console.info( " bitrate: " + bitrateText )
  846. }
  847. this.pc.getStats( readStats );
  848. }
  849. }
  850. this.hangup = function() {
  851. if ( this.view.debug ) console.log( "PC.hangup " + this.id );
  852. if ( this.pc ) {
  853. this.pc.close();
  854. this.pc = undefined;
  855. }
  856. };
  857. this.mergeConstraints = function( cons1, cons2 ) {
  858. var merged = cons1;
  859. for (var name in cons2.mandatory) {
  860. merged.mandatory[ name ] = cons2.mandatory[ name ];
  861. }
  862. merged.optional.concat( cons2.optional );
  863. return merged;
  864. }
  865. // Set Opus as the default audio codec if it's present.
  866. this.preferOpus = function( sdp ) {
  867. var sdpLines = sdp.split( '\r\n' );
  868. // Search for m line.
  869. for ( var i = 0; i < sdpLines.length; i++ ) {
  870. if ( sdpLines[i].search( 'm=audio' ) !== -1 ) {
  871. var mLineIndex = i;
  872. break;
  873. }
  874. }
  875. if ( mLineIndex === null ) {
  876. return sdp;
  877. }
  878. // for ( var i = 0; i < sdpLines.length; i++ ) {
  879. // if ( i == 0 ) console.info( "=============================================" );
  880. // console.info( "sdpLines["+i+"] = " + sdpLines[i] );
  881. // }
  882. // If Opus is available, set it as the default in m line.
  883. for ( var i = 0; i < sdpLines.length; i++ ) {
  884. if ( sdpLines[i].search( 'opus/48000' ) !== -1 ) {
  885. var opusPayload = this.extractSdp( sdpLines[i], /:(\d+) opus\/48000/i );
  886. if ( opusPayload) {
  887. sdpLines[ mLineIndex ] = this.setDefaultCodec( sdpLines[ mLineIndex ], opusPayload );
  888. }
  889. break;
  890. }
  891. }
  892. // Remove CN in m line and sdp.
  893. sdpLines = this.removeCN( sdpLines, mLineIndex );
  894. sdp = sdpLines.join('\r\n');
  895. return sdp;
  896. }
  897. // Set Opus in stereo if stereo is enabled.
  898. function addStereo( sdp ) {
  899. var sdpLines = sdp.split('\r\n');
  900. // Find opus payload.
  901. for (var i = 0; i < sdpLines.length; i++) {
  902. if (sdpLines[i].search('opus/48000') !== -1) {
  903. var opusPayload = extractSdp(sdpLines[i], /:(\d+) opus\/48000/i);
  904. break;
  905. }
  906. }
  907. // Find the payload in fmtp line.
  908. for (var i = 0; i < sdpLines.length; i++) {
  909. if (sdpLines[i].search('a=fmtp') !== -1) {
  910. var payload = extractSdp(sdpLines[i], /a=fmtp:(\d+)/ );
  911. if (payload === opusPayload) {
  912. var fmtpLineIndex = i;
  913. break;
  914. }
  915. }
  916. }
  917. // No fmtp line found.
  918. if (fmtpLineIndex === null)
  919. return sdp;
  920. // Append stereo=1 to fmtp line.
  921. sdpLines[fmtpLineIndex] = sdpLines[fmtpLineIndex].concat(' stereo=1');
  922. sdp = sdpLines.join('\r\n');
  923. return sdp;
  924. }
  925. // Strip CN from sdp before CN constraints is ready.
  926. this.removeCN = function( sdpLines, mLineIndex ) {
  927. var mLineElements = sdpLines[mLineIndex].split( ' ' );
  928. // Scan from end for the convenience of removing an item.
  929. for ( var i = sdpLines.length-1; i >= 0; i-- ) {
  930. var payload = this.extractSdp( sdpLines[i], /a=rtpmap:(\d+) CN\/\d+/i );
  931. if ( payload ) {
  932. var cnPos = mLineElements.indexOf( payload );
  933. if ( cnPos !== -1 ) {
  934. // Remove CN payload from m line.
  935. mLineElements.splice( cnPos, 1 );
  936. }
  937. // Remove CN line in sdp
  938. sdpLines.splice( i, 1 );
  939. }
  940. }
  941. sdpLines[ mLineIndex ] = mLineElements.join( ' ' );
  942. return sdpLines;
  943. }
  944. this.extractSdp = function( sdpLine, pattern ) {
  945. var result = sdpLine.match( pattern );
  946. return ( result && result.length == 2 ) ? result[ 1 ] : null;
  947. }
  948. // Set the selected codec to the first in m line.
  949. this.setDefaultCodec = function( mLine, payload ) {
  950. var elements = mLine.split( ' ' );
  951. var newLine = new Array();
  952. var index = 0;
  953. for ( var i = 0; i < elements.length; i++ ) {
  954. if ( index === 3 ) // Format of media starts from the fourth.
  955. newLine[ index++ ] = payload; // Put target payload to the first.
  956. if ( elements[ i ] !== payload )
  957. newLine[ index++ ] = elements[ i ];
  958. }
  959. return newLine.join( ' ' );
  960. }
  961. }
  962. } );