图书馆一角
昨天初步学习了怎么用 JavaScript 调用用户的摄像头。参考 David Walsh 大神的入门教程,基于他的示例,写了一个可以拍摄和下载照片的页面。欢迎访问作者博客-胡作菲为
拍照去
这个版本的暂时只能在 Google Chrome 里面比较正常地运行,时不时地出现摄像头无法启动的情况,要刷新几次页面才行。Opera 里面也能拍摄,但是视频画面的高度和照片的高度不等,导致照片模糊。总之这还是一个试验品,未来给它加上一些滤镜功能就更好玩了。
我的版本里面运用了 Application Cache,不联网的时候也能用。如果你有兴趣在第一时间使用到最新的功能,请收藏拍照页面。
原理简述
通过 navigator.getUserMedia() 方法调用摄像头。页面左边是一个 video,播放当前摄像头拍摄的实时图像;右边是一个 canvas,把拍摄的照片绘制在画布(canvas)上。
如果你的浏览器支持 navigator.getUserMedia ,那么在打开页面时,浏览器会询问是否允许网页使用你的摄像头,选择 “允许”。摄像头会自动启动,网页上应该会出现摄像头在拍摄的画面。点击 “拍照”,右边的 canvas 上就会把这一时刻的画面绘制出来。照片不就是对瞬间影像的捕捉吗?这时,点击照片下方的 “下载照片”,浏览器会弹出对话框,让你保持一个文件,这个文件就是上面那张照片。注意:需要把保持的文件的后缀设置为 .png 格式。然后照片就保持在你的电脑上了。
题外话
联想到了前几天爆红的魔漫相机。
“摄像头” 已经成为手机应用开发商的新战场,社交、美化、娱乐等细分领域都已经出现了许多大大小小的应用。社交、美化这两个细分领域的市场已经逐渐趋近稳定,墙内用不了的 SnapChat, Instagram 已经非常成熟,墙内的啪啪、美图秀秀等也占据了大量的用户群,于是大家把目光转向了娱乐这个细分领域。
社交、美化的形式无非就那么多种,玩儿的方法却可以无穷无尽。现在是拍照自动变漫画,谁知道过几天会不会有个应用,自拍一下然后你就出现在了游戏里,又或者是录一段你们学校行政楼的视频,然后大家就可以在里面打 CS 呢?