kasthor · August 29, 2015 14:16
diff --git a/tok.html b/tok.html
 <html>
  <head>
    <title>Opentok Experiment</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
    <script src='http://static.opentok.com/webrtc/v2.2/js/opentok.min.js'></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
      // Initialize API key, session, and token...
      // Think of a session as a room, and a token as the key to get in to the room
      // Sessions and tokens are generated on your server and passed down to the client
      var apiKey = "45170332";
      var sessionId = "1_MX40NTE3MDMzMn5-MTQyNTQxODE4NTUxMH5iUnRXU1h5cVJJaDRzWnZHZ09XK0duaHV-fg";
      var token = "T1==cGFydG5lcl9pZD00NTE3MDMzMiZzaWc9OGI4NGNhYjUwMDEyYzEwN2YxZWZlMzdhMjFmMDEyM2RiYjI2MzNmZDpyb2xlPXB1Ymxpc2hlciZzZXNzaW9uX2lkPTFfTVg0ME5URTNNRE16TW41LU1UUXlOVFF4T0RFNE5UVXhNSDVpVW5SWFUxaDVjVkpKYURSelduWkhaMDlYSzBkdWFIVi1mZyZjcmVhdGVfdGltZT0xNDI1NTEzNzc0Jm5vbmNlPTAuMzU4NTY2MTE1ODEwMjg0NjQmZXhwaXJlX3RpbWU9MTQyODEwNTc0NA==";

      // Initialize session, set up event listeners, and connect
      var session = OT.initSession(apiKey, sessionId);
      var streams = [];
      var buffer = {};

      // Calculates the biggest squared number to fit within <number>
      function floor_power( number ) {
        var i; for ( i = 1; number > (i * i); i++ ); return i;
      }

      // Sets the size of each div so they all fit on the desired space
      function update_sizes( streams ) {
        var subscribers = _.chain(streams)
          .map(function( s ){ return session.getSubscribersForStream( s ) }) 
          .flatten()
          .map(function( s ){ return s.id } )
          .value();

        var pow = floor_power( subscribers.length );
        var width = 600 / pow;
        var height = 400 / pow;

        _.each( subscribers, function( s ){
          var e = document.getElementById( s ); 
          e.style.width = width + "px"; 
          e.style.height = height + "px"; 
        })
      }

      session.on( {
        // When a client connects, subscribe to its feed and register the stream, and fit all video sources
        streamCreated: function(event) {
          session.subscribe(event.stream, "subscriber", { insertMode: "append" });
          streams.push( event.stream );

          update_sizes( streams );
        },
        // When a client disconects, remove the registered stream, and reposition all video sources
        streamDestroyed: function( event ){
          streams.splice( streams.indexOf( event.stream ), 1 );
          update_sizes( streams );
        },
        // Handle DataChannel file updates
        signal: function( event ){
          if( ! buffer[ event.data.filename ] ) buffer[event.data.filename] = []
          buffer[ event.data.filename ].push( event.data.message );

          if( event.data.last ) {
            var 
              _url = buffer[ event.data.filename].join('');
              _save = document.createElement( 'a' );
            _save.href = _url;
            _save.target = '_blank';
            _save.download = event.data.filename;

            var _event = document.createEvent( 'Event' );
            _event.initEvent( 'click', true, true );

            _save.dispatchEvent( _event );
            ( window.URL || window.webkitURL ).revokeObjectURL( _save.href );

            delete buffer[ event.data.filename ];
          }
        }
      });

      // Connect to our session and publish our feed
      session.connect(token, function(error) {
        publisher = OT.initPublisher( "publisher", { width: 132, height: 99 } );
        session.publish(publisher);
      });

      window.onload = function(){ 
        // Set our uploader box to initiate the upload
        document.querySelector( '#uploader' ).onchange = function(){
          var _file = this.files[0];  
          var _filename = this.files[0].name;
          var _reader = new window.FileReader();
          var _chunkSize = 1000;

          function _sendData( event, data ) {
            var _packet = {};
            var _remainder;

            if( event ) data = event.target.result;
            if( data.length > _chunkSize ){
              _packet.message = data.slice( 0, _chunkSize );
              _packet.filename = _filename;
              _remainder = data.slice( _packet.message.length );
            } else {
              _packet.message = data;
              _packet.filename = _filename;
              _packet.last = true;  
            }

            session.signal( { "data": _packet } );

            if( _remainder && _remainder.length )
              setTimeout( function(){ _sendData( false, _remainder ); }, 100 );  
          }

          _reader.readAsDataURL( _file );
          _reader.onload = _sendData;
        }
      }
    </script>
    <style>
      .video{
        position: relative;
        width: 600px;
        height: 400px;  
        margin: auto;
      }
      .video #publisher {
        position: absolute; 
        right: 50px;
        top: 25px;
        width: 132px;
        height: 99px;
        border: 1px solid blue;
        opacity: 0.5;
        z-index: 2;
      }
      .video #subscriber {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 600px;
        height: 400px;  
        border: 1px solid red;
        z-index: 1;
      }
      .video #subscriber div{
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="video">
      <div id="publisher">
      </div>
      <div id="subscriber">
      </div>
    </div>
    <input type="file" id="uploader" />
  </body>
 </html>
	<html>
	<head>
	<title>Opentok Experiment</title>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
	<script src='http://static.opentok.com/webrtc/v2.2/js/opentok.min.js'></script>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
	// Initialize API key, session, and token...
	// Think of a session as a room, and a token as the key to get in to the room
	// Sessions and tokens are generated on your server and passed down to the client
	var apiKey = "45170332";
	var sessionId = "1_MX40NTE3MDMzMn5-MTQyNTQxODE4NTUxMH5iUnRXU1h5cVJJaDRzWnZHZ09XK0duaHV-fg";
	var token = "T1==cGFydG5lcl9pZD00NTE3MDMzMiZzaWc9OGI4NGNhYjUwMDEyYzEwN2YxZWZlMzdhMjFmMDEyM2RiYjI2MzNmZDpyb2xlPXB1Ymxpc2hlciZzZXNzaW9uX2lkPTFfTVg0ME5URTNNRE16TW41LU1UUXlOVFF4T0RFNE5UVXhNSDVpVW5SWFUxaDVjVkpKYURSelduWkhaMDlYSzBkdWFIVi1mZyZjcmVhdGVfdGltZT0xNDI1NTEzNzc0Jm5vbmNlPTAuMzU4NTY2MTE1ODEwMjg0NjQmZXhwaXJlX3RpbWU9MTQyODEwNTc0NA==";

	// Initialize session, set up event listeners, and connect
	var session = OT.initSession(apiKey, sessionId);
	var streams = [];
	var buffer = {};

	// Calculates the biggest squared number to fit within <number>
	function floor_power( number ) {
	var i; for ( i = 1; number > (i * i); i++ ); return i;
	}

	// Sets the size of each div so they all fit on the desired space
	function update_sizes( streams ) {
	var subscribers = _.chain(streams)
	.map(function( s ){ return session.getSubscribersForStream( s ) })
	.flatten()
	.map(function( s ){ return s.id } )
	.value();

	var pow = floor_power( subscribers.length );
	var width = 600 / pow;
	var height = 400 / pow;

	_.each( subscribers, function( s ){
	var e = document.getElementById( s );
	e.style.width = width + "px";
	e.style.height = height + "px";
	})
	}

	session.on( {
	// When a client connects, subscribe to its feed and register the stream, and fit all video sources
	streamCreated: function(event) {
	session.subscribe(event.stream, "subscriber", { insertMode: "append" });
	streams.push( event.stream );

	update_sizes( streams );
	},
	// When a client disconects, remove the registered stream, and reposition all video sources
	streamDestroyed: function( event ){
	streams.splice( streams.indexOf( event.stream ), 1 );
	update_sizes( streams );
	},
	// Handle DataChannel file updates
	signal: function( event ){
	if( ! buffer[ event.data.filename ] ) buffer[event.data.filename] = []
	buffer[ event.data.filename ].push( event.data.message );

	if( event.data.last ) {
	var
	_url = buffer[ event.data.filename].join('');
	_save = document.createElement( 'a' );
	_save.href = _url;
	_save.target = '_blank';
	_save.download = event.data.filename;

	var _event = document.createEvent( 'Event' );
	_event.initEvent( 'click', true, true );

	_save.dispatchEvent( _event );
	( window.URL \|\| window.webkitURL ).revokeObjectURL( _save.href );

	delete buffer[ event.data.filename ];
	}
	}
	});

	// Connect to our session and publish our feed
	session.connect(token, function(error) {
	publisher = OT.initPublisher( "publisher", { width: 132, height: 99 } );
	session.publish(publisher);
	});

	window.onload = function(){
	// Set our uploader box to initiate the upload
	document.querySelector( '#uploader' ).onchange = function(){
	var _file = this.files[0];
	var _filename = this.files[0].name;
	var _reader = new window.FileReader();
	var _chunkSize = 1000;

	function _sendData( event, data ) {
	var _packet = {};
	var _remainder;

	if( event ) data = event.target.result;
	if( data.length > _chunkSize ){
	_packet.message = data.slice( 0, _chunkSize );
	_packet.filename = _filename;
	_remainder = data.slice( _packet.message.length );
	} else {
	_packet.message = data;
	_packet.filename = _filename;
	_packet.last = true;
	}

	session.signal( { "data": _packet } );

	if( _remainder && _remainder.length )
	setTimeout( function(){ _sendData( false, _remainder ); }, 100 );
	}

	_reader.readAsDataURL( _file );
	_reader.onload = _sendData;
	}
	}
	</script>
	<style>
	.video{
	position: relative;
	width: 600px;
	height: 400px;
	margin: auto;
	}
	.video #publisher {
	position: absolute;
	right: 50px;
	top: 25px;
	width: 132px;
	height: 99px;
	border: 1px solid blue;
	opacity: 0.5;
	z-index: 2;
	}
	.video #subscriber {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 600px;
	height: 400px;
	border: 1px solid red;
	z-index: 1;
	}
	.video #subscriber div{
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<div class="video">
	<div id="publisher">
	</div>
	<div id="subscriber">
	</div>
	</div>
	<input type="file" id="uploader" />
	</body>
	</html>