Stap 6: Extern beheren met behulp van jQuery UI Webcam
(Belangrijk! U moet vervangen door YOUR_NAMESPACE en YOUR_PRIVATE_KEY in de volgende code die aan u zijn toegewezen wanneer u op SensorMonkey inlogt. U zult ook moeten YOUR_CHANNEL vervangen door de naam van je kanaal Justin.tv)
--------------------------------------------------------------------------------
<! Html DOCTYPE >
< html >
< head >
< titel > Remote controlled webcam met behulp van de Arduino, SensorMonkey, jQuery en Justin.tv < / title >
< link rel = "stylesheet" type = "text/css" href = "jquery-ui-1.8.21.custom.css" / >
< stijl type = "text/css" >
lichaam {}
padding: 10px;
}
#container {}
margin-bottom: 20px;
}
#webcam {}
float: links;
hoogte: 240px;
marge-rechts: 20px;
breedte: 320px;
}
#tilt-schuifregelaar {}
float: links;
hoogte: 240px;
marge-rechts: 10px;
}
tilt-display # {}
hoogte: 240px;
regelafstand: 240px;
}
#pan-schuifregelaar {}
margin-bottom: 10px;
breedte: 320px;
}
pan-display # {}
text-align: Midden;
breedte: 320px;
}
.Rotation {}
kleur: #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 >
< body >
< div id = "container" >
< div id = "webcam" >
< Objecttype = "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 = "film" value = "http://www.justin.tv/widgets/live_embed_player.swf" / >
< param name = "flashvars" value = "hostname = www.justin.tv & kanaal =YOUR_CHANNEL& auto_play = true & start_volume = 25" / >
< / object >
< / div >
< div id = "tilt-slider" >< / div >
< div id = "tilt-display" > kantelen: < span klasse "rotation" = > 96 < / span >< / div >
< / div >
< div id = "pan-slider" >< / div >
< div id = "pan-display" > Pan: < span klasse "rotation" = > 96 < / span >< / div >
< script type = "text/javascript" >
Een geheel getal (of een tekenreeksweergave van een) omgezet in een hexadecimaal teken (0-9A-F).
functie toHex (i) {}
keren parseInt (i) .toString (16) de .toUpperCase();
}
$(function {}
Tilt slider maken
$("#tilt-slider") .slider ({}
bereik: "min",
geaardheid: "vertical",
waarde: 8,
min: 0,
Max: 15,
stap: 1,
dia: function (gebeurtenis, ui) {}
UI update.
$("#tilt-display .rotation") .html (180 * ui.value / 15);
Berekenen gecombineerd pan/tilt rotatiehoeken en verzenden van de stream Uitgever
Als een hexadecimaal teken paar. Pan is hoog 4 bits; Tilt is lage 4 bits. Door
voorvoegsel met '#', vertellen we SensorMonkey te interpreteren als binaire gegevens.
var pan = toHex ($("#pan-slider") .slider ("waarde"));
var tilt = toHex (ui.value);
client.deliverToStreamPublisher ("/ private/mijn Webcam", "#" + pan tilt);
}
} );
Pan slider maken
$("#pan-slider") .slider ({}
bereik: "min",
waarde: 8,
min: 0,
Max: 15,
stap: 1,
dia: function (gebeurtenis, ui) {}
UI update.
$("pan-display # .rotation") .html (180 * ui.value / 15);
Berekenen gecombineerd pan/tilt rotatiehoeken en verzenden van de stream Uitgever
Als een hexadecimaal teken paar. Pan is hoog 4 bits; Tilt is lage 4 bits. Door
voorvoegsel met '#', vertellen we SensorMonkey te interpreteren als binaire gegevens.
var pan = toHex (ui.value);
var tilt = toHex ($("#tilt-slider") .slider ("waarde"));
client.deliverToStreamPublisher ("/ private/mijn Webcam", "#" + pan tilt);
}
} );
// 1. Verbinden met SensorMonkey
// 2. Lid worden van de naamruimte
// 3. Abonneer je op stroom
var client = nieuwe SensorMonkey.Client ("https://sensormonkey.eeng.nuim.ie");
client.on ("verbinden", function {}
client.joinNamespace ("YOUR_NAMESPACE", "YOUR_PRIVATE_KEY", functie (e) {}
Als (e) {}
alert ("Failed to join naamruimte:" + e);
terugkeer;
}
client.subscribeToStream ("/ private/mijn Webcam", functioneren (e) {}
Als (e) {}
alert ("abonneren op stream mislukt:" + e);
terugkeer;
}
} );
} );
client.on ("verbinding verbreken", function {}
alert ("Client is verbroken!");
} );
} );
} );
< / script >
< / body >
< / html >
--------------------------------------------------------------------------------
De code in het < object >< / object > tags wordt gebruikt om de live stream van de Justin.tv in de webpagina insluiten. U moet vervangen door de YOUR_CHANNEL in de code tussen deze tags met de naam van je kanaal. De gegevensstroom niet weergegeven op iOS-apparaten (iPhone, iPad enz) maar werkt op Android smartphones en tablets, zoals in de foto's.
Ik gebruik van jQuery UI om een horizontale pan-schuif en een verticale tilt schuifregelaar om te bepalen van de richting van de webcam te maken. Wanneer een van de schuifregelaars wordt verplaatst naar een nieuwe positie, de code berekent een gecombineerde pan/tilt-rotatie, worden gecodeerd als een hexadecimaal teken paar (zoals beschreven in stap 2 en stap 4) en stuurt het via SensorMonkey naar de Arduino beheersing van de servomotoren.
Tot slot, de workflow voor het verbinden van SensorMonkey is zeer eenvoudig (Vergeet niet ter vervanging van YOUR_NAMESPACE en YOUR_PRIVATE_KEY in de code hierboven):
-Import client
-Sluit aan op SensorMonkey
-Lid van de naamruimte
-Abonneren op stroom
Eenmaal geabonneerd, kan ik gewoon bellen client.deliverToStreamPublisher() om gegevens te verzenden direct aan de Arduino via de SensorMonkey service.
Thats it! Ik kan nu mijn webcam in real-time met behulp van een combinatie van Arduino, SensorMonkey, jQuery en Justin.tv op afstand beheren. Ik kan uploaden van de webpagina naar een publieke webserver en het toegang tot van overal op elk apparaat met een HTML5/Flash compatibele web-browser. Zie de volgende stap voor suggesties over de verbetering van de uitvoering beschreven tot nu toe.
