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 相关文章推荐
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php扩展开发入门demo示例
2019/09/23 PHP
javascript实现英文首字母大写
2015/04/23 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python 实现A*算法的示例代码
2018/08/13 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
大专学生求职自荐信
2014/07/06 职场文书
2015年安全生产责任书
2015/01/30 职场文书
接待员岗位职责范本
2015/04/15 职场文书
学子宴致辞大全
2015/07/27 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
如何利用golang运用mysql数据库
2022/03/13 Golang