- From: Louay Bassbouss via GitHub <sysbot+gh@w3.org>
- Date: Tue, 10 Mar 2015 22:53:32 +0000
- To: public-secondscreen@w3.org
This is the first try for the Examples section. If you receive this as
mail notification please open it in Github by clicking on the link at
the end of the mail for better formatting.
# Examples
This section shows example codes that highlight the usage of main
features of the Presentation API. In these examples, `controller.html`
represents the controlling page that runs in the opener user agent
and `presentation.html` the presenting page that runs in the
presenting user agent. Both pages are served from `http://example.org`
(`http://example.org/controller.html` and
`http://example.org/presentation.html`). Please refer to the comments
in the code examples for further details.
## Monitor availability of presentation displays example
```javascript
<!-- controller.html -->
<button id="castBtn" style="display: none;"> </button>
<script>
// the cast button is visible if at least one presentation display
is available
var castBtn = document.getElementById("castBtn");
// availablechange event is fired when the presentation display
availability changes
navigator.presentation.onavailablechange = function(evt){
// show or hide cast button depending on display availability
castBtn.style.display = evt.available? "inline" : "none";
}
</script>
```
## Starting a new presentation session example
```javascript
<!-- controller.html -->
<script>
// it is also possible to use relative URL "presentation.html"
var presUrl = "http://example.com/presentation.html";
// create random presId
var presId = Math.random().toFixed(6).substr(2);
navigator.presentation.startSession(presUrl,
presId).then(function(newSession){
// a new session is started successfully
setSession(newSession);
},function(){
// user cancels the selection dialog or an error is occurred
setSession(null);
});
</script>
```
## Joining a presentation session example
```javascript
<!-- controller.html -->
<script>
// read presId from localStorage if exists
var presId = localStorage && localStorage["presId"] || null;
// presId is mandatory for joinSession
presId && navigator.presentation.joinSession(presUrl,
presId).then(function(existingSession){
// session with requested presUrl and presId is found and joined
successfully
setSession(existingSession);
},function(){
// no session found for presUrl and presId or an error is occurred
setSession(null);
});
</script>
```
## Monitor session's state and exchange data example
```javascript
<!-- controller.html -->
<script>
var session;
var setSession = function(theSession){
// close old session if exists
session && session.close();
// remove old presId from localStorage if exists
localStorage && delete localStorage["presId"];
// set the new session
session = theSession;
if(session){
// save presId in localStorage
localStorage && localStorage["presId"] = session.id;
// monitor session's state
session.onstatechange = function(){
if(this == session && this.state == "disconnected")
setSession(null);
};
// register message handler
session.onmessage = function(msg){
console.log("receive message",msg);
};
// send message to presentation page
session.postMessage("say hello");
}
};
</script>
```
```javascript
<!-- presentation.html -->
<script>
var session = navigator.presentation.session;
session.onstatechange = function(){
// session.state is either 'connected' or 'disconnected'
console.log("session's state is now", session.state);
};
session.onmessage = function(msg){
if(msg == "say hello")
session.postMessage("hello");
};
</script>
```
--
GitHub Notif of comment by louaybassbouss
See
https://github.com/w3c/presentation-api/issues/42#issuecomment-78166144
Received on Tuesday, 10 March 2015 22:53:42 UTC