Viewer Security

Set up a Secure Stream

The Dolby.io dashboard allows you to quickly secure your publishing stream with several advanced options. This tutorial will quickly and simply help you set up a secure stream with Dolby.io Real-time Streaming from the publishing token to playback within the Millicast player. If you are unfamiliar with how to use the API, we will provide you with a simple web code example in PHP so you can quickly copy the code to your own site. Most hosting providers and WordPress sites already have PHP enabled, and this will ensure your API key is still secure.

Create Your Secure Token

You can create a new publishing Token in the Dolby.io dashboard by clicking on the + button. For this example I have named the Token "Secure". You can also specify additional advanced options including Domain restrictions, IP restrictions, Geo Blocking, and also set the token to expire to stop any future streams to be published after that expiration date.

Secure the Millicast Viewer

Now that your live token and stream is secure, the hosted viewer link provided by the Dolby.io Real-time Streaming service will no longer work because it will now require an additional subscribe token. You can follow this guide if you are familiar with API calls and Javascript SDK.

For those of you not familiar with how to use the API and SDK, there is a simpler way to set this up to work in your web site. You will need your API secret, the stream label, account id and stream name. Your API secret is found by clicking on the Account link below your Username in the Dashboard. The additional details including stream label, account id and stream name can be found by selecting the API tab for the stream label created. For this example it was simply named "Secure".

Adding the Secure Viewer to your Web Page

Please make sure your hosting provider has PHP enabled!

The code below is in PHP and you will need to update the following parameters for your own stream:

YOUR_API_SECRET
YOUR_SECURE_LABEL
YOUR_ACCOUNT_ID
YOUR_STREAM_NAME
YOUR_IMAGE_URL

<?php
# $streamName = ($_GET["id"]); // If dynamic from URL or login page
$url = 'https://api.millicast.com/api/subscribe_token/';
$headers = array();
$headers[] = 'Content-Type: application/json';
$headers[] = 'Authorization: Bearer YOUR API KEY';
$streamName = 'YOUR_STREAM_NAME';
$accountId = 'YOUR_ACCOUNT_ID';
$label = 'YOUR_STREAM_LABEL';
$allowedDomains = 'YOUR_DOMAIN.com'; // If token is set with this allowed domain
$image = 'YOUR_IMAGE_URL'; // Add your image URL

error_reporting(E_ALL);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// curl_setopt($ch, CURLOPT_POSTFIELDS, '{"subscribesAuth": true, "label": "'. $label.'", "streams": [{"streamName":"'. $streamName.'"}], "allowedOrigins": ["'. $allowedDomains.'", "*.millicast.com"]}');
curl_setopt($ch, CURLOPT_POSTFIELDS, '{"subscribesAuth": true, "label": "'. $label.'", "streams":[{"streamName":"'. $streamName.'"}]}');

$result = curl_exec($ch);;
$result = json_decode( $result, true);
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}
curl_close($ch);
// print_r($result).'<br />';// Outputs array
# Just need the token
$token=  $result['data']['token'];
$securePlayer = 'https://viewer.millicast.com/?streamId='. $accountId . '/' . $streamName . '&token=' .$token. '&image=' . $image ;
?>
<!DOCTYPE html>
<html>
<head>
<style>
html{
overflow: hidden;
}
.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) */

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

.d-inline-block{
color: #000000;
}

</style>
</head>
<body>
<div class="player">
<iframe class="millicast" src="<?php echo $securePlayer ?>"  frameborder="none" scrolling="no" playsinline allowfullscreen></iframe>
</div>
</body>
</html>

Once you have made the changes to the code you can save the page as index.php for example and upload it to your web site: https://YOUR_SITE.com/player/index.php (for example).

You can now start publishing your secure stream and view it within your secure web page.

Note: Adding *.millicast.com in allowed domains could allow viewer to use token in URL. To properly secure access you can use the Millicast SDK to place the player directly on your site with only YOUR_SITE.com allowed.

Secure Player Link with Login

To add additional security to the link we will add a simple login with a user name and password. Once the user is logged the IP will be used in the curl call. This will block any user from sharing the src link outside of the IP generated from the log in. This method could be used with a data base that stores users login and IPs. Using a log in can also be used embed the IP or the ID in the viewer link. This code example below will add an transparent IP to the player.

<?php

// Define your username and password
$username = "YOUR_USERNAME";
$password = "YOUR_PASSWORD";
if ($_POST['txtUsername'] != $username || $_POST['txtPassword'] != $password) {
?>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#91918e ;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>Please Enter Credentials</h1>
<h5>Invalid username or password will not allow playback</h5>
<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="txtUsername">Username:</label>
<input type="text" title="Enter your Username" name="txtUsername" /></p>
<label for="txtpassword">Password:</label>
<input type="password" title="Enter your password" name="txtPassword" /></p>
<input type="submit" name="Submit" value="Login" /></p>
</form>
</body>
</html>
<?php
}
else {
?>
<!-- Secure Player Code Here IP grabed at login-->

<?php
# $streamName = ($_GET["id"]); // If dynamic from URL or login page
$url = 'https://api.millicast.com/api/subscribe_token/';
$headers = array();
$headers[] = 'Content-Type: application/json';
$headers[] = 'Authorization: Bearer YOUR API KEY';
$streamName = 'YOUR_STREAM_NAME';
$accountId = 'YOUR_ACCOUNT_ID';
$label = 'YOUR_STREAM_LABEL';
$allowedDomains = 'YOUR_DOMAIN.com'; // If token is set with this allowed domain
$image = 'YOUR_IMAGE_URL'; // Add your image URL
$userIP = $_SERVER['REMOTE_ADDR']; // If user logs in successfully page player is launched 
error_reporting(E_ALL);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, '{"subscribesAuth": true, "label": "'. $label.'", "streams": [{"streamName":"'. $streamName.'"}], "allowedOrigins": ["'. $allowedDomains.'", "*.millicast.com"],"allowedIpAddresses": ["'.$userIP.'"]  }');

$result = curl_exec($ch);;
$result = json_decode( $result, true);
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}
curl_close($ch);
// print_r($result).'<br />';// Outputs array
# Just need the token
$token=  $result['data']['token'];
$securePlayer = 'https://viewer.millicast.com/?streamId='. $accountId . '/' . $streamName . '&token=' .$token. '&image=' . $image ;
?>
<!DOCTYPE html>
<html>
<head>
<style>
html{
overflow: hidden;
}
.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) */

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

.d-inline-block{
color: #000000;
}
.watermark{
position: absolute;
top: 0;
left:0;
color:#ffffff;
opacity: 5%;
}
</style>
</head>
<body>
<div class="player">
<iframe class="millicast" src="<?php echo $securePlayer ?>"  frameborder="none" scrolling="no" playsinline allowfullscreen></iframe>
<div class="watermark"><?php echo $userIP; ?></div>
 </div>
</body>
</html>
<!-- END -->
<?php

}