我用html5中的getusermedia只能调用手机的前置摄像头,怎么设置调用后置摄像头,
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我用html5中的getusermedia只能调用手机的前置摄像头,怎么设置调用后置摄像头,相关的知识,希望对你有一定的参考价值。
参考技术A 手机的NativeAPI(你可以做手机应用) 参考技术B 找到一篇资料,应该能解决你的问题:http://blog.csdn.net/journey191/article/details/40744015 参考技术C 本人也想知道?网上找不到答案啊!追问我找到答案了,火狐可以直接调用后置摄像头,chrome30以上版本通过getSources()方法可以获得摄像头ID,通过navigator.webkitGetUserMedia('audio':false, 'video':'optional':['sourceId':id], switchedTo,failure); 来赋给ID值,就可以选取后置摄像头
调用摄像头和麦克风
技术基础:
依托webRTC(网页实时通信)规范实现接收来自设备上的网络摄像头和麦克风数据
其中主要依赖navigator.getUserMedia()API方法(因为安全原因,此html文件只能通过网站服务器来访问文件,网上有各种搭建服务器的方法在此就不介绍了)
正式开始:
由于不同浏览器对getUserMedia()的使用方法不同,需要加不同的前缀,所以先使用一段代码保障所有浏览器都能正常使用:
1 navigator.getUserMedia=navigator.getUserMedia||navigator.mozGetUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia;
之后调用getUserMedia()方法.
需要传入三个参数调用它,第一个是希望进行访问的媒体类型(目前只有video和audio两个可选项),第二个是调用成功时执行的回调函数,第三个是调用出问题时调用的回调函数。
1 navigator.getUserMedia({ 2 video:true, 3 audio:true 4 },onSuccess,onError);
完整版代码如下:
1 (function(){ 2 navigator.getUserMedia=navigator.getUserMedia||navigator.mozGetUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia; 3 if (navigator.getUserMedia) { 4 5 navigator.getUserMedia({ 6 video:true, 7 audio:true 8 },onSuccess,onError); 9 10 } 11 else 12 { 13 throw new Error("sorry ,getUserMedia() is navigator supported in your browser"); 14 } 15 }()) 16 function onSuccess(stream){ 17 alert("get the navigator getUserMedia"); 18 var video=document.createElement("video"); 19 videoSource=window.URL.createObjectURL(stream); 20 video.autoplay=true; 21 video.src=videoSource; 22 23 document.body.appendChild(video); 24 start.addEventListener(‘click‘,function(){beginbutton(video);},false); 25 pause.addEventListener(‘click‘,function(){stopbutton(video);},false); 26 } 27 function onError(){ 28 throw new Error("there is problem"); 29 }
将其保存为vedio.js文件
编写html文件保存名为unitl.html:
代码如下:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <script src="video.js" type="text/javascript" defer="true"> 8 </script> 9 <style> 10 ul{ 11 list-style:url(security.gif); 12 color:rgba(199,228,231,0.85) 13 } 14 </style> 15 <body> 16 17 </body> 18 </html>
接下来在服务器打开unitl.html即可看到摄像头和麦克风被调用
以上是关于我用html5中的getusermedia只能调用手机的前置摄像头,怎么设置调用后置摄像头,的主要内容,如果未能解决你的问题,请参考以下文章
在 Chrome 中使用 HTML5 和 getUserMedia 录制音频
在html5中使用navigator.getUserMedia打开相机,要怎样进行关闭?
无法在第一页加载时在 Google Chrome 中使用 HTML5 和 getUserMedia() 从网络摄像头拍照