【转】Webcam Manipulation with Javascript

Joson_Coney

浏览: 57211 次
性别:
来自: 广州

最近访客更多访客>>

ping7603

zishan

流水光阴

slee4444

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web开发

（ From：http://blog.trumpton.org.uk/2009/02/webcam-manipulation-with-javascript.html )

I purchased an IcamView web server, and megapixel webcam, which I have waterproofed, and placed in the garden.

The IcamView web server has a low power processor, and is unable to manipulate the images at all. When you use the ActiveX or Java video viewer, the viewer manipulates the image for you (on the client PC).

If you access still frames, you have no such tool, and the frames come straight from the camera, warts and all. The most obvious issue is when images are flipped by the camera, and it expects the software to flip the images back.

I have created a Javascript file (webcam.js), which can post-process images from webcams. It is intended for people who don't know or want to know how to perform any Javascript programming.

Adding the Code in your HTML File

All you need to do is use your favorite web editor, and include the Javascript, a webcam tag, and a normal img tag for backwards comatibility with non-Javascript capable browsers.

<script language="javascript" src="webcam.js"></script>

<webcam src="http://www.trumpton.org.uk/webcam/garden0.jpg"
graceful="yes" errsrc="http://www.trumpton.org.uk/webcam/offline-320x200.jpg" alt="Tomy Cam" showdate="yes" bgc="black" fgc="white" refresh="310" />

<noscript><img class="webcam" src='http://www.trumpton.org.uk/webcam/garden0.jpg' alt="Tomy Cam" /></noscript>

The Code all belongs in the <body> section of the web page.

The <script> tag loads the Javascript file.
The <webcam> tag is interpreted by the script, and loads / edits the image.
The <noscript> tag is ignored by browsers that can process Javascript, and handled by any other ones - the images displayed on these browsers will not be flipped / rotated or labelled.

More Information

More information, including the source code, can be found here.

分享到：

mongodb BinData | GTK+ 中文显示解决方案

2011-10-15 06:04
浏览 804
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论