[转]html5调用摄像头实例
原文: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调用摄像头实例的更多相关文章
- web HTML5 调用摄像头的代码
最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- html5调用摄像头截图
关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...
- html5调用摄像头并拍照
随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...
- getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- html5调用摄像头功能
前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...
- html5 调用摄像头
---移动设备--- <input type="file" capture="camera" accept="image/*" id= ...
- html5调用手机摄像头
<input type="file" accept="image/*" capture="camera"><input t ...
随机推荐
- N个富文本编辑器/基于Web的HTML编辑器
转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...
- Linux进程间通信—信号量
二.信号量(semophore) 信号量是一种计数器,可以控制进程间多个线程或者多个进程对资源的同步访问,它常实现为一种锁机制.实质上,信号量是一个被保护的变量,并且只能通过初始化和两个标准的原子操作 ...
- iOS: iOS各种设备信息获取
Author:si1ence Link:http://www.jianshu.com/p/b23016bb97af 为了统计用户信息.下发广告,服务器端往往需要手机用户设备及app的各种信息,下面讲述 ...
- Oracle sql loader 使用案例
Listing 1: ---------------------- dir *.csv type abc.csv sqlplus scott/tiger@orcl create table emp1 ...
- C++中 使用数组作为map容器VAlue值的解决方法
1)是用Vector容器代替数组 2)使用数组指针(需要注意局部变量的问题,指针是否需要用new创建) int red [ 3 ] = { 1 , 0 , 0 }; int green [ 3 ] ...
- NYOJ 8 一种排序(comparator排序)
一种排序 时间限制: 3000 ms | 内存限制: 65535 KB 难度: 3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都 ...
- Android之旅 自我图示总结四大组件
最近学完了Android的四大组件的基础知识,自己总结了一个图示,希望自己看到这个图的时候能回忆起相关的知识点,与大家分享!
- Sqlite数据库字符串处理函数replace
Sqlite 字符串处理函数replace官方说明: replace(X,Y,Z) The replace(X,Y,Z) function returns a string formed by sub ...
- 【pyhon】怨灵侍全本漫画批量下载爬虫1.00
代码: # 怨灵侍全本漫画批量下载爬虫1.00 # 拜CARTOON.fydupiwu.com整理有序所赐,寻找图片只要观察出规律即可,不用费劲下一页的找了 import time import ur ...
- Error: Cannot find module 'express' 之 解决方案
出现如题错误,是因为执行了#npm install -g express的缘故,express没有被写到package.json里面去. 解决也好办,在程序目录下执行#npm install expr ...