Web-kameran kuva verkkoon
Web-kameran kuvan saaminen esim. kotisivulleen näkyviin on paljon helpompaa kuin voisi luulla. Tässä ohjeessa Linux-kone ottaa kuvan ja lähettää sen FTP:llä jollekin www-palvelimelle. Mukana on myös html, css ja js-tiedostot palvelimelle kuvan näyttämistä ja automaattista päivittämistä varten. Homma sujuu näin:
Ohjeet
- laita web-kamerasi käyttökuntoon
- asenna camE. Löytynee jakeluversiosi pakettivarastoista tms tai kotisivuilta lähdekoodimuodossa.
- kopioi alla esitetty .camErc -asetustiedosto kotikansioosi ja muokkaa sen asetukset sopiviksi itsellesi kommenttien opastamalla tavalla
- luo palvelimelle kansio johon kuva tullaan julkaisemaan, esimerkiksi nimellä cam
- luo palvelimelle ftp-tunnus camEa varten
- kopioi index.html, cam.js sekä style.css palvelimen cam-kansioon
- käynnistä camE komennolla camE. Se menee taustalle ja täytyy lopettaa tappamalla prosessi. Jos et halua sen menevän taustalle, käynnistä komennolla camE -f
.camErc -asetustiedosto
Kopioi tämä tiedostoksi .camErc kotikansioosi
#nämä asetukset ottavat kuvan kerran sekunnissa, lähettävät sen ftp:llä palvelimelle kansioon cam sekä tallentaa joka 100. kuvan paikallisen koneen kansioon /var/www/cam/archive [ftp] host = ftp.domain.fi user = kamera pass = salasana dir = cam # where should the file end up? Also, this extension determines the file # type the image is saved as. Try image.png for a png. file = webcam.jpg # camE uploads to a temp file, and moves it across when done # this way people don't view half-uploaded images tmp = uploading.jpg # keep the connection open (1) or reopen it for each shot (0) keepalive = 0 # do passive ftp? passive = 0 #an interface to use for non-passive ftp. use "-" to let libcurl choose, or #use a real interface name. (libcurl often chooses incorrectly) interface = - # ftp debugging? (noisy) debug = 1 # Actually do the upload? If do = 0, just take and archive pics. do = 1 # Some servers require us to explicitly delete the previous image # In that case, enable this option delete_first = 0 # Determines how many shots are taken before an image is uploaded. # (1 == every picture is uploaded, 10 would be every 10th image) # (Defaults to 1 if not present) upload_every = 1 [scp] # you can set ftp->do to 0 above and use scp instead - you still need # the dir, file and tmp settings in the ftp section for this to work. # scp also honors the upload_every setting from the ftp section, and # will also default to a value of 1 if not present. #target = user@ssh.domain.fi [grab] device = /dev/video0 # store temp image on local machine temp_file = /tmp/webcam.jpg # lag reduction, takes 5 shots, discards the first 4, thus clearing mmap # buffers lag_reduce = 5 # This goes at the bottom left, with the message from "infofile" appended. # It is run through strftime, so date vars are expanded. text = %d/%m/%Y %H:%M:%S %Z width = 352 height = 288 # delay between uploading one shot and starting the next delay = 2 # do we want to correct the delay for a slow connect? # (keeps the perpetually updating clients in sync) correct = 1 # scale image resolution dynamically based on bandwidth? # percentage of the delay to spend uploading the image, # 100 disables, useful values are < 40 percent = 100 # where to log activity. comment out this line to disable logging logfile = /home/user/Temp/.camlog # gets the message text from here. one line allowed only. means you can do # stuff like echo "sleeping and stuff" > ~/.caminfo #infofile = /home/user/.caminfo # directory to archive pics in. They are datestamped and saved in here. archive = /var/www/cam/archive # archive pics in datestamped subdirs # (1 == with subdirs, 0 == without subdirs) archive_subdirs = 0 # extension (determines type) of archived images. archive_ext = jpg # determines how many shots are taken before a pic is archived # (1 == every pic, 0 == don't archive) archive_shot_every = 100 # create archive thumbnails enable/disable flag and give width/height archive_thumbnails_dir = /opt/images/webcam/thumbnails archive_thumbnails_create = 0 archive_thumbnails_width = 120 archive_thumbnails_height = 90 # jpeg quality (you can save as png etc too, but then quality does squat) quality = 85 input = 0 # 0 for PAL, 1 for NTSC norm = 0 # Goes in the top right. strftime() is run on this too, so put date stuff in # if you like title_text = Weppikamera # color/transparency of title text title_r = 255 title_g = 255 title_b = 0 title_a = 255 # font for title text. fontname/size title_font = arial/8 # fancy font styles # title_style = /path/to/title.style # color/transparency of message text text_r = 255 text_g = 255 text_b = 0 text_a = 255 # font for message text. fontname/size text_font = arial/8 # fancy font styles # text_style = /path/to/text.style # color/transparency of rectangle behind text # make it 0,0,0,0 to disable. bg_a = 0 bg_b = 0 bg_g = 0 bg_a = 100 # directory to look for ttf fonts in ttf_dir = /usr/share/fonts/truetype/msttcorefonts # file to check for before shooting. while this file exists, no shots will be taken. blockfile = /home/user/BLOCKCAM # image to upload when blockfile is first put in place # offline_image = /home/gilbertt/.block.jpg # File to check before shotting, while this file exists, shots will be taken. # but not uploaded. blockimage will not be uploaded if you set this. uploadblockfile = /home/user/BLOCKUPLOAD # Shots will only be taken/uploaded if the specified interface is active. #watch_interface = ppp0 # image to overlay overlay_image = /home/user/.lb.png overlay_x = 5 overlay_y = 5 # do things. like play sounds or whatever. Each is a shell command. #action_pre_shot #action_post_shot #action_post_upload # image processing # crop = 1 # crop_width = 320 # crop_height = 240 # crop_x = 20 # crop_y = 20 # # scaling is applied after cropping, so you can # remove borders then stretch up the result # scale = 1 # scale_width = 640 # scale_height = 480 # # Flip the image horizontally or vertically. # Horizontal flipping is useful for some Philips cams # which give a mirrored image when used with the pwc module. # flip_horizontal = 1 # flip_vertical = 1 # # Change the orientation of the image. # Useful if your camera is on its side (for whatever reason). # 1 rotates clockwise by 90 degrees, 2, rotates clockwise by 180 degrees, # 3 rotates clockwise by 270 degrees. # orientation = 1; ######################################################## # PWC specific features (only for philps cams right now) # framerate of cam capture, lower fps -> less grainy image, more chance or # blurred motion framerate = 5 # image settings (0-100) colour = 50 brightness = 50 contrast = 50 hue = 50 whiteness = 50 # White balance mode # can be "auto", "indoor", "outdoor", "fluorescent" or "manual" pwc_wb_mode = auto # if _mode is set to manual, these two controls affect the balance # (0-100) pwc_wb_red = 50 pwc_wb_blue = 50 ########################################################
index.html
Kopioi tämä tiedostoksi index.html palvelimelle ylläluotuun cam-kansioon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>OmaKamera</title> <link rel="stylesheet" href="style.css"> </head> <body onload='refreshcam();'> <div id="page"> <div id="upper"> <img id="feed" src="webcam.jpg" alt="live feed" style="width:640px; height: 480;"> <p>Minun Oma Weppikamera. </p> </div> </div> </body> <script type="text/javascript" src="cam.js"></script> </html>
cam.js
Kopioi tämä tiedostoksi cam.js palvelimelle ylläluotuun cam-kansioon
var refreshrate = 2000; var ns4 = (document.layers); var ie4 = (document.all && !document.getElementById); var ie5 = (document.all && document.getElementById); var ns6 = (!document.all && document.getElementById); var loadingimage = new Image(); var e = kGetElement('feed'); function kGetElement(id) { if (ns4) return document.layers[id]; else if (ie4) return document.all[id]; else if (ie5 || ns6) return document.getElementById(id); else return false; } function loaded() { if (!e) e = kGetElement('feed'); if (e) e.src = this.src; } function refreshcam() { if (loadingimage.complete || ie4 || ie5) { var now = new Date(); loadingimage = new Image(); loadingimage.onload = loaded; loadingimage.src = 'webcam.jpg?' + now.getTime(); } setTimeout('refreshcam()', refreshrate); }
style.css
Kopioi tämä tiedostoksi style.css palvelimelle ylläluotuun cam-kansioon
body { background-color: #1e1e1e; color: #E0E0E0; text-align: center; font-family: verdana; font-size: 11px; padding: 0px; margin: 12px; } h1 { font-size: 30px; } a { color: #3551FB; text-decoration: none; background-color: transparent; } a:hover { color: #5671FC; text-decoration: underline; background-color: transparent; } #page { margin: auto; background-color: black; width: 660px; height: 570px; border: 1px solid #353535; text-align: center; } #upper { width: 800px; margin: auto; margin-top:10px; margin-left:10px; margin-right:10px; text-align: left; padding-top: 0px; }