html 调用摄像头,调用摄像头的代码

　　最近在学习在做HTML5的项目，看了博客上html5调用摄像头拍照的文章，但各有瑕疵。于是自己查阅书籍写了一个演示，主要分三步，废话不多说上代码。

　　超文本标记语言代码部分：

　　！-视频用于显示媒体设备的视频流，自动播放-video id= video autoplay style= width:480 px；身高：320像素/视频！-拍照按钮- div按钮id=capture 拍照/button/div！-描绘录像截图- canvas id=canvas 宽度=480 高度= 320 /画布接下来是射流研究…代码部分：

　　脚本变量video=document。getelementbyid( video )；var canvas=文档。getelementbyid(“canvas”)；var capture=文档。getelementbyid( capture )；var context=画布。获取上下文(“2d”)；函数getusermediafophoto(constraints，success，error){ if(navigator。媒体设备。getuser media){//最新标准API导航器。媒体设备。getuser媒体(约束)。然后（成功)。接住(错误);} else if(导航员。WebKit getuser media){//WebKit核心浏览器navigator.webkitGetUserMedia(约束、成功、错误);} else if(导航员。mozgetusermedia){//Firefox浏览器navigator.mozGetUserMedia(约束、成功、错误);} else if(导航员。获取用户媒体){//旧版API navigator.getUserMedia(约束、成功、错误);} } //成功回调函数函数成功（流){ //兼容内核核心浏览器var CompatibleURL=window .网址 window.webkitURL//将视频流转化为录像的源视频。src=compatibleurl。createobjecturl(流)；视频。play()；//播放视频}函数错误(错误){ console.log(访问用户媒体失败：，error.name，错误。消息)；} if(导航仪。媒体设备。getuser media 导航器。WebKit getuser media navigator。mozgetuser media navigator。getuser media){ getuser media foto({ video:{ width:480，height:320}}，成功，错误);}else{ alert(你的浏览器不支持访问用户媒体设备);}捕捉。addevent侦听器( click ，function() { //将录像画面描绘在帆布画布上context.drawImage(视频，0,0,480,320);})/脚本值得注意的是：

　　使用的时候打开摄像头一定要上计算机网络服务器上打开，否则没办法使用！因为打开的是属于网络的网络摄像头，需要在计算机网络服务器上打开。

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

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

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。