opentok-layout-js
Advanced tools
Readme
Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.
It automatically detects when an element is added or when the container is resized and it adjusts the layout of its' children accordingly.
Demo of layout container in action
The OpenTok for WebRTC JS API is required.
Call initLayoutContainer and pass it the element you want it to layout. It works best if you set the position of the element to be absolute or relative. You will then be returned an object with a layout method that you can call to layout the page.
var layout = initLayoutContainer(document.getElementById("layout"), {
maxRatio: 3/2, // The narrowest ratio that will be used (default 2x3)
minRatio: 9/16, // The widest ratio that will be used (default 16x9)
fixedRatio: false, // If this is true then the aspect ratio of the video is maintained and minRatio and maxRatio are ignored (default false)
bigClass: "OT_big", // The class to add to elements that should be sized bigger
bigPercentage: 0.8 // The maximum percentage of space the big ones should take up
bigFixedRatio: false, // fixedRatio for the big ones
bigMaxRatio: 3/2, // The narrowest ratio to use for the big elements (default 2x3)
bigMinRatio: 9/16, // The widest ratio to use for the big elements (default 16x9)
bigFirst: true // Whether to place the big one in the top left (true) or bottom right
});
layout.layout()
In an OpenTok application you would do something like:
<html>
<head>
<title>Layout Container Example</title>
<script src="http://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="js/opentok-layout.min.js"></script>
<style type="text/css" media="screen">
#layoutContainer {
width: 320px;
height: 240px;
background-color: #DDD;
position:relative;
}
</style>
</head>
<body>
<div id="layoutContainer">
<div id="publisherContainer"></div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var layoutContainer = document.getElementById("layoutContainer");
// Initialize the layout container and get a reference to the layout method
var layout = initLayoutContainer(layoutContainer).layout;
// Below is a normal hello world OpenTok application for v2 of the API
// The layout container will redraw when the layout mtehod is called and
// adjust the layout accordingly
var sessionId = "mySessionId";
var token = "myToken";
var apiKey = "myAPIKey";
var session = OT.initSession(sessionId);
session.on("streamCreated", function(event){
session.subscribe(event.stream, "layoutContainer", {
insertMode: "append"
});
layout();
}).connect(apiKey, token, function (err) {
if (!err) {
session.publish("publisherContainer");
layout();
}
});
</script>
</html>
Now any time you call the layout method the layout container will automatically be positioned and sized so that it minimises the white-space within the box given.
You want to call the layout method any time the size of the layout container changes. If the size of the container varies depending on the size of the window you may need to do:
var resizeTimeout;
window.onresize = function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function () {
layout();
}, 20);
};
This throttles calling layout so that it's not called over an over again when you're resizing the window.
If you want to animate things you can use CSS3 transitions on the children. eg.
.container > * {
transition-property: all;
transition-duration: 0.5s;
}
If you add the bigClass to elements in the layout container they will be treated differently. They are essentially in a layout container of their own which takes up bigPercentage of the space and has it's own settings for ratios (bigMaxRatio, bigMinRatio, bigFixedRatio).
You can have multiple elements which are treated as big elements which allow you to have all kinds of different layouts.
To see how this works try the demo and double click on elements.
The Layout Container will take into account the padding, margins and borders on it's children. If you want spacing between elements simply give them a margin or padding and they will be spaced accordingly.
FAQs
Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.
The npm package opentok-layout-js receives a total of 1,696 weekly downloads. As such, opentok-layout-js popularity was classified as popular.
We found that opentok-layout-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.