Fjärrstyrda webkamera med Arduino, SensorMonkey, jQuery och Justin.tv (6 / 7 steg)

Steg 6: Fjärrstyra webbkamera med jQuery UI

i den sista delen av denna tutorial, jag ska kombinera direktsändningar från SensorMonkey och Justin.tv för att skapa en enkel webbsida som kan användas för att fjärrstyra min webbkamera. Jag har hämtat den senaste jQuery UI biblioteket (1.8.21 på i skrivande stund) och placerade den i samma katalog som webpage (tillsammans med tillhörande CSS och image-filer för min valda temat - UI lätthet - se skärmdump). Måste du redigera koden nedan och spara den som "Webcam.html":

(Viktigt! Du måste ersätta YOUR_NAMESPACE och YOUR_PRIVATE_KEY i koden nedan med de som har tilldelats till dig när du loggar in till SensorMonkey. Också måste du ersätta YOUR_CHANNEL med namnet på din Justin.tv kanal)

--------------------------------------------------------------------------------
<! DOCTYPE html >
< html >
< head >
< title > Remote kontrollerad webbkameran med Arduino, SensorMonkey, jQuery och Justin.tv < / title >
< länka rel = "stylesheet" type = "text/css" href = "jquery-ui-1.8.21.custom.css" / >
< style type = "text/css" >
kroppen {
padding: 10px;
}
#container {
marginal-botten: 20px;
}
#webcam {
Float: left;
höjd: 240px;
marginalen till höger: 20px;
bredd: 320px;
}
#tilt-skjutreglaget {
Float: left;
höjd: 240px;
marginalen till höger: 10px;
}
#tilt-display {
höjd: 240px;
line-height: 240px;
}
#pan-reglaget {
marginal-botten: 10px;
bredd: 320px;
}
#pan-display {
text-align: center;
bredd: 320px;
}
.rotation {
färg: #F6931F;
font-weight: bold;
}
< / stil >
< 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 >
< body >
< div id = "behållare" >
< div id = "webcam" >
< objekttyp = "application/x-shockwave-flash" data = "http://www.justin.tv/widgets/live_embed_player.swf?channel=YOUR_CHANNEL"id = "live_embed_player_flash" höjd = "240" width = "320" bgcolor = "#000000" >
< param namn = "allowFullScreen" value = "true" / >
< param namn = "allowScriptAccess" value = "alltid" / >
< param namn = "allowNetworking" value = "alla" / >
< param namn = "film" value = "http://www.justin.tv/widgets/live_embed_player.swf" / >
< param namn = "flashvars" value = "hostname = www.justin.tv & kanal =YOUR_CHANNEL& auto_play = true & start_volume = 25" / >
< / objekt >
< / div >
< div id = "tilt-skjutreglaget" >< / div >
< div id = "tilt-display" > luta: < span class = "rotation" > 96 < / span >< / div >
< / div >
< div id = "pan-reglaget" >< / div >
< div id = "pan-display" > Pan: < span class = "rotation" > 96 < / span >< / div >
< script type = "text/javascript" >
Konverterar ett heltal (eller en strängrepresentation av en) till en hexadecimal tecken (0-9A-F).
funktion toHex (i) {
returnera parseInt (i) .toString (16) .toUpperCase();
}

$(function() {
Skapa tilt slider.
$("#tilt-skjutreglaget") .slider ({
utbud: "min",
Orientering: "vertikal",
värde: 8,
min: 0,
Max: 15,
steg: 1,
bild: funktion (händelse, ui) {
Uppdatera UI.
$("#tilt-display .rotation") .html (180 * ui.value / 15);

Beräkna kombinerat pan/tilt rotation vinklar och skicka till stream förlaget
parvis hexadecimala tecken. Pan är hög 4 bitar; Tilt är låg 4 bitar. Genom
skapar prefix med '#', berättar vi SensorMonkey att tolka som binära data.
var pan = toHex ($("#pan-reglaget") .slider ("värde"));
var tilt = toHex (ui.value);
client.deliverToStreamPublisher ("/ private/min webbkamera", "#" + kastrull + tilt);
}
} );

Skapa pan slider.
$("#pan-reglaget") .slider ({
utbud: "min",
värde: 8,
min: 0,
Max: 15,
steg: 1,
bild: funktion (händelse, ui) {
Uppdatera UI.
$("#pan-display .rotation") .html (180 * ui.value / 15);

Beräkna kombinerat pan/tilt rotation vinklar och skicka till stream förlaget
parvis hexadecimala tecken. Pan är hög 4 bitar; Tilt är låg 4 bitar. Genom
skapar prefix med '#', berättar vi SensorMonkey att tolka som binära data.
var pan = toHex (ui.value);
var tilt = toHex ($("#tilt-skjutreglaget") .slider ("värde"));
client.deliverToStreamPublisher ("/ private/min webbkamera", "#" + kastrull + tilt);
}
} );

// 1. Ansluta till SensorMonkey
// 2. Gå med i namnområdet
// 3. Prenumerera på ström

var kund = nya SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie");
client.on ("connect", function() {
client.joinNamespace ("YOUR_NAMESPACE", "YOUR_PRIVATE_KEY", funktion (e) {
om (e) {
Alert ("kunde inte ansluta namnområde:" + e);
hemkomst.
}

client.subscribeToStream ("/ private/min webbkamera", fungera (e) {
om (e) {
Alert ("Det gick inte att prenumerera på ström:" + e);
hemkomst.
}
} );
} );

client.on ("koppla", function() {
Alert ("klienten har kopplats!");
} );
} );
} );
< / script >
< / body >
< / html >
--------------------------------------------------------------------------------

Koden i objektet < >< / objekt > Taggar används för att bädda in Justin.tv direktuppspelningen till webbsidan. Måste du ersätta varje förekomst av YOUR_CHANNEL i koden mellan dessa taggar med namnet på din kanal. Strömmen kommer inte att visas på iOS-enheter (iPhone, iPad etc.) men kommer att fungera på Android smartphones och tabletter, som visas i bilderna.

Jag använder jQuery UI för att skapa en övergripande pan-reglaget och en vertikal tilt skjutreglaget för att styra inriktningen på webbkameran. När en av reglagen flyttas till en ny position, koden beräknas en kombinerad pan/tilt rotation, kodar den parvis hexadecimala tecken (som beskrivs i steg 2 och steg 4) och skickar det genom SensorMonkey till Arduino kontroll av servomotorer.

Slutligen i arbetsflödet för att ansluta till SensorMonkey är mycket enkel (Glöm inte att ersätta YOUR_NAMESPACE och YOUR_PRIVATE_KEY i koden ovan):

-Import-klient
-Anslut till SensorMonkey
-Gå med namnområde
-Prenumerera på ström

När prenumererar, kan jag helt enkelt anropa client.deliverToStreamPublisher() för att skicka data direkt till Arduino via tjänsten SensorMonkey.

Det är det! Jag kan nu fjärrstyra min webbkamera i realtid med en kombination av Arduino, SensorMonkey, jQuery och Justin.tv. Jag kan ladda upp webbsidan till en offentlig webbserver och komma åt den från någonstans på någon apparat med en HTML5/blixt kompatibel webbläsare. Se nästa steg för förslag om att förbättra genomförandet beskrivits hittills.