javascript 调用电脑摄像头

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
// 添加事件监听器
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);

</script>

javascript 调用电脑摄像头

时间: 2024-10-10 01:07:53

javascript 调用电脑摄像头的相关文章

html,JavaScript调用winfrom方法

---恢复内容开始--- 目的: 在动画上面添加点击事件,通过JavaScript调用winfrom方法 1.创建一个页面 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; usin

javascript调用ActiveX接口失败的解决方案及使用心得

前段时间公司做了个比较大的项目,需要用到ocx控件,我厂大部分项目都采用C#.net,而winform程序条用ocx控件接口是相对简单的,但是javascript调用ocx接口,却和winform的用法有些不同,其实真捉摸下,也就能发现:差别不大. 笔者此次主要阐述在项目中用javascript调用ocx控件接口,也就是activeX控件时所遇到的问题及其解决方案.winform用法不在此篇中阐述. 调用activeX插件前,我们要做一些准备工作,我们介绍两种方案: 1.使用regsvr32 命

用JavaScript调用WCF Service

原文:用JavaScript调用WCF Service 原创地址:http://www.cnblogs.com/jfzhu/p/4039604.html 转载请注明出处 前面介绍过<Step by Step 创建一个WCF Service>和<使用WCF的Trace与Message Log功能>,本文介绍一下如何用JavaScript来调用WCF Service. WCF Service的代码如下: IHelloService.cs using System.ServiceMode

浏览器端javascript调用手机终端本地功能实现02-功能点汇总

上篇博文已经说明,本篇直接进入主题.本篇大致说明总体功能以及代码用途,下篇将功能点逐一详细说明. 功能点包括: 拍照相关接口(camera) 功能函数名称 作用 备注 invokeCamera() 调用摄像头拍照 requestAlbum() 调用相册功能 requestAlbumMulti() 相册多选 requestAlbumMultiUpload() 相册多选完后上传 2. 录音相关接口(media) 功能函数名称 作用 备注 startRecord() 录制音频 stopRecord()

Crosswalk+Cordova开发安卓app之 JavaScript调用java (附源代码下载)

 Crosswalk+Cordova开发安卓app之 JavaScript调用java (附源代码下载) 定义js回调接口 /** * js回调接口 * * @author graceup * */ public class JsInterface { public JsInterface() { } @JavascriptInterface public String sayHello() { // TODO do more thing return "Hello World!";

Javascript调用C#后台方法及JSon解析

Javascript调用C#后台方法及JSon解析 如何使用Ajax 调用C# 后台方法. 本文目录 如何使用Ajax 调用C# 后台方法. 1.后台(.cs)测试方法 2.前台调用(javascript)代码: 在通常的WebForm中,我们通常使用“一般处理程序”来响应Ajax请求.今天我们尝试使用Ajax调用.cs文件的方法. 1.后台(.cs)测试方法 [WebMethod] public static string DisplayImagesInfo() { List<ImageQue

atitit.javascript调用java in swt attilax 总结

atitit.javascript调用java in swt attilax 总结 1. BrowserFunction 简介1 1.1. BrowserFunction 可以分为三类: 1 1.2. 事件监听2 2. ati的实现2 2.1. 页面调用2 2.1.1. --------nativeswing的实现2 2.2. java代码2 3. ---code4 4. 参考5 1. BrowserFunction 简介 为了让读者更好的理解后面的内容,在正式介绍之前,需要让读者简单了解一下 

atitit.js&#160;javascript&#160;调用c#&#160;java&#160;php后台语言api&#160;html5交互的原理与总结p97

atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参数个数2 1.3. 事件监听2 1.4. 异常转换2 2. dwrC.exec3 2.1. 支持 ajax 与browExt模式  支持反射,直接继承调用后台api3 2.2. sendNSCommand (nativeswing的实现)3 2.3. --------nativeswing的实现3

使用javascript调用android代码

1.使用webview对象的addJavascriptInterface方法 2.addJavascriptInterface方法有两个参数,第一个参数就是我们一般会实现一个自己的类,类里面提供我们要提供给javascript访问的方法:第二个参数是访问我们在obj中声明的方法时候所用到的js对象,调用模式为window.interfaceName.方法名()或者是javascript: interfaceName.方法名() ;,如myWebView.addJavascriptInterfac