Using Viewer Iframe with an image

The following HTML code will allow an image or a video to play if you are not streaming.
The current heartbeat is set to 30 seconds to remove the image if streaming.
If you are not streaming this image will stay in place and the page reload is set.
Page reload is used to reset an image if you have stopped your stream.

Getting started.

You can also find your xhr request and information from your Millicast portal.
Select the stream you want to publish to and then select the API tab.

HTML

Update the following.

  • ACCOUNT_ID
  • STREAM_NAME
  • starting.png
<!DOCTYPE html>
<html>
<head>
<style>
html{

}
.player{
position:relative;
overflow: hidden;
   top: -8px;
   left: -.88%;
   width:103%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}
iframe{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

}
img {
  opacity: 50%;
  background-color: transparent;
  position:absolute;top:0;left:0;width:100%;height:100%;
}
</style>

</head>
<body>
<div class="player">
<iframe src="https://viewer.millicast.com/v2?streamId=ACCOUNT_ID/STREAM_NAME"  frameborder="none" scrolling="no" playsinline allowfullscreen></iframe>
<img id="yourImage"  src="starting.png"   >
</div>
</body>
<script>
setInterval(function(){
var url = "https://director.millicast.com/api/director/subscribe";
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "NoAuth");
xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
      console.log(xhr.status );
      console.log(xhr.responseText);
   // alert(xhr.responseText);
     if (xhr.status = 200 ){
   document.getElementById("yourImage").style.visibility = 'hidden'; 
   }

   if (xhr.responseText === '{"status":"fail","data":{"streamId":"ACCOUNT_ID/STREAM_NAME","message":"stream not found"}}') {
   document.getElementById("yourImage").style.visibility = 'show';
   location.reload();
   }else{
   
   }   
   }};
   
var data = '{"streamAccountId":"ACCOUNT_ID","streamName":"STREAM_NAME","unauthorizedSubscribe":true}';
xhr.send(data);
 }, 30000);  //If no stream page will reload 30 seconds else heartbeat
</script>
</html>

Add the page to your site and your ready to go.


Did this page help you?