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 相关文章推荐
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
You might like
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
php中上传文件的的解决方案
2018/09/25 PHP
Javascript模块模式分析
2008/05/16 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery动态添加
2016/04/07 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
出纳试用期自我鉴定
2014/04/07 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
党员承诺书格式
2014/05/21 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
捐款通知怎么写
2015/04/24 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers