songz/opentok_ratio.js

## opentok_ratio.js
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Facetime OpenTok" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Conversation window styles */

.conversation {
  position: relative;
}

/* Video elements */

.conversation .media video {
  background: #eee;
}

/* Nested video elements */

.conversation .media.nested {
  position: relative;
  text-align:center;
}

.conversation .media.nested .remote {
  display: inline-block;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: #000;
}

.conversation .media.nested .remote_wrapper {
  display: inline-block;
  position: relative;
  background: #0f0;
  width: 60%;
  padding-bottom: 45%;
}

.conversation .media.nested .local {
  display: inline-block;
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 30%;
  max-width: 140px;
  height: 75px;
  z-index: 2;
  background-color:#ff0;
}

.mySubscriber{
  background-color: #ddd;
  display: inline-block;
  width: 120px;
  height: 90px;
}
  </style>
</head>
<body>
  <div class="conversation">
    <div class="media nested">
      <div class="remote_wrapper">
        <div class="remote"></div>
      </div>
      <div class="local"></div>
    </div>
  </div>

  <script src='//static.opentok.com/webrtc/v2.2/js/opentok.min.js'></script>
  <script>
    var data = {
      apiKey: "44443122",
      sessionId: "2_MX40NDQ0MzEyMn5-TW9uIE1heSAxOSAxNToyOToxMCBQRFQgMjAxNH4wLjAyNjk5MjY3OX5-",
      token: "T1==cGFydG5lcl9pZD00NDQ0MzEyMiZzaWc9ZmNjMGE1OTUxZWU5OTUyYWNhZmVkODI4ZmU1MmJiMmU3MjdmN2IwNzpzZXNzaW9uX2lkPTJfTVg0ME5EUTBNekV5TW41LVRXOXVJRTFoZVNBeE9TQXhOVG95T1RveE1DQlFSRlFnTWpBeE5INHdMakF5TmprNU1qWTNPWDUtJmNyZWF0ZV90aW1lPTE0MDU2MTg2Nzgmbm9uY2U9MC40NTIwMzUyMTM4MjA2MzYzJnJvbGU9bW9kZXJhdG9yJmV4cGlyZV90aW1lPTE0MDU3MDUwNzg="
    };
    var styleall = { "buttonDisplayMode": "off", "nameDisplayMode":"off" };
    var property = {
      style: styleall,
      width: "100%",
      height: "100%",
      insertMode: "append"
    };

    var publisher = OT.initPublisher(data.apiKey, document.querySelector(".local"), property);

    var session = OT.initSession(data.apiKey, data.sessionId);

    session.connect( data.token, function(err){
      if(!err){ session.publish(publisher); }
    });

    session.on("streamCreated", function(event){
      var sprop = {
        style: styleall,
        width: 600,
        insertMode: "append"
      };
      session.subscribe(event.stream, document.querySelector(".remote"), property);
    });
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Facetime OpenTok" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>
	/* This Source Code Form is subject to the terms of the Mozilla Public
	* License, v. 2.0. If a copy of the MPL was not distributed with this
	* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

	/* Conversation window styles */

	.conversation {
	position: relative;
	}

	/* Video elements */

	.conversation .media video {
	background: #eee;
	}

	/* Nested video elements */

	.conversation .media.nested {
	position: relative;
	text-align:center;
	}

	.conversation .media.nested .remote {
	display: inline-block;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background: #000;
	}

	.conversation .media.nested .remote_wrapper {
	display: inline-block;
	position: relative;
	background: #0f0;
	width: 60%;
	padding-bottom: 45%;
	}

	.conversation .media.nested .local {
	display: inline-block;
	position: absolute;
	bottom: 4px;
	right: 0;
	width: 30%;
	max-width: 140px;
	height: 75px;
	z-index: 2;
	background-color:#ff0;
	}

	.mySubscriber{
	background-color: #ddd;
	display: inline-block;
	width: 120px;
	height: 90px;
	}
	</style>
	</head>
	<body>
	<div class="conversation">
	<div class="media nested">
	<div class="remote_wrapper">
	<div class="remote"></div>
	</div>
	<div class="local"></div>
	</div>
	</div>

	<script src='//static.opentok.com/webrtc/v2.2/js/opentok.min.js'></script>
	<script>
	var data = {
	apiKey: "44443122",
	sessionId: "2_MX40NDQ0MzEyMn5-TW9uIE1heSAxOSAxNToyOToxMCBQRFQgMjAxNH4wLjAyNjk5MjY3OX5-",
	token: "T1==cGFydG5lcl9pZD00NDQ0MzEyMiZzaWc9ZmNjMGE1OTUxZWU5OTUyYWNhZmVkODI4ZmU1MmJiMmU3MjdmN2IwNzpzZXNzaW9uX2lkPTJfTVg0ME5EUTBNekV5TW41LVRXOXVJRTFoZVNBeE9TQXhOVG95T1RveE1DQlFSRlFnTWpBeE5INHdMakF5TmprNU1qWTNPWDUtJmNyZWF0ZV90aW1lPTE0MDU2MTg2Nzgmbm9uY2U9MC40NTIwMzUyMTM4MjA2MzYzJnJvbGU9bW9kZXJhdG9yJmV4cGlyZV90aW1lPTE0MDU3MDUwNzg="
	};
	var styleall = { "buttonDisplayMode": "off", "nameDisplayMode":"off" };
	var property = {
	style: styleall,
	width: "100%",
	height: "100%",
	insertMode: "append"
	};

	var publisher = OT.initPublisher(data.apiKey, document.querySelector(".local"), property);

	var session = OT.initSession(data.apiKey, data.sessionId);

	session.connect( data.token, function(err){
	if(!err){ session.publish(publisher); }
	});

	session.on("streamCreated", function(event){
	var sprop = {
	style: styleall,
	width: 600,
	insertMode: "append"
	};
	session.subscribe(event.stream, document.querySelector(".remote"), property);
	});
	</script>

	</body>
	</html>