html5调用摄像头实例代码
发布时间：2021-06-28 16:20:10 作者：binquan_liang 
我要评论
我要评论本文给大家分享html5调用摄像头实例代码，代码简单易懂，对前端html5的学习有很大帮助，如果对html5调用摄像头相关知识感兴趣的朋友一起看看吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
最近在学习在做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调用摄像头内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
这篇文章主要介绍了HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值2020-04-27- 这篇文章主要介绍了Html5调用手机摄像头并实现人脸识别的实现，混合App开发，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-21
- 这篇文章主要介绍了html5调用摄像头功能的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-07
- 根据需求我们可以把图片数据转换为流或二进制，我这里转换为base64，拿到了数据就可以发挥想象了，tensorflow，机器学习，模式识别，大把的应用场景。下面给大家介绍下html2021-12-28
最新评论