Étape 6: Contrôle à distance Webcam à l’aide de jQuery UI
(Important ! Vous devez remplacer YOUR_NAMESPACE et YOUR_PRIVATE_KEY dans le code ci-dessous avec ceux qui vous sont affectées lorsque vous vous connectez à SensorMonkey. Vous devrez également remplacer YOUR_CHANNEL par le nom de votre canal de Justin.tv)
--------------------------------------------------------------------------------
< ! DOCTYPE html >
< html >
< tête >
< titre > Remote controlled webcam en utilisant Arduino, SensorMonkey, jQuery et Justin.tv < /title >
< link rel = « stylesheet » type = « text/css » href = « jquery-ui-1.8.21.custom.css » / >
< style type = « text/css » >
{corps
padding : 10px ;
}
#container {}
marge-bas : 20px ;
}
{#webcam}
float : left ;
hauteur : 240px ;
marge de droite : 20px ;
Largeur : 320px ;
}
{#tilt-slider
float : left ;
hauteur : 240px ;
marge-right : 10px ;
}
{#tilt-affichage
hauteur : 240px ;
line-height : 240px ;
}
{#pan-slider
marge-bottom : 10px ;
Largeur : 320px ;
}
{#pan-affichage
text-align : center ;
Largeur : 320px ;
}
.rotation {}
couleur : #F6931F ;
font-weight : bold ;
}
< / style >
< script type = « text/javascript » src = « jquery-1.7.2.min.js » >< / script >
< script type = « text/javascript » src = « jquery-ui-1.8.21.custom.min.js » >< / script >
< script type = « text/javascript » src = « https://sensormonkey.eeng.nuim.ie/socket.io/socket.io.js » >< / script >
< script type = « text/javascript » src = « https://sensormonkey.eeng.nuim.ie/js/client.min.js » >< / script >
< / head >
< corps >
< div id = « conteneur » >
< div id = « webcam » >
< type d’objet = « application/x-shockwave-flash » data = "http://www.justin.tv/widgets/live_embed_player.swf?channel=YOUR_CHANNEL"id = "live_embed_player_flash" height = "240" width = "320" bgcolor = "#000000" >
< param name = « allowFullScreen » value = « true » / >
< param name = « allowScriptAccess » value = « always » / >
< param name = « allowNetworking » value = « all » / >
< param name = « movie » value = « http://www.justin.tv/widgets/live_embed_player.swf » / >
< param name = « flashvars » value = "nom d’hôte = www.justin.tv & channel =YOUR_CHANNEL& auto_play = true & start_volume = 25" / >
< / objet >
< / div >
< div id = « tilt-slider » >< / div >
< div id = « tilt-affichage » > incliner : < span class = « rotation » > 96 < /span >< / div >
< / div >
< div id = « pan-slider » >< / div >
< div id = « pan-affichage » > Pan : < span class = « rotation » > 96 < /span >< / div >
< script type = « text/javascript » >
Convertit un entier (ou une représentation de chaîne d’un) un caractère hexadécimal (0-9 a-F).
function toHex (i) {}
Retour à parseInt (i) .toString (16) .toUpperCase() ;
}
$(function() {}
Créer le curseur d’inclinaison.
$("#tilt-slider") .slider ({
gamme: « min »,
orientation: « verticale »,
valeur: 8,
min: 0,
Max : 15,
étape: 1,
diapositive : function (event, ui) {}
Mettre à jour l’interface utilisateur.
$("#tilt-affichage .rotation") .html (180 * ui.value / 15) ;
Calculer combinée des angles de rotation pan/tilt et envoyer à l’éditeur de flux de données
comme une paire de caractères hexadécimaux. Pan est élevés 4 bits ; Tilt est 4 bits de poids faible. Par
préfixant par « # », nous disons SensorMonkey à interpréter comme des données binaires.
pan de var = toHex ($("#pan-slider") .slider ("valeur")) ;
tilt var = toHex (ui.value) ;
client.deliverToStreamPublisher ("/ private/ma Webcam", « # » + pan + tilt) ;
}
} );
Créer pan slider.
$("#pan-slider") .slider ({
gamme: « min »,
valeur: 8,
min: 0,
Max : 15,
étape: 1,
diapositive : function (event, ui) {}
Mettre à jour l’interface utilisateur.
$("#pan-affichage .rotation") .html (180 * ui.value / 15) ;
Calculer combinée des angles de rotation pan/tilt et envoyer à l’éditeur de flux de données
comme une paire de caractères hexadécimaux. Pan est élevés 4 bits ; Tilt est 4 bits de poids faible. Par
préfixant par « # », nous disons SensorMonkey à interpréter comme des données binaires.
pan de var = toHex (ui.value) ;
tilt var = toHex ($("#tilt-slider") .slider ("valeur")) ;
client.deliverToStreamPublisher ("/ private/ma Webcam", « # » + pan + tilt) ;
}
} );
// 1. Se connecter à SensorMonkey
// 2. Rejoignez l’espace de noms
// 3. S’abonner au flux de données
var client = new SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie") ;
client.on ("se connecter", function() {}
client.joinNamespace ("YOUR_NAMESPACE", "YOUR_PRIVATE_KEY", function (e) {}
Si (e) {}
Alert ("Impossible de rejoindre l’espace de noms:" + e) ;
retour ;
}
client.subscribeToStream ("/ private/ma Webcam", function (e) {}
Si (e) {}
Alert ("n’a pas pu s’abonner au flux de données:" + e) ;
retour ;
}
} );
} );
client.on ("déconnecter", function() {}
Alert ("Client a été déconnecté!") ;
} );
} );
} );
< /script >
< / body >
< / html >
--------------------------------------------------------------------------------
Le code à l’intérieur de l’objet < >< / object > tags est utilisé pour intégrer le flux live de Justin.tv dans la page Web. Vous devrez remplacer chaque instance YOUR_CHANNEL dans le code entre ces balises avec le nom de votre channel. Le flux ne s’affiche pas sur les appareils iOS (iPhone, iPad etc.), mais fonctionne sur Android smartphones et tablettes, comme le montre les photos.
J’utilise jQuery UI pour créer un curseur horizontal pan et un curseur d’inclinaison verticale pour contrôler l’orientation de la webcam. Lorsque l’un des curseurs est déplacé vers une nouvelle position, le code calcule une rotation panoramique/inclinaison combinée, il encode comme une paire de caractères hexadécimaux (comme décrit aux étapes 2 et 4 de l’étape) et envoie par l’intermédiaire de SensorMonkey à l’Arduino contrôlant les servo-moteurs.
Enfin, le flux de travail pour se connecter à SensorMonkey est très simple (n’oubliez pas de remplacer YOUR_NAMESPACE et YOUR_PRIVATE_KEY dans le code ci-dessus) :
-Client import
-Se connecter à SensorMonkey
-Rejoindre l’espace de noms
-S’abonner au flux de données
Une fois abonné, je peux simplement appeler client.deliverToStreamPublisher() pour envoyer des données directement à l’Arduino via le service SensorMonkey.
C’est tout! Je peux télécommander maintenant ma webcam en temps réel en utilisant une combinaison de l’Arduino, SensorMonkey, jQuery et Justin.tv. Je peux charger la page Web sur un serveur Web public et y accéder depuis n’importe où sur n’importe quel appareil avec un navigateur compatible HTML5/Flash. Voir l’étape suivante pour obtenir des suggestions sur l’amélioration de la mise en œuvre décrit jusqu'à présent.
