HTML 调用电脑手机摄像头拍照

jxph040365 2014-07-01 03:31:34
关于调用电脑摄像头拍照怎么不行,
我在网上下载很多,运行都不行,
运行浏览器也没有提示。是用谷歌浏览器。



<!doctype html>
<html>
<head>
<title>html5 capture test</title>
</head>
<body>
<video autoplay></video>
<img src="">
<canvas style="display: none;"></canvas>
<button id="capture">
snapshot</button>

<script type="text/javascript">
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

var snapshot = function() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
};

var sizeCanvas = function() {
setTimeout(function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
img.width = video.videoWidth;
img.height = video.videoHeight;
}, 100);
};

var btnCapture = document.getElementById('capture');
btnCapture.addEventListener('click', snapshot, false);

if (navigator.getUserMedia) {
navigator.getUserMedia(
{ video: true },
function(stream) {
video.src = stream;
localMediaStream = stream;
sizeCanvas();
},
function() {
alert('your browser does not support getUserMedia');
}
);
}
else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(
{ video: true },
function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
sizeCanvas();
},
function() {
alert('your browser does not support webkitGetUserMedia');
}
);
}
</script>

</body>
</html>


...全文
4190 32 打赏 收藏 举报
写回复
32 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
闭包客 2016-09-23
不用插件不可能有这样的权限。
  • 打赏
  • 举报
回复
她微笑的脸_ 2016-09-23
webcam ,可以调用摄像头,和拍照
  • 打赏
  • 举报
回复
跳动de指尖 2016-09-12
flash可以调起摄像头,或者使用ActiveX; 但是,都不是推荐的做法,而且一般使用不到。 在移动端的网站中,一般使用<input type="file" /> ,一般浏览器会有拍照的选项的。
  • 打赏
  • 举报
回复
小大飞 2016-09-12
我顶! html5文档上有吗?
  • 打赏
  • 举报
回复
我在地球 2016-09-06
比较成熟的方案是flash调用。但是接下来,chrome 浏览器不再支持 flash
  • 打赏
  • 举报
回复
tz1992 2016-09-06
楼主,云盘内容怎么删除了
  • 打赏
  • 举报
回复
tz1992 2016-09-06
楼主,帖子怎么删除了
  • 打赏
  • 举报
回复
baidu_31302759 2016-09-06
我觉得并不需要flash 因为html5 应该就具备此功能
  • 打赏
  • 举报
回复
我用火狐也跑不 起来
  • 打赏
  • 举报
回复
dzwebs 2016-05-26
实话告诉你吧,我也是研究了几天了,使用火狐浏览器就可以了嘛,
  • 打赏
  • 举报
回复
楼主成功了?说详细点呗
  • 打赏
  • 举报
回复
frontlook 2015-08-16
放到服务器上跑就可以运行,亲测
  • 打赏
  • 举报
回复
至少应该纠正一个容易被人用来忽悠的说法: 你使用的那些写法不是什么 HTML5 标准 api(尽管多年以前制定的 html5 此类 api 的支持也并不能够很好保证),你使用的是 chrome 的方言,而且谷歌开发的东西的兼容性的名称极差,往往不能支持2、3年就变了(更别说像微软以前那样一般都能支持几十年都兼容了)。
  • 打赏
  • 举报
回复
chrome号称“不支持插件”,但是它自己弄了一大堆相当于插件的 api 在它自己的浏览器里边,这其实巨大的讽刺。 你使用chrome浏览器专用的 javascript api,而且这些也只是在chrome某个版本中支持(甚至在最新版都不支持或者api定义不同了),这种东西就相当于现在还去硬要使用 ie6 才支持的某些 api。 这种写法有多大意义?考虑到浏览器兼容性了吗?
  • 打赏
  • 举报
回复
weiyiding2008 2015-07-18
用于手机浏览器,调用手机摄像头。
  • 打赏
  • 举报
回复
xiaowanzi80hou 2015-05-06
不知道这个问题有没有结局,但是有一点你可以考虑下,需要部署到服务器上,我测试你这段代码,部署到服务器上就行
  • 打赏
  • 举报
回复
jxph040365 2014-07-02
引用 3 楼 Z65443344 的回复:
浏览器有操作摄像头的功能? 你确实不需要ActiveX组件?
使用HTML5
  • 打赏
  • 举报
回复
於黾 2014-07-02
浏览器就是浏览页面,顶多上传下载文件 你要在浏览器里直接调系统硬件,需要插件. 比如使用网银
  • 打赏
  • 举报
回复
於黾 2014-07-02
浏览器有操作摄像头的功能? 你确实不需要ActiveX组件?
  • 打赏
  • 举报
回复
jxph040365 2014-07-02
有谁弄过,是不是要配置什么东西, 我就是直接用浏览器打开的。 Chrome 和Opera浏览器都安装了还是不行。
  • 打赏
  • 举报
回复
加载更多回复(11)
发帖
.NET社区

6.0w+

社区成员

.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • R小R
  • 喵叔哟
加入社区
帖子事件
创建了帖子
2014-07-01 03:31
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。