Chrome浏览器调用摄像头拍照

图书馆一角

昨天初步学习了怎么用 JavaScript 调用用户的摄像头。参考 David Walsh 大神的入门教程，基于他的示例，写了一个可以拍摄和下载照片的页面。欢迎访问作者博客-胡作菲为

拍照去

这个版本的暂时只能在 Google Chrome 里面比较正常地运行，时不时地出现摄像头无法启动的情况，要刷新几次页面才行。Opera 里面也能拍摄，但是视频画面的高度和照片的高度不等，导致照片模糊。总之这还是一个试验品，未来给它加上一些滤镜功能就更好玩了。

我的版本里面运用了 Application Cache，不联网的时候也能用。如果你有兴趣在第一时间使用到最新的功能，请收藏拍照页面。

原理简述

通过 navigator.getUserMedia() 方法调用摄像头。页面左边是一个 video，播放当前摄像头拍摄的实时图像；右边是一个 canvas，把拍摄的照片绘制在画布（canvas）上。

如果你的浏览器支持 navigator.getUserMedia ，那么在打开页面时，浏览器会询问是否允许网页使用你的摄像头，选择 “允许”。摄像头会自动启动，网页上应该会出现摄像头在拍摄的画面。点击 “拍照”，右边的 canvas 上就会把这一时刻的画面绘制出来。照片不就是对瞬间影像的捕捉吗？这时，点击照片下方的 “下载照片”，浏览器会弹出对话框，让你保持一个文件，这个文件就是上面那张照片。注意：需要把保持的文件的后缀设置为 .png 格式。然后照片就保持在你的电脑上了。

题外话

联想到了前几天爆红的魔漫相机。

“摄像头” 已经成为手机应用开发商的新战场，社交、美化、娱乐等细分领域都已经出现了许多大大小小的应用。社交、美化这两个细分领域的市场已经逐渐趋近稳定，墙内用不了的 SnapChat, Instagram 已经非常成熟，墙内的啪啪、美图秀秀等也占据了大量的用户群，于是大家把目光转向了娱乐这个细分领域。

社交、美化的形式无非就那么多种，玩儿的方法却可以无穷无尽。现在是拍照自动变漫画，谁知道过几天会不会有个应用，自拍一下然后你就出现在了游戏里，又或者是录一段你们学校行政楼的视频，然后大家就可以在里面打 CS 呢？

欢迎访问作者博客-胡作菲为