【转】Webcam Manipulation with Javascript

最新推荐文章于 2021-12-10 17:18:33 发布

excpp

最新推荐文章于 2021-12-10 17:18:33 发布

阅读量147

点赞数

分类专栏： web开发文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/excpp/article/details/84047948

版权

web开发专栏收录该内容

28 篇文章 0 订阅

订阅专栏

（ 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.