Con le specifiche WebRTC possiamo creare una comunicazione peer-2-peer tra due browser, sulla quale far transitare stream multimediali e non.
Il talk è suddiviso in una serie di esperimenti e demo live che offrono uno spunto per scoprire e approfondire queste bellissime API.
Alcuni degli esperimenti:
- applicare un filtro (es: grayscale) ad uno stream video
- applicare un effetto audio ad uno stream audio con le Web Audio API
- WebRTC over WebSocket
This talk aims to showcase some less-know CSS techniques in order to achieve visually interesting results or to unlock CSS hidden capabilities. The talk is organized in chapters, each of them focused on a specific technique exposed with a brief overview and then implemented with a live demo, or with live coding where time permits.
HTML5 CI SIAMO!
6 demo in 30 minuti ricchi di azione! Una panoramica di impatto sugli aspetti più divertenti della specifica, tutti da mettere in pratica
How create a single page apps using html5 and javascript Stefano Marchisio
Create a html5/javascript apps with mvc/ajax using knockout.js/mvvm. Javascript to IQueryable is a framework that allows you to write a simple query in javascript client side and then execute it server side with EntityFramework or a linq provider that implement IQueryable. On the server is used "Dynamic Expressions and Queries in LINQ by Microsoft" to compose dynamically your query. In this way you can create a grid with filter, paging and sort functions. There is also support for: mvc3 unobtrusive jquery validation and jquery mobile/phonegap. - http://Javascriptiqueryable.codeplex.com - http://www.youtube.com/watch?v=qjwyKwsXHKs - http://www.linqitalia.com/articoli/entity-framework/sfruttare-javascript-eseguire-query-linq-server-tramite-dynamic-iqueryable.aspx
Una semplice guida che spiega come installare e utilizzare il software open-source Cacti per la gestione della rete.
A simple guide on how to install and use the software open-source Cacti for network management.
SkyMedia: La tecnologia al servizio dell'intrattenimentoMavigex srl
Mavigex parla al #WhyMCA 2012 e presenta l'architettura del sistema #SkyMedia.
Un gruppo di aziende provenienti da tutta Europa sta mettendo a punto un sistema tecnologicamente innovativo per dare una marcia in più agli eventi sportivi, combinando tecnologie all'avanguardia come droni volanti, schermi immateriali, telecamere 3D, applicazioni mobili per iPhone iPad e Android e tracciamento delle prestazioni degli atleti in tempo reale.
Tutte queste tecnologie sono combinate assieme per fornire ad atleti e spettatori una visione a 360 gradi dell'evento, con una prospettiva mai vista fino ad ora. Le prime dimostrazioni delle potenzialità di questo sistema sono state messe a disposizione della Maratona di Torino gia' dall'edizione 2011.
Una peculiarità è la potenziale versatilità di tale sistema e la sua applicabilità a diversi scenari sportivi. Altri sport infatti potrebbero trarre vantaggio da queste tecnologie, quali il ciclismo, l'arrampicata sportiva e lo sci.
Il talk illustrerà l'architettura e i componenti del sistema, e come sia stato possibile rendere accessibili al grande pubblico tecnologie fino ad ora limitate all'ambito di ricerca.
Maggiori informazioni sul progetto al sito http://ict-skymedia.eu/skymedia/
This talk aims to showcase some less-know CSS techniques in order to achieve visually interesting results or to unlock CSS hidden capabilities. The talk is organized in chapters, each of them focused on a specific technique exposed with a brief overview and then implemented with a live demo, or with live coding where time permits.
HTML5 CI SIAMO!
6 demo in 30 minuti ricchi di azione! Una panoramica di impatto sugli aspetti più divertenti della specifica, tutti da mettere in pratica
How create a single page apps using html5 and javascript Stefano Marchisio
Create a html5/javascript apps with mvc/ajax using knockout.js/mvvm. Javascript to IQueryable is a framework that allows you to write a simple query in javascript client side and then execute it server side with EntityFramework or a linq provider that implement IQueryable. On the server is used "Dynamic Expressions and Queries in LINQ by Microsoft" to compose dynamically your query. In this way you can create a grid with filter, paging and sort functions. There is also support for: mvc3 unobtrusive jquery validation and jquery mobile/phonegap. - http://Javascriptiqueryable.codeplex.com - http://www.youtube.com/watch?v=qjwyKwsXHKs - http://www.linqitalia.com/articoli/entity-framework/sfruttare-javascript-eseguire-query-linq-server-tramite-dynamic-iqueryable.aspx
Una semplice guida che spiega come installare e utilizzare il software open-source Cacti per la gestione della rete.
A simple guide on how to install and use the software open-source Cacti for network management.
SkyMedia: La tecnologia al servizio dell'intrattenimentoMavigex srl
Mavigex parla al #WhyMCA 2012 e presenta l'architettura del sistema #SkyMedia.
Un gruppo di aziende provenienti da tutta Europa sta mettendo a punto un sistema tecnologicamente innovativo per dare una marcia in più agli eventi sportivi, combinando tecnologie all'avanguardia come droni volanti, schermi immateriali, telecamere 3D, applicazioni mobili per iPhone iPad e Android e tracciamento delle prestazioni degli atleti in tempo reale.
Tutte queste tecnologie sono combinate assieme per fornire ad atleti e spettatori una visione a 360 gradi dell'evento, con una prospettiva mai vista fino ad ora. Le prime dimostrazioni delle potenzialità di questo sistema sono state messe a disposizione della Maratona di Torino gia' dall'edizione 2011.
Una peculiarità è la potenziale versatilità di tale sistema e la sua applicabilità a diversi scenari sportivi. Altri sport infatti potrebbero trarre vantaggio da queste tecnologie, quali il ciclismo, l'arrampicata sportiva e lo sci.
Il talk illustrerà l'architettura e i componenti del sistema, e come sia stato possibile rendere accessibili al grande pubblico tecnologie fino ad ora limitate all'ambito di ricerca.
Maggiori informazioni sul progetto al sito http://ict-skymedia.eu/skymedia/
by Davide Cerbo e Stefano Linguerri
La programmazione web sta facendo passi da gigante e oggi l’utente si aspetta che l’esperienza di utilizzo si avvicini sempre di più a quella a cui è abituato nei classici applicativi desktop. Il mondo degli sviluppatori ha risposto inventanto una nuova sigla: RIA, cioè Rich Internet Application. Google non è stata a guardare e ha fornito la sua risposta a questa esigenza donando alla community Google Web Toolkit. Questo nuovo framework permette di sviluppare in Java tutta l’interfaccia utente per poi ottenere un codice javascript che funzionerà su qualsiasi browser web senza l’installazione di plugin aggiuntivi. In questa presentazione vedremo:
* perchè sviluppare applicazioni RIA
* perchè usare GWT
* come GWT utilizza AJAX per comunicare con il server
* le ottimizzazione che avremo utilizzando GWT
* come uscire dal browser con Google Gear e Mozilla Prism
* e non solo…
Allo sviluppatore Azure piacciono i servizi PaaS perchè sono "pronti all'uso". Ma quando proponiamo le nostre soluzioni alle aziende, ci scontriamo con l'IT che apprezza gli elementi infrastrutturali, IaaS. Perchè non (ri)scoprirli aggiungendo anche un pizzico di Hybrid che con il recente Azure Kubernetes Services Edge Essentials si può anche usare in un hardware che si può tenere anche in casa? Quindi scopriremo in questa sessione, tra gli altri, le VNET, le VPN S2S, Azure Arc, i Private Endpoints, e AKS EE.
-- Andrea Piovani -- Realtà aumentata nel Mobile - Pane Web & Salame Fabrizio Martire
La presentazione di Andrea Piovani (twitter.com/andreaaa_p) portata a panewebesalame.com
"Realtà aumentata nel Mobile Cos’è, come funziona e...come crearvi il vostro layer
Andrea Piovani - IT Web&Mobile Developer"
Asp.NET MVC è un nuovo framework per lo sviluppo di applicazioni web alternativo al modello webform. Questo consente di utilizzare il pattern MVC per lo sviluppo di applicazioni Asp.NET, permettendo quindi una miglior separazione delle responsabilità che a sua volta porta ad una maggior manutenibilità, riusabilità e facilità nel testing.
La sessione illustrerà i motivi che hanno portato alla nascita di Asp.NET MVC e le sue caratteristiche fondamentali.
Agenda:
- Storia dei framework MS per lo sviluppo web
- Introduzione a Asp.NET MVC
- Vantaggi di Asp.NET MVC
- Il pattern MVC
- Hello MVC: DEMO
- Componenti di MVC: Routing, Controller, Model, View
Sempre più di frequente sentiamo parlare di nuove librerie, framework o linguaggi. Tutte queste nuove tecnologie promettono miracoli ma il nostro tempo è una risorsa finita e non abbiamo il lusso di poter approfondire ogni novità.
Le PWA si basano su tecnologie che già usiamo tutti i giorni nello sviluppo WEB quindi, senza farci intimidire, possiamo approcciare qualcosa che effettivamente rivoluzioni il nostro lavoro e che possa farlo con il minimo sforzo da parte nostra.
More Related Content
Similar to WebRTC prove pratiche, esperimenti e curiosità
by Davide Cerbo e Stefano Linguerri
La programmazione web sta facendo passi da gigante e oggi l’utente si aspetta che l’esperienza di utilizzo si avvicini sempre di più a quella a cui è abituato nei classici applicativi desktop. Il mondo degli sviluppatori ha risposto inventanto una nuova sigla: RIA, cioè Rich Internet Application. Google non è stata a guardare e ha fornito la sua risposta a questa esigenza donando alla community Google Web Toolkit. Questo nuovo framework permette di sviluppare in Java tutta l’interfaccia utente per poi ottenere un codice javascript che funzionerà su qualsiasi browser web senza l’installazione di plugin aggiuntivi. In questa presentazione vedremo:
* perchè sviluppare applicazioni RIA
* perchè usare GWT
* come GWT utilizza AJAX per comunicare con il server
* le ottimizzazione che avremo utilizzando GWT
* come uscire dal browser con Google Gear e Mozilla Prism
* e non solo…
Allo sviluppatore Azure piacciono i servizi PaaS perchè sono "pronti all'uso". Ma quando proponiamo le nostre soluzioni alle aziende, ci scontriamo con l'IT che apprezza gli elementi infrastrutturali, IaaS. Perchè non (ri)scoprirli aggiungendo anche un pizzico di Hybrid che con il recente Azure Kubernetes Services Edge Essentials si può anche usare in un hardware che si può tenere anche in casa? Quindi scopriremo in questa sessione, tra gli altri, le VNET, le VPN S2S, Azure Arc, i Private Endpoints, e AKS EE.
-- Andrea Piovani -- Realtà aumentata nel Mobile - Pane Web & Salame Fabrizio Martire
La presentazione di Andrea Piovani (twitter.com/andreaaa_p) portata a panewebesalame.com
"Realtà aumentata nel Mobile Cos’è, come funziona e...come crearvi il vostro layer
Andrea Piovani - IT Web&Mobile Developer"
Asp.NET MVC è un nuovo framework per lo sviluppo di applicazioni web alternativo al modello webform. Questo consente di utilizzare il pattern MVC per lo sviluppo di applicazioni Asp.NET, permettendo quindi una miglior separazione delle responsabilità che a sua volta porta ad una maggior manutenibilità, riusabilità e facilità nel testing.
La sessione illustrerà i motivi che hanno portato alla nascita di Asp.NET MVC e le sue caratteristiche fondamentali.
Agenda:
- Storia dei framework MS per lo sviluppo web
- Introduzione a Asp.NET MVC
- Vantaggi di Asp.NET MVC
- Il pattern MVC
- Hello MVC: DEMO
- Componenti di MVC: Routing, Controller, Model, View
Sempre più di frequente sentiamo parlare di nuove librerie, framework o linguaggi. Tutte queste nuove tecnologie promettono miracoli ma il nostro tempo è una risorsa finita e non abbiamo il lusso di poter approfondire ogni novità.
Le PWA si basano su tecnologie che già usiamo tutti i giorni nello sviluppo WEB quindi, senza farci intimidire, possiamo approcciare qualcosa che effettivamente rivoluzioni il nostro lavoro e che possa farlo con il minimo sforzo da parte nostra.
Similar to WebRTC prove pratiche, esperimenti e curiosità (20)
9. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
var context = new webkitAudioContext(),
analyser = context.createAnalyser(),
video = document.querySelector('video'),
canvas = document.querySelector('canvas'),
ccontext = canvas.getContext('2d');
navigator.getUserMedia( {'audio':true, 'video':true},
function(stream) {
video.src = URL.createObjectURL(stream);
var source = context.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(context.destination);
analyze();
}
);
10. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
function analyze(){
window.webkitRequestAnimationFrame(analyze);
var freqByteData =
new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
ccontext.clearRect(0,0,200,100);
for(var x=0; x < 10; x++){
ccontext.fillRect(x *20, 100,
20, -freqByteData[x * 100]);
}
}
11. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
Chat? VideoChat!
12. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
MIC CAM CAM MIC
ME YOU
WS
13. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
MIC CAM CAM MIC
ME YOU
SD
P D P
S
WS
15. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
MIC CAM CAM MIC
ME YOU
SD
P D P
S
WS
16. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
MIC CAM CAM MIC
ME YOU
ICE
C E
I
WS
17. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
MIC CAM CAM MIC
ME
CAM e MIC YOU
TRY
18. function inizializza_video() {
WebRTC prove pratiche, esperimenti e curiosità
navigator.getUserMedia( {'audio':true, 'video':true},
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
function(stream) {
video_locale.src = URL.createObjectURL(stream);
peer = new RTCPeerConnection(peer_config);
peer.onicecandidate = onIceCandidate;
peer.onaddstream = function(event){
video_remoto.src =
URL.createObjectURL(event.stream);
};
peer.addStream(stream);
if (chiamante)
peer.createOffer(sdpcreato,
null, mediaConstraints);
}
);
}
19. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
// --- invio l'SDP al peer ---
function sdpcreato(sdp) {
peer.setLocalDescription(sdp);
messaggio_da_inviare(sdp);
}
// --- invio il candidato ICE al peer ---
function onIceCandidate(event) {
if (event.candidate) {
messaggio_da_inviare(event.candidate);
}
}
20. // --- invio messaggi al websocket --- curiosità
WebRTC prove pratiche, esperimenti e
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
function messaggio_da_inviare(msg) {
var msgjson = JSON.stringify(msg);
ws.send("m:"+ stanza + ":" + chiamante + ":" +
msgjson);
}
// --- ricezione messaggi dal websocket ---
ws.addEventListener('message', function(evt){
var msg = evt.data;
if(parseInt(msg.substr(0,1),10) !== chiamante){
processa(msg.substr(2));
}
});
21. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
function processa(messaggio) {
var msg = JSON.parse(messaggio);
if (msg.type === 'offer') {
peer.setRemoteDescription(
new RTCSessionDescription(msg));
peer.createAnswer(sdpcreato,
null, mediaConstraints);
} else if (msg.type === 'answer') {
peer.setRemoteDescription(
new RTCSessionDescription(msg));
} else {
var candidate = new RTCIceCandidate(msg);
peer.addIceCandidate(candidate);
}
}
22. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
Tanto tempo fa, in una
galassia lontana
lontana...
23. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
PEER
VIDEO CANVAS
CAM
24. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
WebRTC + ccv.js
TRY
25. WebRTC prove pratiche, esperimenti e curiosità
Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web
CANVAS
PEER
VIDEO
CAM CANVAS