html5 判断是否有访问手机摄像头权限

作者&投稿:老伏 (若有异议请与网页底部的电邮联系)
如何html5在浏览器里访问手机后置摄像头~

html5需要使用接口chrome30+ for android 已经实现了利用webcam,调用手机后置摄像头,代码如下:
HTML5 GetUserMedia Demo


var video = document.querySelector('video'); var audio, audioType; var canvas1 = document.getElementById('canvas1'); var context1 = canvas1.getContext('2d'); var canvas2 = document.getElementById('canvas2'); var context2 = canvas2.getContext('2d'); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; var exArray = []; //存储设备源ID MediaStreamTrack.getSources(function (sourceInfos) { for (var i = 0; i != sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; //这里会遍历audio,video,所以要加以区分 if (sourceInfo.kind === 'video') { exArray.push(sourceInfo.id); } } }); function getMedia() { if (navigator.getUserMedia) { navigator.getUserMedia({ 'video': { 'optional': [{ 'sourceId': exArray[1] //0为前置摄像头,1为后置 }] }, 'audio':true }, successFunc, errorFunc); //success是获取成功的回调函数 } else { alert('Native device media streaming (getUserMedia) not supported in this browser.'); } } function successFunc(stream) { //alert('Succeed to get media!'); if (video.mozSrcObject !== undefined) { //Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持 video.mozSrcObject = stream; } else { video.src = window.URL && window.URL.createObjectURL(stream) || stream; } //video.play(); // 音频 audio = new Audio(); audioType = getAudioType(audio); if (audioType) { audio.src = 'polaroid.' + audioType; audio.play(); } } function errorFunc(e) { alert('Error!'+e); } // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧,形成肉眼视频效果 function drawVideoAtCanvas(video,context) { window.setInterval(function () { context.drawImage(video, 0, 0,90,120); }, 60); } //获取音频格式 function getAudioType(element) { if (element.canPlayType) { if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') { return ('aac'); } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') { return ("ogg"); } } return false; } // vedio播放时触发,绘制vedio帧图像到canvas// video.addEventListener('play', function () {// drawVideoAtCanvas(video, context2);// }, false); //拍照 function getPhoto() { context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域,实现拍照。 } //视频 function getVedio() { drawVideoAtCanvas(video, context2); } HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的

 我也是后来才发现,chrome好像不支持访问后置摄像头,不知道怎么回事,但firefox和opera是支持访问后置摄像头的,你可以试试

HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:
1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的

另外,看看这个吧https://zhidao.baidu.com/question/2141354685866938268.html


柳南区15349143753: html怎么判断手机是否手机访问 -
叱干科时泰: 主要可以在html中,用js判断1、js的代码如下2、html的运行结果如下,当前是在电脑运行

柳南区15349143753: HTML页面如何判断是手机访问还是电脑访问 -
叱干科时泰: 通过navigator.platform来判断 <script type="text/javascript">var system ={};var p = navigator.platform;system.win = p.indexOf("Win") == 0;system.mac = p.indexOf("Mac") == 0;system.x11 = (p == "X11") || (p.indexOf("Linux") == 0...

柳南区15349143753: html网页移动设备访问时自动询问是否跳转手机版该怎么写呢 -
叱干科时泰: 这个问题可以用js判断当前浏览器的类型:navigator.userAgent ;然后跳转到手机网站路径就可以实现了: <script type="text/javascript"> // JavaScript Document function urlredirect() {var sUserAgent = navigator.userAgent.toLowerCase();if ...

柳南区15349143753: html5怎样调用手机摄像头或者相册 -
叱干科时泰: 1)获取视频流 添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源 var video = document.getElementByIdx_x_x("video"); navigator.getUserMedia({video:true}, function (stream) { video.src = window.webkitURL.createO...

柳南区15349143753: 如何通过html5调用手机摄像头? -
叱干科时泰: HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流.但实际上用html5调用手机摄像头存在很多问题:<br>1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视...

柳南区15349143753: html5调用手机摄像头的问题: -
叱干科时泰: 需要加载cordova.js 方法:document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { pictureSource = navigator.camera.PictureSourceType; destinationType = navigator.camera.DestinationType; }//相册 ...

柳南区15349143753: 如何用html5实现在网页上显示本地摄像头 -
叱干科时泰: HTML5技术支持WebApp在手机上拍照,显示在页面上并上传到服务器.这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术. 1、 视频流 HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程...

柳南区15349143753: html5 获取手机摄像头与相册问题 -
叱干科时泰: 之前做过微信的一些项目,在ios上使用这个file域是可以实现【拍照】和【选择相册】的 但是由于安卓机的兼容性非常糟糕,有些安卓机是可以的,有些就是不行,需要用一些app控件才可以实现

柳南区15349143753: html5可以调手机端的摄像头吗? -
叱干科时泰: 首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析.首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网