Skip to content
Browse files

plugins/webrtcio

  • Loading branch information...
1 parent efd04bf commit 33e578e45f04bc46463394be3516bba694f5b9b6 @jeromeetienne committed Mar 5, 2013
Showing with 547 additions and 374 deletions.
  1. +40 −284 plugins/webrtcio/examples/index.html
  2. +30 −0 plugins/webrtcio/examples/test.html
  3. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_negative_x.jpg
  4. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_negative_x_180.jpg
  5. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_negative_y.jpg
  6. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_negative_y_180.jpg
  7. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_negative_z.jpg
  8. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_negative_z_180.jpg
  9. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_positive_x.jpg
  10. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_positive_x_180.jpg
  11. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_positive_y.jpg
  12. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_positive_y_180.jpg
  13. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_positive_z.jpg
  14. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/mars_positive_z_180.jpg
  15. 0 plugins/webrtcio/{examples → olddemo}/images/cubemap_mars/orientation_convention.png
  16. 0 plugins/webrtcio/{examples → olddemo}/images/webrtc_black_20p.png
  17. +300 −0 plugins/webrtcio/olddemo/index.html
  18. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/doc.kml
  19. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture0.jpg
  20. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture1.jpg
  21. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture2.jpg
  22. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture3.jpg
  23. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture4.jpg
  24. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture5.jpg
  25. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture6.jpg
  26. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture7.jpg
  27. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture8.jpg
  28. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/images/texture9.jpg
  29. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/models/Old Television Set 01.dae
  30. 0 plugins/webrtcio/{examples → olddemo}/models/OldTelevisionSet01/textures.txt
  31. 0 plugins/webrtcio/{examples → olddemo}/vendor/ColladaLoader.js
  32. +177 −90 plugins/webrtcio/vendor/webrtc.io-client/webrtc.io.js
View
324 plugins/webrtcio/examples/index.html
@@ -1,300 +1,56 @@
-<!doctype html><title>WebGL Meeting</title>
+<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle-require.js"></script>
-<script src='vendor/ColladaLoader.js'></script>
-<base target='_blank'/>
-<script src="../vendor/webrtc.io-client/webrtc.io.js"></script>
-<body><div id='info' style='color: #aaa;'>
- <span style='font-size: 140%'>WebGL Meeting - Chat with friends in 3D</span>
- <br/>
- Video conference with <a href='http://www.webrtc.org' style='color: inherit;'>WebRTC</a>
- <br/>
- 3D with <a href='http://mrdoob.github.com/three.js/' style='color: inherit;'>three.js</a> thru
- <a href='http://jeromeetienne.github.com/tquery/' style='color: inherit;'>tQuery API</a>
- -
- WebRTC with <a href='https://github.com/webRTC/webRTC.io' style='color: inherit;'>WebRTC.io library</a>
-</div>
-<!-- footer -->
-<div id='footer' style="position: absolute; bottom: 0px; left: 0;border: 0; z-index:1; color: #aaa; width: 100%;text-align: center; background-color: #444; font-weight: bold; height: 28px; font-size: 16px; line-height: 28px; font-family: Verdana, Arial, Helvetica, sans-serif;">
- <div style='float: right; border-left:thick solid #aaa; padding-left:1em; padding-right: 1em;'>
- <form action="javascript:void(0)" id='newRoomForm'>
- <input type='text' placeholder='New Room'/>
- </form>
- </div>
- <span class='joinhere'>
- Waiting for someone to join: <a href='javascript:void(0)' style='color: inherit;'>n/a</a>
- </span>
-</div>
+<script src='../vendor/webrtc.io-client/webrtc.io.js'></script>
+<body>
<script>
-var hasWebGL = tQuery.World.hasWebGL();
-var hasWebRTC = window.PeerConnection ? true : false;
+require([], function(){
+ var world = tQuery.createWorld().boilerplate().start();
-if( hasWebGL === false || hasWebRTC === false ){
- (function(){
- var element = getWebGLErrorMessage();
- document.body.appendChild( element );
-
- document.getElementById('info').style.display = 'none';
- document.getElementById('footer').style.display = 'none';
-
- function getWebGLErrorMessage(){
- var element = document.createElement( 'div' );
- element.style.fontFamily= 'monospace';
- element.style.fontSize = '13px';
- element.style.fontWeight= 'normal';
- element.style.textAlign = 'center';
- element.style.background= '#333';
- element.style.color = '#ccc';
- element.style.padding = '1.5em';
- element.style.width = '400px';
- element.style.margin = '5em auto 0';
-
- var html = '';
- if ( hasWebGL === false ){
- html += window.WebGLRenderingContext ? [
- 'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:inherit">WebGL</a>.<br />',
- 'Find out how to get it <a href="http://get.webgl.org/" style="color:inherit">here</a>.'
- ].join( '\n' ) : [
- 'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:inherit">WebGL</a>.<br/>',
- 'Find out how to get it <a href="http://get.webgl.org/" style="color:inherit">here</a>.'
- ].join( '\n' );
- }
- if( hasWebRTC === false ){
- html += 'Your Browser does not seem to support <a href="http://www.webrtc.org" style="color:inherit">WebRTC</a>.<br />'+
- 'Find out how to get it <a href="http://www.webrtc.org/running-the-demos/" style="color:inherit">here</a>.';
- }
- element.innerHTML = html;
- return element;
- };
- })();
-}
-
-require(['tquery.pproc', 'tquery.checkerboard', 'tquery.fog', 'tquery.shadowmap', 'tquery.text', 'tquery.skymap'], function(){
-
- if( hasWebGL === false || hasWebRTC === false ) return;
-
- var world = tQuery.createWorld().boilerplate({
- fullscreen : false,
- screenshot : false
- }).pageTitle('#info').start();
-
- document.getElementById('stats').style.bottom = '28px';
- world.tRenderer().setClearColorHex( 0x000000, 1 );
- world.getCameraControls().rangeX *= 0.3;
- world.getCameraControls().rangeY *= 0.05;
- //tQuery.world.getCameraControls().target.y = -2;
- // tQuery.world.getCameraControls().target.z = -10;
-
- // enable shaddow in the renderer
- world.tRenderer().shadowMapEnabled = true;
- world.tRenderer().shadowMapSoft = true;
-
- // add the fog
- world.addFogExp2({density: 0.075});
- // add a ground
- tQuery.createCheckerboard({
- segmentsW : 20,
- segmentsH : 20
- }).addTo(world).scaleBy(40).translateY(-2).receiveShadow(true);
-
- world.addEffectComposer().film(0.25, 0.25, 2*648, false).vignette().finish();
-
- tQuery.createAmbientLight().addTo(world).color(0x444444);
- tQuery.createDirectionalLight().addTo(world)
- .position( 4, 0, 1)
- .color(0x0080ff).intensity(1)
- tQuery.createDirectionalLight().addTo(world)
- .position(-4, 0, 1)
- .color(0x008080).intensity(1)
- tQuery.createDirectionalLight().addTo(world)
- .position( 0, 5, 10)
- .color(0xffffff).intensity(1)
- .castShadow(true)
- .shadowDarkness(0.8)
- .shadowMap(512*2,512*2)
- .shadowCamera(8, -8, 8, -8, 0.1, 30)
- //.shadowCameraVisible(true)
-
- var loadedModel = null;
- tQuery.Flow().seq(function(next){
- var loader = new THREE.ColladaLoader();
- loader.options.convertUpAxis = true;
- var modelUrl = 'models/OldTelevisionSet01/models/Old Television Set 01.dae';
- loader.load(modelUrl, next);
- }).seq(function(next, collada){
- //console.log('ObjectLoaded');
- loadedModel = collada.scene;
- var tvSet = createTvSet('local');
- // var tvSet = createTvSet();
- // var tvSet = createTvSet();
- // var tvSet = createTvSet();
- // var tvSet = createTvSet();
- // var tvSet = createTvSet();
- // var tvSet = createTvSet();
- // var tvSet = createTvSet();
- next(tvSet);
- }).seq(function(next, tvSet){
- // start
- rtc.createStream({"video": true, "audio": true}, function(stream){
- var screenPlane = tQuery('.screen', tvSet);
- var texture = screenPlane.get(0).material.map;
- var videoEl = texture.image;
- videoEl.src = URL.createObjectURL(stream);
- var loopCb = world.loop().hook(function(){
- if( videoEl.readyState === videoEl.HAVE_ENOUGH_DATA ){
- texture.needsUpdate = true;
- }
- });
- tvSet.data('loopCb', loopCb)
- }, function(){
- console.log('createStream failed', arguments)
- });
-
-
- // if there are no room, pick one at random
- if( window.location.hash === '' ){
- window.location.hash = 'room-'+Math.floor(Math.random()*10000).toString(16);
- }
- // update footer
- var element = document.querySelector('#footer .joinhere a');
- element.href = element.innerText = window.location;
-
- // connect the server
- var room = window.location.hash.slice(1);
- var serverUrl = "ws://localhost:8000/";
- rtc.connect(serverUrl, room);
-
- rtc.on('disconnect stream', function(socketId) {
- console.log('remove ' + socketId);
- var tvSet = tQuery('#tvSet-'+socketId)
- var loopCb = tvSet.data('loopCb', loopCb);
- world.loop().unhook(loopCb);
- tvSet.detach();
- reflowTvSets();
- });
-
- rtc.on('add remote stream', function(stream, socketId) {
- var tvSet = createTvSet(socketId)
- var screenPlane = tQuery('.screen', tvSet);
- var texture = screenPlane.get(0).material.map;
- var videoEl = texture.image;
- videoEl.src = URL.createObjectURL(stream);
- var loopCb = world.loop().hook(function(){
- if( videoEl.readyState === videoEl.HAVE_ENOUGH_DATA ){
- texture.needsUpdate = true;
- }
- });
- tvSet.data('loopCb', loopCb)
- });
-
- var isRandomRoom = room.match(/^room-/) ? true : false;
- if( isRandomRoom === false ){
- var urlsRoot = 'images/cubemap_mars/mars_';
- var ext = 'jpg';
- var urls = [
- urlsRoot + 'positive_x_180.' + ext,
- urlsRoot + 'negative_x_180.' + ext,
- urlsRoot + 'positive_y_180.' + ext,
- urlsRoot + 'negative_y_180.' + ext,
- urlsRoot + 'positive_z_180.' + ext,
- urlsRoot + 'negative_z_180.' + ext,
- ];
- var textEnvMap = tQuery.createCubeTexture(urls);
- tQuery.createText(room, {
- bevelThickness : 0.1,
- bevelSize : 0.03,
- bevelEnabled : true,
- }).addTo(world)
- .translateY(-0.6)
- .translateZ(-1)
- .scale(1/3)
- .setPhongMaterial({
- ambient : 0xFfffff,
- color : 0xffffff,
- envMap : textEnvMap
- }).back()
- }
- });
-
-
- //////////////////////////////////////////////////////////////////////////
- // UI //
- //////////////////////////////////////////////////////////////////////////
-
-
- document.body.setAttribute("tabIndex", "0"); // make body focusable
- // handle newRoomForm
- var newRoomForm = document.getElementById('newRoomForm')
- newRoomForm.addEventListener('keydown', function(event){ event.stopPropagation(); });
-
- newRoomForm.addEventListener('submit', function(){
- // get room name
- var roomName = newRoomForm[0].value;
- // open a tab to this room
- var url = location.protocol+'//'+location.host+location.pathname+'#'+roomName
- window.open(url, '_blank');
- // put back the focus on body
- document.body.focus();
+ rtc.createStream({"video": true, "audio": true}, function(stream){
+console.dir(stream)
+ var texture = createTexture(stream)
+ tQuery.createPlane().addTo(world)
+ .positionX(2 * Math.random()-0.5)
+ .positionY(2 * Math.random()-0.5)
+ .setBasicMaterial()
+ .map(texture)
+ .back()
+ }, function(){
+ console.log('createStream failed', arguments)
});
-
- function reflowTvSets(){
- var tvSets = tQuery('.tvSet').get();
- var radiusX = 5;
- var radiusZ = 5;
- var camPosZ = 3;
- var totRange = 0.5*Math.PI;
- world.tCamera().position.z = camPosZ;
- tvSets.forEach(function(object3D, index){
- var base = 3*Math.PI/2;
- var oneRange = totRange/tvSets.length;
- var angle = base - totRange/2 + oneRange*index + oneRange/2;
-
- tQuery(object3D)
- .positionX(Math.cos(angle) * radiusX)
- .positionZ(Math.sin(angle) * radiusZ)
- .rotationY(-angle-Math.PI/2)
- });
- }
+ var room = 'public';
+ var serverUrl = "ws://localhost:8000/";
+ rtc.connect(serverUrl, room);
- function createTvSet(socketId){
- var scale = 200;
- var tvSet = tQuery(loadedModel).clone()
- .translateY(-3.5)
- .scaleBy(1/scale)
- .id('tvSet-'+socketId)
- .addClass('tvSet')
- .addTo(world)
+ rtc.on('add remote stream', function(stream, socketId) {
+ var texture = createTexture(stream)
+ tQuery.createPlane().addTo(world)
+ .positionX(2 * Math.random()-0.5)
+ .positionY(2 * Math.random()-0.5)
+ .setBasicMaterial()
+ .map(texture)
+ .back()
+ });
-
+ function createTexture(stream){
var videoEl = document.createElement('video');
videoEl.width = 320;
videoEl.height = 240;
videoEl.autoplay= true;
- var texture = new THREE.Texture(videoEl);
- // do a flipX in the video1Texture
- texture.repeat.set(-1, 1);
- texture.offset.set( 1, 0);
- tQuery.createPlane().addTo(tvSet)
- .position(0, 3.55*scale, 0.8*scale)
- .scale(2.1*scale, 1.6*scale, 1*scale)
- .addClass('screen')
- .setLambertMaterial()
- .color(0xE1A95F).ambient(0xFFFFFF)
- .map(texture)
- .back()
-
- tQuery('mesh', tvSet).castShadow(true)
+ videoEl.loop = true;
+ videoEl.src = URL.createObjectURL(stream);
- reflowTvSets();
+ var texture = new THREE.Texture( videoEl );
- return tvSet;
- }
+ world.loop().hook(function(){
+ if( videoEl.readyState === videoEl.HAVE_ENOUGH_DATA ){
+ texture.needsUpdate = true;
+ }
+ });
+ return texture;
+ }
});
-</script>
-<!-- webrtc logo -->
-<a href="http://www.webrtc.org" style="position: absolute; top: 10px; left: 10px; border: 0; z-index:1;"><img id="logo" alt="WebRTC" src="images/webrtc_black_20p.png"></a>
-<!-- github ribbon -->
-<!-- <a href="https://github.com/jeromeetienne/tquery"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:1;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
- --></body>
+</script></body>
View
30 plugins/webrtcio/examples/test.html
@@ -0,0 +1,30 @@
+<!doctype html><title>Minimal tQuery Page</title>
+<script src="../../../build/tquery-bundle-require.js"></script>
+<script src='../vendor/webrtc.io-client/webrtc.io.js'></script>
+<body><script>
+require(['tquery.videos'], function(){
+ var world = tQuery.createWorld().boilerplate().start();
+
+ tQuery.convert.toTexture.addEventListener('preConvert', function(value){
+return;
+console.log('blabalbal', value)
+ if( value instanceof LocalMediaStream === false ){
+ return undefined;
+ }
+ // TODO use videotexture plugin instead
+ return createTexture(value)
+ });
+
+ rtc.createStream({"video": true, "audio": true}, function(stream){
+console.log('blabalbal', stream)
+ var url = URL.createObjectURL(stream);
+ var texture = tQuery.createVideoTexture(url);
+ tQuery.createPlane().addTo(world)
+ .setBasicMaterial()
+ .map(texture)
+ .back()
+ }, function(){
+ console.log('createStream failed', arguments)
+ });
+});
+</script></body>
View
0 ...s/images/cubemap_mars/mars_negative_x.jpg → ...o/images/cubemap_mars/mars_negative_x.jpg
File renamed without changes
View
0 ...ages/cubemap_mars/mars_negative_x_180.jpg → ...ages/cubemap_mars/mars_negative_x_180.jpg
File renamed without changes
View
0 ...s/images/cubemap_mars/mars_negative_y.jpg → ...o/images/cubemap_mars/mars_negative_y.jpg
File renamed without changes
View
0 ...ages/cubemap_mars/mars_negative_y_180.jpg → ...ages/cubemap_mars/mars_negative_y_180.jpg
File renamed without changes
View
0 ...s/images/cubemap_mars/mars_negative_z.jpg → ...o/images/cubemap_mars/mars_negative_z.jpg
File renamed without changes
View
0 ...ages/cubemap_mars/mars_negative_z_180.jpg → ...ages/cubemap_mars/mars_negative_z_180.jpg
File renamed without changes
View
0 ...s/images/cubemap_mars/mars_positive_x.jpg → ...o/images/cubemap_mars/mars_positive_x.jpg
File renamed without changes
View
0 ...ages/cubemap_mars/mars_positive_x_180.jpg → ...ages/cubemap_mars/mars_positive_x_180.jpg
File renamed without changes
View
0 ...s/images/cubemap_mars/mars_positive_y.jpg → ...o/images/cubemap_mars/mars_positive_y.jpg
File renamed without changes
View
0 ...ages/cubemap_mars/mars_positive_y_180.jpg → ...ages/cubemap_mars/mars_positive_y_180.jpg
File renamed without changes
View
0 ...s/images/cubemap_mars/mars_positive_z.jpg → ...o/images/cubemap_mars/mars_positive_z.jpg
File renamed without changes
View
0 ...ages/cubemap_mars/mars_positive_z_180.jpg → ...ages/cubemap_mars/mars_positive_z_180.jpg
File renamed without changes
View
0 ...s/cubemap_mars/orientation_convention.png → ...s/cubemap_mars/orientation_convention.png
File renamed without changes
View
0 ...tcio/examples/images/webrtc_black_20p.png → ...rtcio/olddemo/images/webrtc_black_20p.png
File renamed without changes
View
300 plugins/webrtcio/olddemo/index.html
@@ -0,0 +1,300 @@
+<!doctype html><title>WebGL Meeting</title>
+<script src="../../../build/tquery-bundle-require.js"></script>
+<script src='vendor/ColladaLoader.js'></script>
+<base target='_blank'/>
+<script src="../vendor/webrtc.io-client/webrtc.io.js"></script>
+<body><div id='info' style='color: #aaa;'>
+ <span style='font-size: 140%'>WebGL Meeting - Chat with friends in 3D</span>
+ <br/>
+ Video conference with <a href='http://www.webrtc.org' style='color: inherit;'>WebRTC</a>
+ <br/>
+ 3D with <a href='http://mrdoob.github.com/three.js/' style='color: inherit;'>three.js</a> thru
+ <a href='http://jeromeetienne.github.com/tquery/' style='color: inherit;'>tQuery API</a>
+ -
+ WebRTC with <a href='https://github.com/webRTC/webRTC.io' style='color: inherit;'>WebRTC.io library</a>
+</div>
+<!-- footer -->
+<div id='footer' style="position: absolute; bottom: 0px; left: 0;border: 0; z-index:1; color: #aaa; width: 100%;text-align: center; background-color: #444; font-weight: bold; height: 28px; font-size: 16px; line-height: 28px; font-family: Verdana, Arial, Helvetica, sans-serif;">
+ <div style='float: right; border-left:thick solid #aaa; padding-left:1em; padding-right: 1em;'>
+ <form action="javascript:void(0)" id='newRoomForm'>
+ <input type='text' placeholder='New Room'/>
+ </form>
+ </div>
+ <span class='joinhere'>
+ Waiting for someone to join: <a href='javascript:void(0)' style='color: inherit;'>n/a</a>
+ </span>
+</div>
+<script>
+var hasWebGL = tQuery.World.hasWebGL();
+var hasWebRTC = window.PeerConnection ? true : false;
+
+if( hasWebGL === false || hasWebRTC === false ){
+ (function(){
+ var element = getWebGLErrorMessage();
+ document.body.appendChild( element );
+
+ document.getElementById('info').style.display = 'none';
+ document.getElementById('footer').style.display = 'none';
+
+ function getWebGLErrorMessage(){
+ var element = document.createElement( 'div' );
+ element.style.fontFamily= 'monospace';
+ element.style.fontSize = '13px';
+ element.style.fontWeight= 'normal';
+ element.style.textAlign = 'center';
+ element.style.background= '#333';
+ element.style.color = '#ccc';
+ element.style.padding = '1.5em';
+ element.style.width = '400px';
+ element.style.margin = '5em auto 0';
+
+ var html = '';
+ if ( hasWebGL === false ){
+ html += window.WebGLRenderingContext ? [
+ 'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:inherit">WebGL</a>.<br />',
+ 'Find out how to get it <a href="http://get.webgl.org/" style="color:inherit">here</a>.'
+ ].join( '\n' ) : [
+ 'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:inherit">WebGL</a>.<br/>',
+ 'Find out how to get it <a href="http://get.webgl.org/" style="color:inherit">here</a>.'
+ ].join( '\n' );
+ }
+ if( hasWebRTC === false ){
+ html += 'Your Browser does not seem to support <a href="http://www.webrtc.org" style="color:inherit">WebRTC</a>.<br />'+
+ 'Find out how to get it <a href="http://www.webrtc.org/running-the-demos/" style="color:inherit">here</a>.';
+ }
+ element.innerHTML = html;
+ return element;
+ };
+ })();
+}
+
+require(['tquery.pproc', 'tquery.checkerboard', 'tquery.fog', 'tquery.shadowmap', 'tquery.text', 'tquery.skymap'], function(){
+
+ if( hasWebGL === false || hasWebRTC === false ) return;
+
+ var world = tQuery.createWorld().boilerplate({
+ fullscreen : false,
+ screenshot : false
+ }).pageTitle('#info').start();
+
+ document.getElementById('stats').style.bottom = '28px';
+ world.tRenderer().setClearColorHex( 0x000000, 1 );
+ world.getCameraControls().rangeX *= 0.3;
+ world.getCameraControls().rangeY *= 0.05;
+ //tQuery.world.getCameraControls().target.y = -2;
+ // tQuery.world.getCameraControls().target.z = -10;
+
+ // enable shaddow in the renderer
+ world.tRenderer().shadowMapEnabled = true;
+ world.tRenderer().shadowMapSoft = true;
+
+ // add the fog
+ world.addFogExp2({density: 0.075});
+
+ // add a ground
+ tQuery.createCheckerboard({
+ segmentsW : 20,
+ segmentsH : 20
+ }).addTo(world).scaleBy(40).translateY(-2).receiveShadow(true);
+
+ world.addEffectComposer().film(0.25, 0.25, 2*648, false).vignette().finish();
+
+ tQuery.createAmbientLight().addTo(world).color(0x444444);
+ tQuery.createDirectionalLight().addTo(world)
+ .position( 4, 0, 1)
+ .color(0x0080ff).intensity(1)
+ tQuery.createDirectionalLight().addTo(world)
+ .position(-4, 0, 1)
+ .color(0x008080).intensity(1)
+ tQuery.createDirectionalLight().addTo(world)
+ .position( 0, 5, 10)
+ .color(0xffffff).intensity(1)
+ .castShadow(true)
+ .shadowDarkness(0.8)
+ .shadowMap(512*2,512*2)
+ .shadowCamera(8, -8, 8, -8, 0.1, 30)
+ //.shadowCameraVisible(true)
+
+ var loadedModel = null;
+ tQuery.Flow().seq(function(next){
+ var loader = new THREE.ColladaLoader();
+ loader.options.convertUpAxis = true;
+ var modelUrl = 'models/OldTelevisionSet01/models/Old Television Set 01.dae';
+ loader.load(modelUrl, next);
+ }).seq(function(next, collada){
+ //console.log('ObjectLoaded');
+ loadedModel = collada.scene;
+ var tvSet = createTvSet('local');
+ // var tvSet = createTvSet();
+ // var tvSet = createTvSet();
+ // var tvSet = createTvSet();
+ // var tvSet = createTvSet();
+ // var tvSet = createTvSet();
+ // var tvSet = createTvSet();
+ // var tvSet = createTvSet();
+ next(tvSet);
+ }).seq(function(next, tvSet){
+ // start
+ rtc.createStream({"video": true, "audio": true}, function(stream){
+ var screenPlane = tQuery('.screen', tvSet);
+ var texture = screenPlane.get(0).material.map;
+ var videoEl = texture.image;
+ videoEl.src = URL.createObjectURL(stream);
+ var loopCb = world.loop().hook(function(){
+ if( videoEl.readyState === videoEl.HAVE_ENOUGH_DATA ){
+ texture.needsUpdate = true;
+ }
+ });
+ tvSet.data('loopCb', loopCb)
+ }, function(){
+ console.log('createStream failed', arguments)
+ });
+
+
+ // if there are no room, pick one at random
+ if( window.location.hash === '' ){
+ window.location.hash = 'room-'+Math.floor(Math.random()*10000).toString(16);
+ }
+ // update footer
+ var element = document.querySelector('#footer .joinhere a');
+ element.href = element.innerText = window.location;
+
+ // connect the server
+ var room = window.location.hash.slice(1);
+ var serverUrl = "ws://localhost:8000/";
+ rtc.connect(serverUrl, room);
+
+ rtc.on('disconnect stream', function(socketId) {
+ console.log('remove ' + socketId);
+ var tvSet = tQuery('#tvSet-'+socketId)
+ var loopCb = tvSet.data('loopCb', loopCb);
+ world.loop().unhook(loopCb);
+ tvSet.detach();
+ reflowTvSets();
+ });
+
+ rtc.on('add remote stream', function(stream, socketId) {
+ var tvSet = createTvSet(socketId)
+ var screenPlane = tQuery('.screen', tvSet);
+ var texture = screenPlane.get(0).material.map;
+ var videoEl = texture.image;
+ videoEl.src = URL.createObjectURL(stream);
+ var loopCb = world.loop().hook(function(){
+ if( videoEl.readyState === videoEl.HAVE_ENOUGH_DATA ){
+ texture.needsUpdate = true;
+ }
+ });
+ tvSet.data('loopCb', loopCb)
+ });
+
+ var isRandomRoom = room.match(/^room-/) ? true : false;
+ if( isRandomRoom === false ){
+ var urlsRoot = 'images/cubemap_mars/mars_';
+ var ext = 'jpg';
+ var urls = [
+ urlsRoot + 'positive_x_180.' + ext,
+ urlsRoot + 'negative_x_180.' + ext,
+ urlsRoot + 'positive_y_180.' + ext,
+ urlsRoot + 'negative_y_180.' + ext,
+ urlsRoot + 'positive_z_180.' + ext,
+ urlsRoot + 'negative_z_180.' + ext,
+ ];
+ var textEnvMap = tQuery.createCubeTexture(urls);
+ tQuery.createText(room, {
+ bevelThickness : 0.1,
+ bevelSize : 0.03,
+ bevelEnabled : true,
+ }).addTo(world)
+ .translateY(-0.6)
+ .translateZ(-1)
+ .scale(1/3)
+ .setPhongMaterial({
+ ambient : 0xFfffff,
+ color : 0xffffff,
+ envMap : textEnvMap
+ }).back()
+ }
+ });
+
+
+ //////////////////////////////////////////////////////////////////////////
+ // UI //
+ //////////////////////////////////////////////////////////////////////////
+
+
+ document.body.setAttribute("tabIndex", "0"); // make body focusable
+ // handle newRoomForm
+ var newRoomForm = document.getElementById('newRoomForm')
+ newRoomForm.addEventListener('keydown', function(event){ event.stopPropagation(); });
+
+ newRoomForm.addEventListener('submit', function(){
+ // get room name
+ var roomName = newRoomForm[0].value;
+ // open a tab to this room
+ var url = location.protocol+'//'+location.host+location.pathname+'#'+roomName
+ window.open(url, '_blank');
+ // put back the focus on body
+ document.body.focus();
+ });
+
+
+ function reflowTvSets(){
+ var tvSets = tQuery('.tvSet').get();
+ var radiusX = 5;
+ var radiusZ = 5;
+ var camPosZ = 3;
+ var totRange = 0.5*Math.PI;
+ world.tCamera().position.z = camPosZ;
+ tvSets.forEach(function(object3D, index){
+ var base = 3*Math.PI/2;
+ var oneRange = totRange/tvSets.length;
+ var angle = base - totRange/2 + oneRange*index + oneRange/2;
+
+ tQuery(object3D)
+ .positionX(Math.cos(angle) * radiusX)
+ .positionZ(Math.sin(angle) * radiusZ)
+ .rotationY(-angle-Math.PI/2)
+ });
+ }
+
+
+ function createTvSet(socketId){
+ var scale = 200;
+ var tvSet = tQuery(loadedModel).clone()
+ .translateY(-3.5)
+ .scaleBy(1/scale)
+ .id('tvSet-'+socketId)
+ .addClass('tvSet')
+ .addTo(world)
+
+
+ var videoEl = document.createElement('video');
+ videoEl.width = 320;
+ videoEl.height = 240;
+ videoEl.autoplay= true;
+ var texture = new THREE.Texture(videoEl);
+ // do a flipX in the video1Texture
+ texture.repeat.set(-1, 1);
+ texture.offset.set( 1, 0);
+ tQuery.createPlane().addTo(tvSet)
+ .position(0, 3.55*scale, 0.8*scale)
+ .scale(2.1*scale, 1.6*scale, 1*scale)
+ .addClass('screen')
+ .setLambertMaterial()
+ .color(0xE1A95F).ambient(0xFFFFFF)
+ .map(texture)
+ .back()
+
+ tQuery('mesh', tvSet).castShadow(true)
+
+ reflowTvSets();
+
+ return tvSet;
+ }
+});
+</script>
+<!-- webrtc logo -->
+<a href="http://www.webrtc.org" style="position: absolute; top: 10px; left: 10px; border: 0; z-index:1;"><img id="logo" alt="WebRTC" src="images/webrtc_black_20p.png"></a>
+<!-- github ribbon -->
+<!-- <a href="https://github.com/jeromeetienne/tquery"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:1;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
+ --></body>
View
0 ...xamples/models/OldTelevisionSet01/doc.kml → ...olddemo/models/OldTelevisionSet01/doc.kml
File renamed without changes.
View
0 ...ls/OldTelevisionSet01/images/texture0.jpg → ...ls/OldTelevisionSet01/images/texture0.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture1.jpg → ...ls/OldTelevisionSet01/images/texture1.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture2.jpg → ...ls/OldTelevisionSet01/images/texture2.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture3.jpg → ...ls/OldTelevisionSet01/images/texture3.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture4.jpg → ...ls/OldTelevisionSet01/images/texture4.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture5.jpg → ...ls/OldTelevisionSet01/images/texture5.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture6.jpg → ...ls/OldTelevisionSet01/images/texture6.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture7.jpg → ...ls/OldTelevisionSet01/images/texture7.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture8.jpg → ...ls/OldTelevisionSet01/images/texture8.jpg
File renamed without changes
View
0 ...ls/OldTelevisionSet01/images/texture9.jpg → ...ls/OldTelevisionSet01/images/texture9.jpg
File renamed without changes
View
0 ...ionSet01/models/Old Television Set 01.dae → ...ionSet01/models/Old Television Set 01.dae
File renamed without changes.
View
0 ...es/models/OldTelevisionSet01/textures.txt → ...mo/models/OldTelevisionSet01/textures.txt
File renamed without changes.
View
0 ...webrtcio/examples/vendor/ColladaLoader.js → .../webrtcio/olddemo/vendor/ColladaLoader.js
File renamed without changes.
View
267 plugins/webrtcio/vendor/webrtc.io-client/webrtc.io.js
@@ -1,7 +1,8 @@
//CLIENT
// Fallbacks for vendor-specific variables until the spec is finalized.
-var PeerConnection = window.PeerConnection || window.webkitPeerConnection00;
+
+var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection;
var URL = window.URL || window.webkitURL || window.msURL || window.oURL;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
@@ -14,10 +15,13 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
rtc = module.exports = {};
}
-
+
// Holds a connection to the server.
rtc._socket = null;
+ // Holds identity for the client
+ rtc._me = null;
+
// Holds callbacks for certain events.
rtc._events = {};
@@ -39,10 +43,10 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
}
};
- // Holds the STUN server to use for PeerConnections.
- rtc.SERVER = "STUN stun.l.google.com:19302";
+ // Holds the STUN/ICE server to use for PeerConnections.
+ rtc.SERVER = {iceServers:[{url:"stun:stun.l.google.com:19302"}]};
- // Referenc e to the lone PeerConnection instance.
+ // Reference to the lone PeerConnection instance.
rtc.peerConnections = {};
// Array of known peer socket ids
@@ -52,6 +56,30 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
rtc.numStreams = 0;
rtc.initializedStreams = 0;
+
+ // Reference to the data channels
+ rtc.dataChannels = {};
+
+ // PeerConnection datachannel configuration
+ rtc.dataChannelConfig = {optional: [ {RtpDataChannels: true} ] };
+
+
+ // check whether data channel is supported.
+ rtc.checkDataChannelSupport = function() {
+ try {
+ // raises exception if createDataChannel is not supported
+ var pc = new PeerConnection(rtc.SERVER, rtc.dataChannelConfig);
+ channel = pc.createDataChannel('supportCheck', {reliable: false});
+ channel.close();
+ return true;
+ } catch(e) {
+ return false;
+ }
+ };
+
+ rtc.dataChannelSupport = rtc.checkDataChannelSupport();
+
+
/**
* Connects to the websocket server.
*/
@@ -66,18 +94,16 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
"data":{
"room": room
}
- }), function(error){
- if(error){console.log(error);}
- });
+ }));
rtc._socket.onmessage = function(msg) {
var json = JSON.parse(msg.data);
rtc.fire(json.eventName, json.data);
};
rtc._socket.onerror = function(err) {
- console.log('onerror');
- console.log(err);
+ console.error('onerror');
+ console.error(err);
};
rtc._socket.onclose = function(data) {
@@ -87,14 +113,14 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
rtc.on('get_peers', function(data) {
rtc.connections = data.connections;
+ rtc._me = data.you;
// fire connections event and pass peers
rtc.fire('connections', rtc.connections);
});
rtc.on('receive_ice_candidate', function(data) {
- var candidate = new IceCandidate(data.label, data.candidate);
- rtc.peerConnections[data.socketId].processIceMessage(candidate);
-
+ var candidate = new RTCIceCandidate(data);
+ rtc.peerConnections[data.socketId].addIceCandidate(candidate);
rtc.fire('receive ice candidate', candidate);
});
@@ -108,7 +134,7 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
}
});
- rtc.on('remove_peer_connected', function(data) {
+ rtc.on('remove_peer_connected', function(data) {
rtc.fire('disconnect stream', data.socketId);
delete rtc.peerConnections[data.socketId];
});
@@ -133,13 +159,13 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
var socketId = rtc.connections[i];
rtc.sendOffer(socketId);
}
- }
+ };
rtc.onClose = function(data) {
rtc.on('close_stream', function() {
rtc.fire('close_stream', data);
});
- }
+ };
rtc.createPeerConnections = function() {
for (var i = 0; i < rtc.connections.length; i++) {
@@ -148,22 +174,24 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
};
rtc.createPeerConnection = function(id) {
- console.log('createPeerConnection');
- var pc = rtc.peerConnections[id] = new PeerConnection(rtc.SERVER, function(candidate, moreToFollow) {
- if (candidate) {
- rtc._socket.send(JSON.stringify({
- "eventName": "send_ice_candidate",
- "data": {
- "label": candidate.label,
- "candidate": candidate.toSdp(),
- "socketId": id
- }
- }), function(error){
- if(error){console.log(error);}
- });
- }
- rtc.fire('ice candidate', candidate, moreToFollow);
- });
+ var config;
+ if (rtc.dataChannelSupport)
+ config = rtc.dataChannelConfig;
+
+ var pc = rtc.peerConnections[id] = new PeerConnection(rtc.SERVER, config);
+ pc.onicecandidate = function(event) {
+ if (event.candidate) {
+ rtc._socket.send(JSON.stringify({
+ "eventName": "send_ice_candidate",
+ "data": {
+ "label": event.candidate.label,
+ "candidate": event.candidate.candidate,
+ "socketId": id
+ }
+ }));
+ }
+ rtc.fire('ice candidate', event.candidate);
+ };
pc.onopen = function() {
// TODO: Finalize this API
@@ -174,62 +202,58 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
// TODO: Finalize this API
rtc.fire('add remote stream', event.stream, id);
};
+
+ if (rtc.dataChannelSupport) {
+ pc.ondatachannel = function (evt) {
+ console.log('data channel connecting ' + id);
+ rtc.addDataChannel(id, evt.channel);
+ };
+ }
+
return pc;
};
rtc.sendOffer = function(socketId) {
var pc = rtc.peerConnections[socketId];
- // TODO: Abstract away video: true, audio: true for offers
- var offer = pc.createOffer({
- video: true,
- audio: true
- });
- pc.setLocalDescription(pc.SDP_OFFER, offer);
+ pc.createOffer( function(session_description) {
+ pc.setLocalDescription(session_description);
rtc._socket.send(JSON.stringify({
- "eventName": "send_offer",
- "data": {
- "socketId": socketId,
- "sdp": offer.toSdp()
- }
- }), function(error){
- if(error){console.log(error);}
- });
- pc.startIce();
+ "eventName": "send_offer",
+ "data":{
+ "socketId": socketId,
+ "sdp": session_description
+ }
+ }));
+ });
};
rtc.receiveOffer = function(socketId, sdp) {
var pc = rtc.peerConnections[socketId];
- pc.setRemoteDescription(pc.SDP_OFFER, new SessionDescription(sdp));
+ pc.setRemoteDescription(new RTCSessionDescription(sdp));
rtc.sendAnswer(socketId);
};
rtc.sendAnswer = function(socketId) {
var pc = rtc.peerConnections[socketId];
+ pc.createAnswer( function(session_description) {
+ pc.setLocalDescription(session_description);
+ rtc._socket.send(JSON.stringify({
+ "eventName": "send_answer",
+ "data":{
+ "socketId": socketId,
+ "sdp": session_description
+ }
+ }));
var offer = pc.remoteDescription;
- // TODO: Abstract away video: true, audio: true for answers
- var answer = pc.createAnswer(offer.toSdp(), {
- video: true,
- audio: true
});
- pc.setLocalDescription(pc.SDP_ANSWER, answer);
- rtc._socket.send(JSON.stringify({
- "eventName": "send_answer",
- "data":{
- "socketId": socketId,
- "sdp": answer.toSdp()
- }
- }), function(error){
- if(error){console.log(error);}
- });
- pc.startIce();
};
rtc.receiveAnswer = function(socketId, sdp) {
var pc = rtc.peerConnections[socketId];
- pc.setRemoteDescription(pc.SDP_ANSWER, new SessionDescription(sdp));
+ pc.setRemoteDescription(new RTCSessionDescription(sdp));
};
@@ -240,32 +264,15 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
onFail = onFail ||
function() {};
- if(opt.audio && opt.video){
- options = {
- video: true,
- audio: true
- };
- }else if(opt.video){
- options = {
- video: true,
- audio: false
- };
- }else if(opt.audio){
- options = {
- video: false,
- audio: true
- };
- }else {
- options = {
- video: false,
- audio: false
- };
- }
+ options = {
+ video: !!opt.video,
+ audio: !!opt.audio
+ };
if (getUserMedia) {
rtc.numStreams++;
getUserMedia.call(navigator, options, function(stream) {
-
+
rtc.streams.push(stream);
rtc.initializedStreams++;
onSuccess(stream);
@@ -279,8 +286,7 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
} else {
alert('webRTC is not yet supported in this browser.');
}
- }
-
+ };
rtc.addStreams = function() {
for (var i = 0; i < rtc.streams.length; i++) {
@@ -291,15 +297,96 @@ var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || nav
}
};
-
rtc.attachStream = function(stream, domId) {
document.getElementById(domId).src = URL.createObjectURL(stream);
};
+
+ rtc.createDataChannel = function(pcOrId, label) {
+ if (!rtc.dataChannelSupport) {
+ alert('webRTC data channel is not yet supported in this browser,' +
+ ' or you must turn on experimental flags');
+ return;
+ }
+
+ if (typeof(pcOrId) === 'string') {
+ id = pcOrId;
+ pc = rtc.peerConnections[pcOrId];
+ } else {
+ pc = pcOrId;
+ id = undefined;
+ for (var key in rtc.peerConnections) {
+ if (rtc.peerConnections[key] === pc)
+ id = key;
+ }
+ }
+
+ if (!id)
+ throw new Error ('attempt to createDataChannel with unknown id');
+
+ if (!pc || !(pc instanceof PeerConnection))
+ throw new Error ('attempt to createDataChannel without peerConnection');
+
+ // need a label
+ label = label || 'fileTransfer' || String(id);
+
+ // chrome only supports reliable false atm.
+ options = {reliable: false};
+
+ try {
+ console.log('createDataChannel ' + id);
+ channel = pc.createDataChannel(label, options);
+ } catch (error) {
+ console.log('seems that DataChannel is NOT actually supported!');
+ throw error;
+ }
+
+ return rtc.addDataChannel(id, channel);
+ };
+
+ rtc.addDataChannel = function(id, channel) {
+
+ channel.onopen = function() {
+ console.log('data stream open ' + id);
+ rtc.fire('data stream open', channel);
+ };
+
+ channel.onclose = function(event) {
+ delete rtc.dataChannels[id];
+ console.log('data stream close ' + id);
+ rtc.fire('data stream close', channel);
+ };
+
+ channel.onmessage = function(message) {
+ console.log('data stream message ' + id);
+ console.log(message);
+ rtc.fire('data stream data', channel, message.data);
+ };
+
+ channel.onerror = function(err) {
+ console.log('data stream error ' + id + ': ' + err);
+ rtc.fire('data stream error', channel, err);
+ };
+
+ // track dataChannel
+ rtc.dataChannels[id] = channel;
+ return channel;
+ };
+
+ rtc.addDataChannels = function() {
+ if (!rtc.dataChannelSupport)
+ return;
+
+ for (var connection in rtc.peerConnections)
+ rtc.createDataChannel(connection);
+ };
+
+
rtc.on('ready', function() {
rtc.createPeerConnections();
rtc.addStreams();
+ rtc.addDataChannels();
rtc.sendOffers();
});
-}).call(this);
+}).call(this);

0 comments on commit 33e578e

Please sign in to comment.
Something went wrong with that request. Please try again.