Adding Captions with Web Captioner to Millicast Viewer

About Web Captioner

Web Captioner makes your event, speech, classroom lecture, or church service accessible with real-time captioning. Select the link to start captioning in real time at no cost.
Web Captioner can be used directly with OBS however this example will allow an option to remove the captions with a button.

Setup

Open Web Captioner and to the left select experiments.
Add the following feature Share Link.
You should now see the following option.

You will now see to the left of your Start Captioning button a new share icon button.

Select the button and you will see options to have the link expire or to add vanity options. For this set up we will just use the link that expires. There will be two links available and for this set up we will select Use in your broadcasting application.

Code

Now that you have your Web Captioner share link we will use it with your current Millicast viewer for the event current event.

For the following code you will want to change the following.

<!DOCTYPE html>
<html>
<head>
<style>
html{
overflow: hidden;
}
.player{
position:relative;
overflow: hidden;
   top: -8px;
   left: -.88%;
   width:102%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}
.millicast{
  position: absolute;
  display: block;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  }

.captioner{
position:absolute;
display:none;
left: 0px;
width: 100%;
height: 23%;
bottom: 0;
opacity: 0.4;
frameborder: none;
scrolling: no;


}
.captions{
position:absolute;
display:block;
top: 1%;
left: 2%;

}
.captions:hoover{
position: absolute;
display:block
top: 1%;
right: 1%;

}

.d-inline-block{
color: #000000;
}
img {
  opacity: 0.6;
  background-color: transparent;
  position:absolute;top:0;left:0;width:100%;height:100%;
}

span.d-block w-100{
font-size:1em;
{

</style>
<script type="text/javascript">

function closeC() {
    var captions = document.getElementById('captions');
    if (captions.style.display === 'block') {
        captions.style.display = 'none';
    }
    else {
        captions.style.display = 'block';
    }

};

</script>
</head>
<body>
<div class="player">
<iframe class="millicast" src=" https://viewer.millicast.com/?streamId=accountId/streamName" frameborder="none" scrolling="no" playsinline allowfullscreen></iframe>
<iframe id="captions" class="captioner"  src="https://webcaptioner.com/s/SHARE_LINK?broadcast" ></iframe>
<button id="CC" class="captions"  type="button" onclick="closeC()" >CC</button>
</div>

</body>
</html>

Viewing

The code will add a button on the top left that can enable your Web Captioner share link.

The example can be modified as desired and shows a simple way of integrating Closed Captions to your live event.