http://www.oschina.net/code/snippet_2440934_55195
使用HTML５中的canvas和video技术实现调用PC摄像头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5调用电脑摄像头实例</title>
<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
//alert("支持navigator.getUserMedia");
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
//alert("支持navigator.webkitGetUserMedia");
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
//alert("支持navigator.mozGetUserMedia");
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>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video><br>
<button id="snap" >点击拍照</button> <br>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
分享到：
相关推荐
本程序使用VS2019进行制作，利用ASP.NET+H5+Zxing+js+sweetalert2 实现手机端和PC端调用摄像头进行二维码扫一扫，实现前端采集数据，后端进行分析并向前端传值，pc端可运行，手机端鸿蒙系统，安卓，IOS4.X以上均可...
PC端JS调用摄像头实时显示及拍照, 纯html实现。 方便好用，不需要任何操作。简单容易，点开即用。
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照... 说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。
海康威视视频js+html调用demo。先运行exe,再打开html，如果需要集成的话自己修改一下demo即可。另外，我说明一下，这玩意谷歌用不了，我已经找了海康威视售后确认了，需要用到谷歌浏览器的童鞋，可以参考一下即可。
使用浏览器调用电脑的摄像头，来实现即时拍照的功能，最终选择了使用flash插件来调用pc的摄像头，因此，就在想怎么把它嵌入到前端的HTML页面中
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照解析...说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。
这个是用Html5的fieldapi做的，客户端比例缩放,批量上传图片。减少服务器压力，客户端通过base64预览。并且支持直接调用手机相册摄像头 注意：代码里面做了判断，如果是pc端使用flash压缩，如果移动端使用H5进行缩放
PC端使用的时候, HTML页面需要预留video标签, canvas标签 移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签 (function (window, document) { window.camera = { init: function (options) { /*...
本代码实现了HTML5方式调用监控摄像头的实时直播画面，支持微信网页直接调用，PC电脑、安卓手机、苹果手机。 特性一： 支持市面上95%以上的摄像头直接接入。网络摄像机需支持标准协议ONVIF（所有的
html+js 浏览器调用摄像头识别二维码样例代码，PC移动端均可使用，ios使用有问题，安卓适用，调用摄像头需要权限。
Server端目前有个问题，就是必须在前台运行，不能后台（比如计划任务调用，比如windows服务调用）。 如果后台运行的话，相关的msg接口，相关的获得前台进程接口，都有问题（这个是windows安全性的限制）， 目前还在...
实例161 控制PC喇叭发声 206 4.5 多媒体应用 208 实例162 开机祝福程序 208 实例163 制作家庭影集 209 实例164 产品电子报价 210 实例165 产品滚动展示程序 212 实例166 将WAV资源添加到EXE里 213 第...
Phoenix-award workstation BIOS V6.00PC,An Energy star Ally copyright(c) 1984-2003,Phoenix Technologies,LTD 这句英语的意思是：Phoenix-award这两家COMS芯片开发公司合并后共同开发第6号BIOS版本，采用美国...