html5调用摄像头实例代码


Posted in HTML / CSS onJune 28, 2021

最近在学习在做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="480" height="320"></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:480,height:320}},success,error);
    }else{
        alert('你的浏览器不支持访问用户媒体设备');
    }
    capture.addEventListener('click',function() {
        // 将video画面描绘在canvas画布上
        context.drawImage(video,0,0,480,320);
    })
 </script>

值得注意的是:

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

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

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

到此这篇关于html5调用摄像头实例的文章就介绍到这了,更多相关html5调用摄像头内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
You might like
php购物车实现代码
2011/10/10 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python清除函数占用的内存方法
2018/06/25 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python用input输入列表的实例代码
2020/02/07 Python
如何理解python对象
2020/06/21 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
新闻专业推荐信范文
2013/11/20 职场文书
打架检讨书100字
2014/01/19 职场文书
社区庆八一活动方案
2014/02/02 职场文书
手机银行营销方案
2014/03/14 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
销售员岗位职责范本
2015/04/11 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
爱国教育主题班会
2015/08/14 职场文书
考研经验交流会策划书
2015/11/02 职场文书
python 镜像环境搭建总结
2022/09/23 Python