test

Customize Video Tile Shapes

Video chat is a great way to communicate, but sometimes I get bored looking at the same rectangular video tiles in a group video chat. I wanted to see how easy it would be to change up the typical layout with circular video tiles in a WebRTC based app. It turns out the Vidyo.io APIs make this pretty easy to do and we gave a good overview in one of our webinars on creating custom layouts. But that webinar primarily focused tile position and size, I want to change the actual shape of the tile.

Following the steps below you will see how I was able to change the standard rectangle shaped with a circular tile.  These steps below use a combination of CSS styles and JS / DOM manipulation to convert a rectangular tile into circle. These changes are applied to the VidyoConnector reference app. You can get the source code for VidyoConnector by downloading the Vidyo web SDK here.

Customize Video Tile Shapes

Step 1.

Add the following CSS
VidyoConnector.css

.circleBase {
border-radius: 600px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-webkit-transform: rotate(0.000001deg);
overflow: hidden;
}
.type1 {
width: 100px;
height: 100px;
background: white;
border: 3px solid white;
}

Apply the above CSS style to the <div> you want to make circular.
VidyoConnector.html

<div id="renderer" class="rendererWithOptions pluginOverlay hidden circleBase type1"></div>

Next configure, VidyoConnector to use “Custom Layout” and assign self-view to the above div
VidyoConnector.js

onSelected: function(localCamera) {
// Camera was selected/unselected by you or automatically
if(localCamera) {
$("#cameras option[value='" + window.btoa(localCamera.id) + "']").prop('selected', true);
}

vidyoConnector.HideView({
viewId: "renderer"
});
vidyoConnector.AssignViewToLocalCamera({
viewId: "renderer",
localCamera: localCamera,
displayCropped: true,
allowZoom: false
});

}

Now if you run the sample on WebRTC supported browser, you will see something like this. This looks like a truncated circle and also the label is not centered.

Customize Video Tile Shapes

Now to make it a perfect circle, we have to use Javascript and manipulate the DOM. Essentially we have to zoom the video so that it can fill the whole circle.

When we assign local camera view to the <div>, Vidyo API dynamically inserts a <video> element and <label> element. The following method, increases the size of video element and fills the whole circle.
VidyoConnector.js

function roundify(div){
var container = document.getElementById(div);
if(container.children.length &gt;0){
if(container.children[0].children.length&gt;0){
if(container.children[0].children[0].children.length &gt; 0){

var frames = container.children[0].children[0].children;
for(var i=0; i&lt; frames.length;i++){
if(frames[i].style.display == "block"){

frames[i].style.left="0px";
frames[i].style.top="0px";
frames[i].style.width=Math.round(parseInt(frames[i].style.width)*(1.1))+"px";
frames[i].style.height=Math.round(parseInt(frames[i].style.height)*(1.25))+"px";
var labels = frames[i].children;
for(var j=0;j&lt;labels.length;j++){
if(labels[j].className=="label"){
labels[j].style.textAlign = "center";
}
}
}
}
}
}
}
}

Now we modify our custom layout code and call the method “roundify” to make it a perfect circle. First we have to assign local camera to the div, wait for some time for the video to appear and then call “roundify”.
VidyoConnector.js

onSelected: function(localCamera) {
// Camera was selected/unselected by you or automatically
if(localCamera) {
$("#cameras option[value='" + window.btoa(localCamera.id) + "']").prop('selected', true);
}

vidyoConnector.HideView({
viewId: "renderer"
});
vidyoConnector.AssignViewToLocalCamera({
viewId: "renderer",
localCamera: localCamera,
displayCropped: true,
allowZoom: false
});
setTimeout(function(){roundify('renderer');},1750);
}

So that’s it. You can see it’s pretty simple to make changes to the shape of the tiles by simply changing up the CSS and JS/DOM. Download the code for this project from the Vidyo GitHub page.

Also, don’t forget you can always download our latest VidyoConnector reference app from our package download page.

Try vidyo.io for free