原文:https://blog.csdn.net/binquan_liang/article/details/79489989

最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵。于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码。

HTML代码部分:

<!--video用于显示媒体设备的视频流,自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
<button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="" height=""></canvas>

接下来是js代码部分:

<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var capture = document.getElementById('capture');
var context = canvas.getContext('2d');
function getUserMediaToPhoto(constraints,success,error) {
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success,error);
}else if(navigator.mozGetUserMedia){
//firefox浏览器
navigator.mozGetUserMedia(constraints,success,error);
}else if(navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constraints,success,error);
}
}
//成功回调函数
function success(stream){
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流转化为video的源
video.src = CompatibleURL.createObjectURL(stream);
video.play();//播放视频
}
function error(error) {
console.log('访问用户媒体失败:',error.name,error.message);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:,height:}},success,error);
}else{
alert('你的浏览器不支持访问用户媒体设备');
}
capture.addEventListener('click',function() {
// 将video画面描绘在canvas画布上
context.drawImage(video,,,,);
})
</script>

值得注意的是:
使用的时候打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。

还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!

[转]html5调用摄像头实例的更多相关文章

  1. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  2. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  3. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

  4. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  5. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  6. html5调用摄像头功能

    前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

  7. HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  8. html5 调用摄像头

    ---移动设备--- <input type="file" capture="camera" accept="image/*" id= ...

  9. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

随机推荐

  1. N个富文本编辑器/基于Web的HTML编辑器

    转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...

  2. Linux进程间通信—信号量

    二.信号量(semophore) 信号量是一种计数器,可以控制进程间多个线程或者多个进程对资源的同步访问,它常实现为一种锁机制.实质上,信号量是一个被保护的变量,并且只能通过初始化和两个标准的原子操作 ...

  3. iOS: iOS各种设备信息获取

    Author:si1ence Link:http://www.jianshu.com/p/b23016bb97af 为了统计用户信息.下发广告,服务器端往往需要手机用户设备及app的各种信息,下面讲述 ...

  4. Oracle sql loader 使用案例

    Listing 1: ---------------------- dir *.csv type abc.csv sqlplus scott/tiger@orcl create table emp1 ...

  5. C++中 使用数组作为map容器VAlue值的解决方法

    1)是用Vector容器代替数组 2)使用数组指针(需要注意局部变量的问题,指针是否需要用new创建) int red [ 3 ]   = { 1 , 0 , 0 }; int green [ 3 ] ...

  6. NYOJ 8 一种排序(comparator排序)

    一种排序 时间限制: 3000 ms  |  内存限制: 65535 KB 难度: 3   描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都 ...

  7. Android之旅 自我图示总结四大组件

    最近学完了Android的四大组件的基础知识,自己总结了一个图示,希望自己看到这个图的时候能回忆起相关的知识点,与大家分享!

  8. Sqlite数据库字符串处理函数replace

    Sqlite 字符串处理函数replace官方说明: replace(X,Y,Z) The replace(X,Y,Z) function returns a string formed by sub ...

  9. 【pyhon】怨灵侍全本漫画批量下载爬虫1.00

    代码: # 怨灵侍全本漫画批量下载爬虫1.00 # 拜CARTOON.fydupiwu.com整理有序所赐,寻找图片只要观察出规律即可,不用费劲下一页的找了 import time import ur ...

  10. Error: Cannot find module 'express' 之 解决方案

    出现如题错误,是因为执行了#npm install -g express的缘故,express没有被写到package.json里面去. 解决也好办,在程序目录下执行#npm install expr ...