Skip to content

Commit

Permalink
added reflow up to 10 - fix #5
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeromeetienne
jeromeetienne committed Mar 19, 2013
1 parent 457e560 commit 171922d
Showing 1 changed file with 91 additions and 29 deletions.
120 changes: 91 additions & 29 deletions index.html
View file
@@ -1,6 +1,16 @@
<!doctype html><title>WebGL Video Chat</title> <!doctype html><title>WebGL Video Chat</title>
<script src="vendor/tquery/build/tquery-bundle-require.js"></script> <script src="vendor/tquery/build/tquery-bundle-require.js"></script>
<body><script> <body><div id="info" style='color: white'>
WebGL Video Chat <a href='http://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
-
a video chat in WebGL with WebRTC
<br/>
<a href='https://github.com/mrdoob/three.js/' target='_blank'>three.js</a> with
<a href='http://jeromeetienne.github.com/tquery/' target='_blank'>tQuery API</a> for 3D
-
<a href='https://github.com/webRTC/webRTC.io/' target='_blank'>webrtc.io</a> for WebRTC
- hosted on <a href='http://nodejitsu.com/' target='_blank'>nodejitsu</a>
</div><script>
requirejs.config({ requirejs.config({
paths : { paths : {
'build' : 'vendor/tquery/build', 'build' : 'vendor/tquery/build',
Expand All @@ -17,7 +27,7 @@
, 'tquery.videos' , 'tquery.videos'
, 'tquery.webrtcio' , 'tquery.webrtcio'
], function(){ ], function(){
var world = tQuery.createWorld().boilerplate().start(); var world = tQuery.createWorld().boilerplate().pageTitle('#info').start();


world.shadowMapEnabled(true) world.shadowMapEnabled(true)
world.tCamera().position.y = 0.75 world.tCamera().position.y = 0.75
Expand Down Expand Up @@ -85,23 +95,7 @@




var room = 'public'; var room = 'public';
var serverUrl = "ws://localhost:8000/"; var serverUrl = 'ws://' + window.location.host + window.location.pathname;

function onModelLoaded(){
// connect the server
rtc.connect(serverUrl, room);
// honot nostream
var nostream = window.location.hash === '#nostream'
if( nostream ) return;
// create a local stream
rtc.createStream({'video': true, 'audio': true}, function(mediaStream){
console.log('created stream', arguments)
createScreen(mediaStream)
reflowScreens();
}, function(){
console.log('createStream failed', arguments)
});
}


rtc.on('connect', function(){ rtc.on('connect', function(){
console.log('connected to server', serverUrl) console.log('connected to server', serverUrl)
Expand All @@ -124,16 +118,59 @@
//tQuery('.socketId-'+socketId).destroy(); //tQuery('.socketId-'+socketId).destroy();
}); });


//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////


function onModelLoaded(){
// connect the server
rtc.connect(serverUrl, room);
// honor nostream
var nostream = window.location.hash === '#nostream'
if( nostream ) return;
// create a local stream
rtc.createStream({'video': true, 'audio': true}, function(mediaStream){
console.log('created stream', arguments)
createScreen(mediaStream)
reflowScreens();
}, function(){
console.log('createStream failed', arguments)
});
}

/** /**
* adapt screens layout depending on their numbers * adapt screens layout depending on their numbers
*/ */
function reflowScreens(){ function reflowScreens(){
var screens = tQuery('.screen'); var screens = tQuery('.screen');
var nScreens = screens.length;
var offsetX = -(screens.length - 1)/2 var offsetX = -(screens.length - 1)/2
var width = 0.7 var width = 0.7
screens.each(function(tObject3D, idx){ screens.each(function(tObject3D, idx){
tObject3D.position.x = width * (idx + offsetX); tObject3D.position.x = width * (idx + offsetX);
}) })
// set camera position depending on nScreens
var camera = world.camera();
if( nScreens === 0 || nScreens === 1 || nScreens === 2 ){
camera.positionZ( 1.5 );
}else if( nScreens === 3 ){
camera.positionZ( 2.0 );
}else if( nScreens === 4 ){
camera.positionZ( 2.5 );
}else if( nScreens === 5 ){
camera.positionZ( 3.5 );
}else if( nScreens === 6 ){
camera.positionZ( 4.0 );
}else if( nScreens === 7 ){
camera.positionZ( 4.5 );
}else if( nScreens === 8 ){
camera.positionZ( 5 );
}else if( nScreens === 9 ){
camera.positionZ( 5.5 );
}else if( nScreens === 10 ){
camera.positionZ( 6 );
}
} }
/** /**
* create a 3d screen for a mediaStream * create a 3d screen for a mediaStream
Expand All @@ -148,15 +185,15 @@
.positionY(-0.4) .positionY(-0.4)
.addClass('tvSet') .addClass('tvSet')


var url = URL.createObjectURL(mediaStream); // var url = URL.createObjectURL(mediaStream);
var texture = tQuery.createVideoTexture(url); // var texture = tQuery.createVideoTexture(url);
tQuery.createPlane().addTo(container) // tQuery.createPlane().addTo(container)
.addClass('plane') // .addClass('plane')
.setBasicMaterial() // .setBasicMaterial()
.map(texture) // .map(texture)
.back() // .back()
.positionY(0.5).positionY(0.31).positionZ(0.16) // .positionY(0.5).positionY(0.31).positionZ(0.16)
.scaleX(1/2.2).scaleY(1/2.85) // .scaleX(1/2.2).scaleY(1/2.85)


// // FIXME this event isnt really triggered // // FIXME this event isnt really triggered
// // TODO code that in tQuery.Node // // TODO code that in tQuery.Node
Expand All @@ -167,4 +204,29 @@
return container; return container;
} }
}); });
</script></body> </script>

<!-- github ribbon -->
<a href="https://github.com/jeromeetienne/webglvideochat" target='_blank'><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

<!-- share buttons -->
<div style='position: absolute; margin: 10px; top: 0px'>
<!-- twitter share button -->
<a href="https://twitter.com/share" class="twitter-share-button" data-text='WebGLVideoChat is a video chat in webgl with webrtc. Check it out!' data-via="jerome_etienne">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br/>
<!-- google plus button -->
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="small"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>

</body>

0 comments on commit 171922d

Please sign in to comment.