Embedding webcaStudio player in a web page

Frank Carmona API, SSO Leave a Comment

Introduccion

the tag <iframe>  </iframe> is perhaps one of the simplest and most compatible ways of integrating a player within your webpage.

This Post covers the integration for any of the access systems in webcaStudio

01_AccessModes

Open free and open free registered

Embeding the open free acces URL’s is the simplest way to do it as it requires no programing .

Altough you can embed the whole programe page, the recommended way is to embed the session URL’s.

To do this, click on the session links to get the session URL’s for any of these acccess systems.

02_OpenAcces_sessionURL

Depending on the player Template chosen for this session, dimensions may be different. Observe that dimensions are specified next to each session’s name. In above’s example dimensions are 1018px width and 670px height.

The iframe code is built as follows:


...

<iframe src=”http://dev.webcasting-studio.net/event/?t=MjQ4Zjg5MWQ3YjEzZDc0ODYzMTQ2MjQwZTNhYjcwOGI0YzJmMjI4Yg==&e=686&a=5&pt=878&p=1468” width=”1018” height=”670”>

Alternative text error.

</iframe>

...

In case you want to use the Open Access-Registration Required access mode, the iframe will show up the login page as well. Remember that the aspect of the different pages can be personalized within the “Program” tab

From this point ahead the event cycle live behavior is the same as when you use the URL’s directly within a browser; If the event is not live yet, a landing page with a disabled access button will appear. If the user waits with this page opened, the access button will enable itself automatically as soon as the producer gives the appropriate order either publish live or on-demand

When an event is opened in live or on-demand mode, any user trying to access the event will open it directly in the page where the event session is embedded

Single Sign On

In this case you can not use directly the session’s URL’s as webcaStudio receives user data and URL’s via POST and an iframe works as an embedded window within another, so the browser will use GET for this call.

In order to embed a session’s player using the SSO you must build a small piece of code, “middleware”, which essentially will gather the user info and together with a PSK “Pre-Shared-Key” and some other information make a unique encrypted call to webcaStudio platform. The player will build the same hash to check whether the call is valid or not.

03-SSO_iframe

A PHP middleware sample follows


<?php
// middleware.php
//obtain the unique PSK given by the Platform
$psk = "webcaStudio-PSK";
//gather the logged user information
$user = $_SESSION['session_key']['user'];
//Account_id can be obtained pressing the "info" button next to the explnation of the access sysem on the image above
$account_id = 9999;
//Gather the POST URL from the page above (Can also be obtained via API. See API documentation here)
$url = "https://vancast.webcasting-studio.net/event/?t=MzdiNmE5NDYwZTdlNTFlNjQxODNiNzQ1ZTliODJiMTZjOWZmOGNhYw==&e=901&a=7&pt=1139&p=1982";
$timestamp = time(); //Create a TimeStamp at the call time

//Generating the Hash (Token) fot he secure call
$token = hash_hmac('sha1', $user['email'].$account_id.$url.$timestamp,$psk);
?>
<html>
<head>
<title></title>
</head>
<body onload="submitPost()">
<form id="post-call" action="<?php echo $url ?>" method="post">
<input type="hidden" name="firstname" value="<?php echo $user['name'] ?>" />
<input type="hidden" name="secondname" value="<?php echo $user['lastname'] ?>" />
<input type="hidden" name="email" value="<?php echo $user['email'] ?>" />
<input type="hidden" name="organization" value="<?php echo $user[org] ?>" />
<input type="hidden" name="language" value="" />
<input type="hidden" name="account" value="<?php echo $account_id ?>" />
<input type="hidden" name="proxy" value="" />
<input type="hidden" name="ref_id" value="<?php echo $user['id'] ?>" />
<input type="hidden" name="time" value="<?php echo $timestamp ?>" />
<input type="hidden" name="hash" value="<?php echo $token ?>" />
</form>
<script>
//When the document is loaded we make the POST call
function submitPost(){
document.getElementById('post-call').submit();
}
</script>
</body>
</html>

 

Finaly, we specify the URL to the middleware program within the iframe:


...

<iframe src=”middleware.php” width=”1018” height=”670”>

Texto alternativo en caso de error.

</iframe>

...

User/Password Validation Lists

The system works the same way the OpenAcces- Registration Required works. All webcaStudio intermediate pages are iFramed as well.

 

Final Considerations

WARNING: Some browsers block XHR calls (Internet Explorer 9 and 10) This means that pages gathering registration information within the iFrame could be blocked

Implementation logic is to embed either an open access (which means an open URL) or, in case of private, lead generation or pay per view content, use SSO integrated with a platform that has previously gathered the user info. In any of these scenarios iFrames work in all browsers.

 

 

Leave a Reply