JavaScript-web前端如何调用本地摄像头进行拍照?

JavaScript-web前端如何调用本地摄像头进行拍照?

夜无邪 发布于 2017-08-31 字数 100 浏览 1774 回复 6

如果纯js可以做到就更好了,js+flash实现也可以,不知道html5可否做到?
求一个功能演示的例子

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

归属感 2017-10-30 6 楼

Html5 不知是否可行。但是js肯定是不行的。flex是可以的。

晚风撩人 2017-10-25 5 楼

先明确的说一下,html5目前还是做不到的。也许正如评论中所说html6可以。
那么这个功能通过flash的方式解决还是很不错的方式,一般常见的也是通过flash来完成的,主要使用 Camera 类可从连接到运行 Flash Player 的计算机的摄像头中捕获视频,使用 getCamera() 来创建Camera对象。可以到手册上详细了解Camera类。

偏爱自由 2017-10-09 4 楼

HTML5中有 getUserMedia() 这个api来使用浏览器通过用户的设备捕获声音、图像和视频。
目前支持这个api的浏览器有以下这些版本:

Android 3.0 及以上版本
Chrome for Android 0.16及以上版本
Firefox Mobile 10.0及以上版本
Opera各个平台的最新版本
Chrome Dev Channel
Chrome Canary 后两个版本需要进入chrome://flags启用Media Streaming来激活WebRTC功能。

感兴趣的同学可以查看相关的资源如下:

HTML5Rocks的这篇:http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Opera开发中心的这篇:http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
以及Oliver Smith的这篇:http://chemicaloliver.net/internet/getusermedia-the-new-api-webcam-in-browser-using-javascript-and-html5-video/

此外,还可以玩玩下面这几个Demo:

http://www.html5camera.com/
http://neave.com/webcam/html5/

泛泛之交 2017-10-06 3 楼

JS调用好像不行,一般都是用Flash的Com,这是写好的一个Flash调用摄像头的,参考一下吧

package {
import flash.display.Sprite;
import flash.text.*;
import flash.media.Camera;
import flash.events.StatusEvent;
import flash.events.ActivityEvent;
import flash.media.Video;

public class CameraEx extends Sprite
{
private var label:TextField;
private var camera:Camera;

public function CameraEx()
{
label=addLabel("CameraEx");

camera=Camera.getCamera();

if(camera!=null){
camera.addEventListener(StatusEvent.STATUS,statusHandler);
camera.addEventListener(ActivityEvent.ACTIVITY,activityHandler);

var video:Video=new Video(200,200);
video.attachCamera(camera);
addChild(video);
video.x=20;
video.y=20;
}
else{
label.text="不能使用";
}
}

private function statusHandler(evt:StatusEvent):void{
if(camera.muted) label.text="不能使用";
}

private function activityHandler(evt:ActivityEvent):void{
if(evt.activating){
label.text="检测开始";
}
else{
label.text="检测停止";
}
}

private function addLabel(text:String):TextField{
var label:TextField=new TextField();
label.autoSize=TextFieldAutoSize.LEFT;
label.text=text;
addChild(label);
return label;
}
}
}

浮生未歇 2017-09-15 2 楼

html5是可以的,但是我测试只有手机上的opera浏览器支持。可以看我的博客的http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html这篇文章,我就不在复制了,呵呵。

灵芸 2017-09-05 1 楼

HTML5 MediaStream的运用

详情请移歩 :http://www.pjhome.net/article/Javascript/1044.htm

demo: http://www.pjhome.net/web/gif_maker/

注意,最好是chrome 19以上的版本,并且确保你真的有摄像头(没摄像头可能会crash浏览器,chrome的bug)