webrtc.js 45 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249
  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(*,'proxy/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(*,'proxy/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. let videoAsset = document.querySelector('#video-avatar-' + self.kernel.moniker());
  287. if (videoAsset)
  288. videoAsset.volume = 0;
  289. var tracks = str.getVideoTracks();
  290. tracks.forEach(function(track) {
  291. track.enabled = mute;
  292. });
  293. }
  294. },
  295. muteAudio: function ( mute ) {
  296. let str = this.local.stream;
  297. if ( str ) {
  298. let videoAsset = document.querySelector('#video-avatar-' + self.kernel.moniker());
  299. if (videoAsset)
  300. videoAsset.volume = 0;
  301. var tracks = str.getAudioTracks();
  302. tracks.forEach(function(track) {
  303. track.enabled = mute;
  304. });
  305. }
  306. }
  307. } );
  308. function createVideoElementAsAsset(id, local) {
  309. var video = document.querySelector('#' + id);
  310. if (!video) {
  311. video = document.createElement('video');
  312. }
  313. video.setAttribute('id', id);
  314. video.setAttribute('autoplay', true);
  315. //video.setAttribute('src', '');
  316. video.setAttribute("webkit-playsinline", true);
  317. video.setAttribute("controls", true);
  318. video.setAttribute("width", 640);
  319. video.setAttribute("height", 480);
  320. if (local) {
  321. // video.muted = false;
  322. video.setAttribute("muted", false);
  323. //video.setAttribute("volume", 0);
  324. //video.volume = 0;
  325. }
  326. // let audioID = '#audio-' + id;
  327. // var audio = document.querySelector(audioID);
  328. // if (!audio) {
  329. // audio = document.createElement('audio');
  330. // }
  331. // audio.setAttribute('id', audioID);
  332. var assets = document.querySelector('a-assets');
  333. // if (!assets) {
  334. // assets = document.createElement('a-assets');
  335. // document.querySelector('a-scene').appendChild(assets);
  336. // }
  337. if (!assets.contains(video)) {
  338. assets.appendChild(video);
  339. }
  340. // if (!assets.contains(audio)) {
  341. // assets.appendChild(audio);
  342. // }
  343. return video //{'video': video, 'audio': audio};
  344. }
  345. function getPrototypes( extendsID ) {
  346. var prototypes = [];
  347. var id = extendsID;
  348. while ( id !== undefined ) {
  349. prototypes.push( id );
  350. id = this.kernel.prototype( id );
  351. }
  352. return prototypes;
  353. }
  354. function getPeer( moniker ) {
  355. var clientNode;
  356. for ( var id in this.state.clients ) {
  357. if ( this.state.clients[id].moniker == moniker ) {
  358. clientNode = this.state.clients[id];
  359. break;
  360. }
  361. }
  362. return clientNode;
  363. }
  364. function displayLocal( stream, name) {
  365. var id = this.kernel.moniker();
  366. return displayVideo.call( this, id, stream, this.local.url, name, id, true);
  367. }
  368. function displayVideo( id, stream, url, name, destMoniker, local) {
  369. let assetName = 'video-avatar-'+id;
  370. let va = createVideoElementAsAsset(assetName, local);
  371. //video.setAttribute('src', url);
  372. va.srcObject = stream;
  373. //var audioCtx = new AudioContext();
  374. //var source = audioCtx.createMediaStreamSource(stream);
  375. //va.audio.src = stream;
  376. this.kernel.callMethod( 'avatar-'+id, "setVideoTexture", [assetName]);
  377. return id;
  378. }
  379. function removeVideo( client ) {
  380. // if ( client.videoDivID ) {
  381. // var $videoWin = $( "#" + client.videoDivID );
  382. // if ( $videoWin ) {
  383. // $videoWin.remove();
  384. // }
  385. // client.videoDivID = undefined;
  386. // }
  387. // this.kernel.callMethod( this.kernel.application(), "removeVideo", [ client.moniker ] );
  388. }
  389. function displayRemote( id, stream, url, name, destMoniker, color ) {
  390. let audioID = 'audio-' + name;
  391. this.kernel.callMethod( 'avatar-'+id, "setSoundWebRTC", [audioID]);
  392. return displayVideo.call( this, id, stream, url, name, destMoniker, true );
  393. }
  394. function capture( media ) {
  395. if ( this.local.stream === undefined && ( media.video || media.audio ) ) {
  396. var self = this;
  397. var constraints = {
  398. //audio: true,
  399. audio: {
  400. "sampleSize": 16,
  401. "channelCount": 2,
  402. "echoCancellation": true
  403. },
  404. video: true
  405. };
  406. navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
  407. function handleError(error) {
  408. console.log('navigator.getUserMedia error: ', error);
  409. }
  410. function handleSuccess(stream) {
  411. // var videoTracks = stream.getVideoTracks();
  412. // console.log('Got stream with constraints:', constraints);
  413. // if (videoTracks.length) {
  414. // videoTracks[0].enabled = true;
  415. // }
  416. self.local.url = "url" //URL.createObjectURL( stream );
  417. self.local.stream = stream;
  418. self.kernel.setProperty( self.local.ID, "localUrl", self.local.url );
  419. var localNode = self.state.clients[ self.local.ID ];
  420. self.muteAudio(false);
  421. self.muteVideo(false);
  422. let webRTCGUI = document.querySelector('#webrtcswitch');
  423. if (webRTCGUI) webRTCGUI.setAttribute("aria-pressed", true);
  424. let videoTracks = stream.getVideoTracks();
  425. let vstatus = videoTracks[0].enabled;
  426. let vidui = document.querySelector('#webrtcvideo');
  427. const viduicomp = new mdc.iconButton.MDCIconButtonToggle(vidui); //new mdc.select.MDCIconToggle
  428. if (vidui) viduicomp.on = vstatus;
  429. let audioTracks = stream.getAudioTracks();
  430. let astatus = audioTracks[0].enabled;
  431. let micui = document.querySelector('#webrtcaudio');
  432. const micuicomp = new mdc.iconButton.MDCIconButtonToggle(micui);
  433. if (micui) micuicomp.on = astatus;
  434. displayLocal.call( self, stream, localNode.displayName);
  435. sendOffers.call( self );
  436. }
  437. }
  438. }
  439. function appMoniker( name ) {
  440. return name.substr( 7, name.length-1 );
  441. }
  442. function findClientByMoniker( moniker ) {
  443. var client = undefined;
  444. for ( var id in this.state.clients ) {
  445. if ( client === undefined && moniker == this.state.clients[ id ].moniker ) {
  446. client = this.state.clients[ id ];
  447. }
  448. }
  449. return client;
  450. }
  451. function removeClient( client ) {
  452. if ( client ) {
  453. removeVideo.call( this, client );
  454. }
  455. }
  456. function sendOffers() {
  457. var peerNode;
  458. for ( var id in this.state.clients ) {
  459. if ( id != this.local.ID ) {
  460. peerNode = this.state.clients[ id ];
  461. // if there's a url then connect
  462. if ( peerNode.localUrl && peerNode.localUrl != "" && peerNode.connection === undefined ) {
  463. createPeerConnection.call( this, peerNode, true );
  464. }
  465. }
  466. }
  467. }
  468. function updateSharing( nodeID, sharing ) {
  469. setMute.call( this, !sharing.audio );
  470. setPause.call( this, !sharing.video );
  471. }
  472. function turnOnOffTracks( mute ) {
  473. let str = this.local.stream;
  474. if ( str ) {
  475. var audioTracks = str.getAudioTracks();
  476. var videoTracks = str.getVideoTracks();
  477. audioTracks.forEach(function(track) {
  478. track.enabled = mute[0];
  479. });
  480. videoTracks.forEach(function(track) {
  481. track.enabled = mute[0];
  482. });
  483. }
  484. };
  485. function muteAudio( mute ) {
  486. let str = this.local.stream;
  487. if ( str ) {
  488. var audioTracks = str.getAudioTracks();
  489. audioTracks.forEach(function(track) {
  490. track.enabled = mute;
  491. });
  492. }
  493. };
  494. function setMute( mute ) {
  495. if ( this.local.stream && this.local.stream.audioTracks && this.local.stream.audioTracks.length > 0 ) {
  496. if ( mute !== undefined ) {
  497. this.local.stream.audioTracks[0].enabled = !mute;
  498. }
  499. }
  500. };
  501. function setPause( pause ) {
  502. if ( this.local.stream && this.local.stream.videoTracks && this.local.stream.videoTracks.length > 0 ) {
  503. if ( pause !== undefined ) {
  504. this.local.stream.videoTracks[0].enabled = !pause;
  505. }
  506. }
  507. }
  508. function release() {
  509. for ( id in this.connections ) {
  510. this.connections[id].disconnect();
  511. }
  512. this.connections = {};
  513. }
  514. function hasStream() {
  515. return ( this.stream !== undefined );
  516. }
  517. function createPeerConnection( peerNode, sendOffer ) {
  518. if ( peerNode ) {
  519. if ( peerNode.connection === undefined ) {
  520. peerNode.connection = new mediaConnection( this, peerNode );
  521. peerNode.connection.connect( this.local.stream, sendOffer );
  522. //if ( this.bandwidth !== undefined ) {
  523. // debugger;
  524. //}
  525. }
  526. }
  527. }
  528. function handlePeerMessage( propertyName, msg ) {
  529. var peerNode = getPeer.call( this, propertyName )
  530. if ( peerNode ) {
  531. if ( peerNode.connection !== undefined ) {
  532. peerNode.connection.processMessage( msg );
  533. } else {
  534. if ( msg.type === 'offer' ) {
  535. this.msgQueue.unshift( msg );
  536. peerNode.connection = new mediaConnection( this, peerNode );
  537. peerNode.connection.connect( this.local.stream, false );
  538. while ( this.msgQueue.length > 0 ) {
  539. peerNode.connection.processMessage( this.msgQueue.shift() );
  540. }
  541. this.msgQueue = [];
  542. } else {
  543. this.msgQueue.push( msg );
  544. }
  545. }
  546. }
  547. }
  548. function deletePeerConnection( peerID ) {
  549. var peerNode = this.state.clients[ peerID ];
  550. if ( peerNode ) {
  551. peerNode.connection.disconnect();
  552. peerNode.connection = undefined;
  553. }
  554. }
  555. function getConnectionStats() {
  556. var peerNode = undefined;
  557. for ( var id in this.state.clients ) {
  558. peerNode = this.state.clients[ id ];
  559. if ( peerNode && peerNode.connection ) {
  560. peerNode.connection.getStats();
  561. }
  562. }
  563. }
  564. function isClientDefinition( prototypes ) {
  565. var foundClient = false;
  566. if ( prototypes ) {
  567. var len = prototypes.length;
  568. for ( var i = 0; i < len && !foundClient; i++ ) {
  569. foundClient = ( prototypes[i] == "proxy/aframe/avatar.vwf" );
  570. }
  571. }
  572. return foundClient;
  573. }
  574. function isClientInstanceDef( nodeID ) {
  575. return ( nodeID == "proxy/clients.vwf" );
  576. }
  577. function mediaConnection( view, peerNode ) {
  578. this.view = view;
  579. this.peerNode = peerNode;
  580. //
  581. this.stream = undefined;
  582. this.url = undefined;
  583. this.pc = undefined;
  584. this.connected = false;
  585. this.streamAdded = false;
  586. this.state = "created";
  587. // webrtc peerConnection parameters
  588. this.pc_config = {'iceServers': [
  589. {'url': 'stun:stun.l.google.com:19302'},
  590. {'url': 'stun:stun1.l.google.com:19302'}
  591. ]};//{ "iceServers": this.view.iceServers };
  592. this.pc_constraints = { "optional": [ { "DtlsSrtpKeyAgreement": true } ] };
  593. // Set up audio and video regardless of what devices are present.
  594. this.sdpConstraints = {
  595. 'offerToReceiveAudio':1,
  596. 'offerToReceiveVideo':1 };
  597. this.connect = function( stream, sendOffer ) {
  598. var self = this;
  599. if ( this.pc === undefined ) {
  600. if ( this.view.debug ) console.log("Creating PeerConnection.");
  601. var iceCallback = function( event ) {
  602. //console.log( "------------------------ iceCallback ------------------------" );
  603. if ( event.candidate ) {
  604. var sMsg = {
  605. "type": 'candidate',
  606. "label": event.candidate.sdpMLineIndex,
  607. "id": event.candidate.sdpMid,
  608. "candidate": event.candidate.candidate
  609. };
  610. // each client creates a property for each other
  611. // the message value is broadcast via the property
  612. self.view.kernel.setProperty( self.peerNode.ID, self.view.kernel.moniker(), sMsg );
  613. } else {
  614. if ( self.view.debug ) console.log("End of candidates.");
  615. }
  616. };
  617. // if ( webrtcDetectedBrowser == "firefox" ) {
  618. // this.pc_config = {"iceServers":[{"url":"stun:23.21.150.121"}]};
  619. // }
  620. try {
  621. this.pc = new RTCPeerConnection( this.pc_config, this.pc_constraints);
  622. this.pc.onicecandidate = iceCallback;
  623. if ( self.view.debug ) console.log("Created RTCPeerConnnection with config \"" + JSON.stringify( this.pc_config ) + "\".");
  624. } catch (e) {
  625. console.log("Failed to create PeerConnection, exception: " + e.message);
  626. alert("Cannot create RTCPeerConnection object; WebRTC is not supported by this browser.");
  627. return;
  628. }
  629. this.pc.onnegotiationeeded = function( event ) {
  630. //debugger;
  631. //console.info( "onnegotiationeeded." );
  632. }
  633. this.pc.ontrack = function( event ) {
  634. if ( self.view.debug ) console.log("Remote stream added.");
  635. self.stream = event.streams[0];
  636. self.url = "url" //URL.createObjectURL( event.streams[0] );
  637. if ( self.view.debug ) console.log("Remote stream added. url: " + self.url );
  638. var divID = displayRemote.call( self.view, self.peerNode.moniker, self.stream, self.url, self.peerNode.displayName, view.kernel.moniker(), self.peerNode.color );
  639. if ( divID !== undefined ) {
  640. self.peerNode.videoDivID = divID;
  641. }
  642. };
  643. this.pc.onremovestream = function( event ) {
  644. if ( self.view.debug ) console.log("Remote stream removed.");
  645. };
  646. this.pc.onsignalingstatechange = function() {
  647. //console.info( "onsignalingstatechange state change." );
  648. }
  649. this.pc.oniceconnectionstatechange = function( ) {
  650. if ( self && self.pc ) {
  651. var state = self.pc.signalingState || self.pc.readyState;
  652. //console.info( "peerConnection state change: " + state );
  653. }
  654. }
  655. if ( stream ) {
  656. // stream.getVideoTracks();
  657. // stream.getAudioTracks();
  658. stream.getTracks().forEach(
  659. function(track) {
  660. self.pc.addTrack(
  661. track,
  662. stream
  663. );
  664. }
  665. );
  666. //this.pc.addStream( stream );
  667. this.streamAdded = true;
  668. }
  669. if ( sendOffer ){
  670. this.call();
  671. }
  672. }
  673. this.connected = ( this.pc !== undefined );
  674. };
  675. this.setMute = function( mute ) {
  676. if ( this.stream && this.stream.audioTracks && this.stream.audioTracks.length > 0 ) {
  677. if ( mute !== undefined ) {
  678. this.stream.audioTracks[0].enabled = !mute;
  679. }
  680. }
  681. }
  682. this.setPause = function( pause ) {
  683. if ( this.stream && this.stream.videoTracks && this.stream.videoTracks.length > 0 ) {
  684. if ( pause !== undefined ) {
  685. this.stream.videoTracks[0].enabled = !pause;
  686. }
  687. }
  688. }
  689. this.disconnect = function() {
  690. if ( this.view.debug ) console.log( "PC.disconnect " + this.peerID );
  691. if ( this.pc ) {
  692. this.pc.close();
  693. this.pc = undefined;
  694. }
  695. };
  696. this.processMessage = function( msg ) {
  697. //var msg = JSON.parse(message);
  698. if ( this.view.debug ) console.log('S->C: ' + JSON.stringify(msg) );
  699. if ( this.pc ) {
  700. if ( msg.type === 'offer') {
  701. // if ( this.view.stereo ) {
  702. // msg.sdp = addStereo( msg.sdp );
  703. // }
  704. this.pc.setRemoteDescription( new RTCSessionDescription( msg ) ); //msg.sdp
  705. this.answer();
  706. } else if ( msg.type === 'answer' && this.streamAdded ) {
  707. // if ( this.view.stereo ) {
  708. // msg.sdp = addStereo( msg.sdp );
  709. // }
  710. this.pc.setRemoteDescription( new RTCSessionDescription( msg ) ); //msg.sdp
  711. } else if ( msg.type === 'candidate' && this.streamAdded ) {
  712. var candidate = new RTCIceCandidate( {
  713. "sdpMLineIndex": msg.label,
  714. "candidate": msg.candidate
  715. } );
  716. this.pc.addIceCandidate( candidate );
  717. } else if ( msg.type === 'bye' && this.streamAdded ) {
  718. this.hangup();
  719. }
  720. }
  721. };
  722. this.answer = function() {
  723. if ( this.view.debug ) console.log( "Send answer to peer" );
  724. var self = this;
  725. var answerer = function( sessionDescription ) {
  726. // // Set Opus as the preferred codec in SDP if Opus is present.
  727. // sessionDescription.sdp = self.preferOpus( sessionDescription.sdp );
  728. // sessionDescription.sdp = self.setBandwidth( sessionDescription.sdp );
  729. self.pc.setLocalDescription( sessionDescription );
  730. self.view.kernel.setProperty( self.peerNode.ID, self.view.kernel.moniker(), sessionDescription );
  731. };
  732. function onCreateSessionDescriptionError(error) {
  733. console.log('Failed to create session description: ' + error.toString());
  734. }
  735. this.pc.createAnswer(
  736. self.sdpConstraints
  737. ).then(
  738. answerer,
  739. onCreateSessionDescriptionError
  740. );
  741. //this.pc.createAnswer( answerer, null, this.sdpConstraints);
  742. };
  743. this.call = function() {
  744. var self = this;
  745. var constraints = {
  746. offerToReceiveAudio: 1,
  747. offerToReceiveVideo: 1
  748. };
  749. var offerer = function( sessionDescription ) {
  750. self.pc.setLocalDescription(sessionDescription).then(
  751. function() {
  752. onSetLocalSuccess(self.pc);
  753. },
  754. onSetSessionDescriptionError
  755. );
  756. function onSetLocalSuccess(pc) {
  757. console.log(self.pc + ' setLocalDescription complete');
  758. }
  759. function onSetSessionDescriptionError(error) {
  760. console.log('Failed to set session description: ' + error.toString());
  761. }
  762. // Set Opus as the preferred codec in SDP if Opus is present.
  763. // sessionDescription.sdp = self.preferOpus( sessionDescription.sdp );
  764. // sessionDescription.sdp = self.setBandwidth( sessionDescription.sdp );
  765. // self.pc.setLocalDescription( sessionDescription );
  766. //sendSignalMessage.call( sessionDescription, self.peerID );
  767. self.view.kernel.setProperty( self.peerNode.ID, self.view.kernel.moniker(), sessionDescription );
  768. };
  769. var onFailure = function(e) {
  770. console.log(e)
  771. }
  772. self.pc.createOffer(
  773. constraints
  774. ).then(
  775. offerer,
  776. onFailure
  777. );
  778. //this.pc.createOffer( offerer, onFailure, constraints );
  779. };
  780. this.setBandwidth = function( sdp ) {
  781. // apparently this only works in chrome
  782. if ( this.bandwidth === undefined || moz ) {
  783. return sdp;
  784. }
  785. // remove existing bandwidth lines
  786. sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, '');
  787. if ( this.bandwidth.audio ) {
  788. sdp = sdp.replace(/a=mid:audio\r\n/g, 'a=mid:audio\r\nb=AS:' + this.bandwidth.audio + '\r\n');
  789. }
  790. if ( this.bandwidth.video ) {
  791. sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:' + this.bandwidth.video + '\r\n');
  792. }
  793. if ( this.bandwidth.data /*&& !options.preferSCTP */ ) {
  794. sdp = sdp.replace(/a=mid:data\r\n/g, 'a=mid:data\r\nb=AS:' + this.bandwidth.data + '\r\n');
  795. }
  796. return sdp;
  797. }
  798. this.getStats = function(){
  799. if ( this.pc && this.pc.getStats ) {
  800. console.info( "pc.iceConnectionState = " + this.pc.iceConnectionState );
  801. console.info( " pc.iceGatheringState = " + this.pc.iceGatheringState );
  802. console.info( " pc.readyState = " + this.pc.readyState );
  803. console.info( " pc.signalingState = " + this.pc.signalingState );
  804. var consoleStats = function( obj ) {
  805. console.info( ' Timestamp:' + obj.timestamp );
  806. if ( obj.id ) {
  807. console.info( ' id: ' + obj.id );
  808. }
  809. if ( obj.type ) {
  810. console.info( ' type: ' + obj.type );
  811. }
  812. if ( obj.names ) {
  813. var names = obj.names();
  814. for ( var i = 0; i < names.length; ++i ) {
  815. console.info( " "+names[ i ]+": " + obj.stat( names[ i ] ) );
  816. }
  817. } else {
  818. if ( obj.stat && obj.stat( 'audioOutputLevel' ) ) {
  819. console.info( " audioOutputLevel: " + obj.stat( 'audioOutputLevel' ) );
  820. }
  821. }
  822. };
  823. // local function
  824. var readStats = function( stats ) {
  825. var results = stats.result();
  826. var bitrateText = 'No bitrate stats';
  827. for ( var i = 0; i < results.length; ++i ) {
  828. var res = results[ i ];
  829. console.info( 'Report ' + i );
  830. if ( !res.local || res.local === res ) {
  831. consoleStats( res );
  832. // The bandwidth info for video is in a type ssrc stats record
  833. // with googFrameHeightReceived defined.
  834. // Should check for mediatype = video, but this is not
  835. // implemented yet.
  836. if ( res.type == 'ssrc' && res.stat( 'googFrameHeightReceived' ) ) {
  837. var bytesNow = res.stat( 'bytesReceived' );
  838. if ( timestampPrev > 0) {
  839. var bitRate = Math.round( ( bytesNow - bytesPrev ) * 8 / ( res.timestamp - timestampPrev ) );
  840. bitrateText = bitRate + ' kbits/sec';
  841. }
  842. timestampPrev = res.timestamp;
  843. bytesPrev = bytesNow;
  844. }
  845. } else {
  846. // Pre-227.0.1445 (188719) browser
  847. if ( res.local ) {
  848. console.info( " Local: " );
  849. consoleStats( res.local );
  850. }
  851. if ( res.remote ) {
  852. console.info( " Remote: " );
  853. consoleStats( res.remote );
  854. }
  855. }
  856. }
  857. console.info( " bitrate: " + bitrateText )
  858. }
  859. this.pc.getStats( readStats );
  860. }
  861. }
  862. this.hangup = function() {
  863. if ( this.view.debug ) console.log( "PC.hangup " + this.id );
  864. if ( this.pc ) {
  865. this.pc.close();
  866. this.pc = undefined;
  867. }
  868. };
  869. this.mergeConstraints = function( cons1, cons2 ) {
  870. var merged = cons1;
  871. for (var name in cons2.mandatory) {
  872. merged.mandatory[ name ] = cons2.mandatory[ name ];
  873. }
  874. merged.optional.concat( cons2.optional );
  875. return merged;
  876. }
  877. // Set Opus as the default audio codec if it's present.
  878. this.preferOpus = function( sdp ) {
  879. var sdpLines = sdp.split( '\r\n' );
  880. // Search for m line.
  881. for ( var i = 0; i < sdpLines.length; i++ ) {
  882. if ( sdpLines[i].search( 'm=audio' ) !== -1 ) {
  883. var mLineIndex = i;
  884. break;
  885. }
  886. }
  887. if ( mLineIndex === null ) {
  888. return sdp;
  889. }
  890. // for ( var i = 0; i < sdpLines.length; i++ ) {
  891. // if ( i == 0 ) console.info( "=============================================" );
  892. // console.info( "sdpLines["+i+"] = " + sdpLines[i] );
  893. // }
  894. // If Opus is available, set it as the default in m line.
  895. for ( var i = 0; i < sdpLines.length; i++ ) {
  896. if ( sdpLines[i].search( 'opus/48000' ) !== -1 ) {
  897. var opusPayload = this.extractSdp( sdpLines[i], /:(\d+) opus\/48000/i );
  898. if ( opusPayload) {
  899. sdpLines[ mLineIndex ] = this.setDefaultCodec( sdpLines[ mLineIndex ], opusPayload );
  900. }
  901. break;
  902. }
  903. }
  904. // Remove CN in m line and sdp.
  905. sdpLines = this.removeCN( sdpLines, mLineIndex );
  906. sdp = sdpLines.join('\r\n');
  907. return sdp;
  908. }
  909. // Set Opus in stereo if stereo is enabled.
  910. function addStereo( sdp ) {
  911. var sdpLines = sdp.split('\r\n');
  912. // Find opus payload.
  913. for (var i = 0; i < sdpLines.length; i++) {
  914. if (sdpLines[i].search('opus/48000') !== -1) {
  915. var opusPayload = extractSdp(sdpLines[i], /:(\d+) opus\/48000/i);
  916. break;
  917. }
  918. }
  919. // Find the payload in fmtp line.
  920. for (var i = 0; i < sdpLines.length; i++) {
  921. if (sdpLines[i].search('a=fmtp') !== -1) {
  922. var payload = extractSdp(sdpLines[i], /a=fmtp:(\d+)/ );
  923. if (payload === opusPayload) {
  924. var fmtpLineIndex = i;
  925. break;
  926. }
  927. }
  928. }
  929. // No fmtp line found.
  930. if (fmtpLineIndex === null)
  931. return sdp;
  932. // Append stereo=1 to fmtp line.
  933. sdpLines[fmtpLineIndex] = sdpLines[fmtpLineIndex].concat(' stereo=1');
  934. sdp = sdpLines.join('\r\n');
  935. return sdp;
  936. }
  937. // Strip CN from sdp before CN constraints is ready.
  938. this.removeCN = function( sdpLines, mLineIndex ) {
  939. var mLineElements = sdpLines[mLineIndex].split( ' ' );
  940. // Scan from end for the convenience of removing an item.
  941. for ( var i = sdpLines.length-1; i >= 0; i-- ) {
  942. var payload = this.extractSdp( sdpLines[i], /a=rtpmap:(\d+) CN\/\d+/i );
  943. if ( payload ) {
  944. var cnPos = mLineElements.indexOf( payload );
  945. if ( cnPos !== -1 ) {
  946. // Remove CN payload from m line.
  947. mLineElements.splice( cnPos, 1 );
  948. }
  949. // Remove CN line in sdp
  950. sdpLines.splice( i, 1 );
  951. }
  952. }
  953. sdpLines[ mLineIndex ] = mLineElements.join( ' ' );
  954. return sdpLines;
  955. }
  956. this.extractSdp = function( sdpLine, pattern ) {
  957. var result = sdpLine.match( pattern );
  958. return ( result && result.length == 2 ) ? result[ 1 ] : null;
  959. }
  960. // Set the selected codec to the first in m line.
  961. this.setDefaultCodec = function( mLine, payload ) {
  962. var elements = mLine.split( ' ' );
  963. var newLine = new Array();
  964. var index = 0;
  965. for ( var i = 0; i < elements.length; i++ ) {
  966. if ( index === 3 ) // Format of media starts from the fourth.
  967. newLine[ index++ ] = payload; // Put target payload to the first.
  968. if ( elements[ i ] !== payload )
  969. newLine[ index++ ] = elements[ i ];
  970. }
  971. return newLine.join( ' ' );
  972. }
  973. }
  974. } );