移动端web开发,调用手机摄像头不兼容问题

我现在做的需求是实现人脸识别登录,使用h5编写页面,发现写好的js代码只可以在手机qq浏览器下运行,求大神指教怎么解决这个问题?
下面附上js代码:

var aVideo=document.getElementById('video');
    var aCanvas=document.getElementById('canvas');
    var ctx=aCanvas.getContext('2d');

    navigator.getUserMedia  = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
    navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息

    function gotStream(stream) {
        video.src = URL.createObjectURL(stream);
        video.onerror = function () {
            stream.stop();
        };
        stream.onended = noStream;
        video.onloadedmetadata = function () {
        };
    }
    function noStream(err) {
        alert(err);
    }
    document.getElementById("picture").addEventListener("click", function() {
        ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
    });

1个回答

你先判断从每个浏览器进去是否可行,比如谷歌,QQ浏览器,再调你的方法试试看从每个浏览器进去哪里出问题了。
function userBrowser(){

var browserName=navigator.userAgent.toLowerCase();

if(/msie/i.test(browserName) && !/opera/.test(browserName)){

alert("IE");

//调你的那个方法
return ;

}else if(/firefox/i.test(browserName)){

alert("Firefox");

//调你的那个方法
return ;

}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){

alert("Chrome");

//调你的那个方法
return ;

}else if(/opera/i.test(browserName)){

alert("Opera");

//调你的那个方法
return ;

}
}

你代码不完整,没法帮你侧哈

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html5调用手机摄像头的问题
调用之后如何调节图像的大小?rn[img=https://img-bbs.csdn.net/upload/201512/21/1450673540_412622.png][/img]rn显示一竖行,样式不管怎么改变都不行
H5 调用手机摄像头的问题
rn以上代码可以启动摄像头(微信浏览器亲测),但是摄像头的窗体尺寸很小,希望达到满屏的状态,该如何调整
android webview 调用手机摄像头拍照上传功能(Android4.4不兼容)
最近项目想尝试直接使用android webview 调用手机摄像头或者图库上传图片功能功能。但在一部三星手机S4,系统为4.4.2上面失败了,网上也看到很多方法甚至例子,但自己试了一下也都失败了。哪位大神有Demo或者资料可以推荐吗?谢谢
移动端 调用摄像头图库 图片上传
移动端 调用摄像头图库 图片上传 }, mounted() { if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …egistNo = this.route.query.registNo; this.comCode=this.route.query.comC...
网页调用手机摄像头
最近想开发个在线扫码功能,并且是手机在线扫描二维码,希望有接触过的童鞋们给些意见,一起交流下。
手机多媒体--调用摄像头
目标: 1、调用系统摄像头拍摄照片,并将之裁剪,最后显示到ImageView上。 2、打开手机相册,选取照片,并将之裁剪,最后显示到ImageView上。 参照书上案例,到第二步选取系统相册时,读取照片失败,后来修改了Choose按钮中的 Intent intent = new Intent(“android.intent.action.PICK”); … startActivity
js调用手机摄像头
(function () {         var meta = document.createElement("meta");         meta.name = "viewport";         meta.content = "width=320,minimum-scale=1,maximum-scale=1.3,user-scalable=no";         doc
HTML5 调用手机摄像头
用html5自带的input file="",纯html5,不涉及到js就可以实现 image video audio capture表示,可以捕获到系统默认的设备, 比如: camera - 照相机 camcorder - 摄像机 microphone - 录音 accept表示,直接打开系统文件目录。
调用手机摄像头
效果图: 布局文件如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_
电脑调用手机摄像头
经常有同学有做视觉的需求,需要用到摄像头,需要的时候第一反应就是买一个,那样虽然不失为一个可行的解决方案,可是对于那些不经常使用摄像头的同学来讲是一种经济上的浪费,更重要的是此解决方案不具有时效性。现在大家手头都有像素几百万的高配置手机,对,本篇文章就是分享下如何用电脑调用手机摄像头。   硬件准备: 电脑:扬天4900 手机:小米6 软件准备:DroidCamx|adb(软件下载地址:ht...
移动端Web开发
移动端Web开发与PC端的web开发有尺寸上的不同,手机屏幕大小有很多种,因此尺寸方面有些要注意的。 1.字体  采用JS动态设置字体大小的方法 思路如下:屏幕宽度>640px,  则font-size=100px;                屏幕宽度 字体单位为rem  在body中设置好font-size:625%,这样1rem = 100px; 2.百分比布局 body设置好
移动端web开发
如今,走在路上,望一望四周均会发现,十个人当中有九个是低头族。科技的发展改善了人们的生活品质,手机由曾经的老人机、按键机到如今的智能手机,还有即将普及的全面屏时代。手机的普及,手机APP也随着盛行,各种电商、微商、小程序也随着风靡,而APP的开发,关于APP的开发有些是通过web的移动端开发来实现的,因此,移动端的web开发是至关重要的。接下来看一看关于移动端的web开发。
移动端页面如何调用手机摄像头拍照并上传图片
移动端页面如何调用手机摄像头拍照并上传图片 解决方法: 1.页面 &lt;input type="file" accept="image/*" placeholder="点击上传" name="ipaddress" id="ipaddress" &gt; 2.js核心代码:http://www.yayihouse.com/yayishuwu/chapter/1920 ...
移动端 手机调用百度地图 Demo
移动端 手机调用百度地图 Demo
移动端、手机调用百度地图 Demo
首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理: 1、通过百度拾取坐标系统获得点位的坐标。 http://api.map.baidu.com/lbsapi/getpoint/index.html 2、在网页的中插入百度API引用脚本。 script type="text/javascript" src
unigui 调用手机摄像头相册
在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头, 用html5自带的 input file="" , 纯html5,并且不涉及到js ,就可以实现。代码如下: &lt;input type="file" accept="image/*" capture="camera"&gt; &lt;input type="file" accept="video/*" c...
使用matlab调用手机摄像头
首先下载Droidcam,分别对应PC和手机:Dev47Apps官网 然后…
用OpenCV调用手机摄像头
首先下载一个工具:IP摄像头(app),安卓,ios都能下载。这里提安卓版的下载地址:http://app.mi.com/details?id=com.shenyaocn.android.WebCam下载安装后,打开app后,点击下方的“打开IP摄像头服务器”(连上wifi,确保电脑与手机处在同一局域网内)。然后,进行OpenCV代码调用部分:/** *Copyright (c) 2018 Yo...
html调用手机摄像头功能
现在开发了一个上传图片的程序,默认按钮点击 提示选择相册或相机,需要改成点击 上传图片 按钮直接打开手机后置摄像头拍照。rnrnhtml代码:rn[code=html]rn 添加图片rn[/code]rnrnrnJS代码: rn[url=http://dc.luqilina.com/js/cus_upload_wap.js][/url]rnrnrnrn目前在网上看可以用 来打开手机相机,但是用的是file的功能,可是我的代码是a标签的,求大神把这个功能加到我的js中修改一下,使直接启动相机。rnrnrn[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/8.gif][/img]
HTML5调用手机摄像头拍照
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。具体内容参考: http://blog.sina.com.cn/s/blog_4ad7c2540101lnak.html
HTML5代码调用手机摄像头
做手机移动端的时候,有时需要调用手机摄像头,有一个简单的方法使用input:file标签,不需要复杂代码操作就能实现调用拍照、相册等功能。 capture – 设置选择需要调用的功能 camcorder – 摄像机 microphone – 录音 accept – 直接打开系统文件目录 &amp;lt;input type=&quot;file&quot; accept...
纯html5调用手机摄像头
纯html5,并且不涉及js,实现调用手机摄像头<!--打开相机--> <input type="file" accept="image/*" capture="camera"> <!--打开摄像--> <input type="file" accept="video/*" capture="camcorder"><!--打开录音--> <input type="file" accept="aud
H5如何调用手机摄像头?
H5调用手机摄像头 那么问题来了:该如何调用? 请看代码: &amp;amp;amp;amp;lt;input type=&amp;amp;amp;quot;file&amp;amp;amp;quot; accept=&amp;amp;amp;quot;image/*&amp;amp;amp;quot; capture=&amp;amp;amp;quot;camera&amp;amp;amp;quot;&amp;amp;amp;amp;gt; 下面是开发时遇到的问题和疑问: 如何调
html+js调用手机摄像头扫描二维码
&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp
linux opencv调用手机摄像头
手机端安装IP摄像头 先上源码: #include "cv.h" #include "highgui.h" #include int main(int, char**) { cv::VideoCapture vcap; cv::Mat image; CvCapture *capture ; const std::string videoStreamAddr
HTML5 调用手机摄像头扫描二维码
最近有个项目需要使用H5调用手机摄像头扫描二维码斌且识别。(很奇葩的需求) 百度了下找到了这个api: 旧版:(目前只有UC浏览器支持,其他的手机浏览器一律没有反应) https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia 新版:(目前只有火狐浏览器手机版和谷歌浏览器桌面版支持支持) https:
网页调用手机摄像头拍照
手机网页 拍照,目前只支持安卓手机,并且部分浏览器不兼容
h5调用手机摄像头下载
h5调用手机摄像头,以前做的时候没找到,今天,群里有人发了,感觉用着挺好,兼容机型也挺多,不错,给大家分享一下,请求手机上测试
H5调用手机摄像头和相册
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script src="js/jquery-1.9.1.min.js" type="text/javascript" charset...
JavaScript调用pc和手机摄像头
主要是pc和手机的浏览器可以调用,亲测可用,但是微信扫二维码则不可以,微信的话应该还是要调微信接口<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>GetUserMedia实例</title> </head> <body> <video id="vide
python+opencv 电脑调用手机的摄像头
移动端下载一个工具:IP摄像头(app) Android的下载地址:http://app.mi.com/details?id=com.shenyaocn.android.WebCam 下载安装后,打开app后,点击下方的“打开IP摄像头服务器”(连上wifi,确保电脑与手机处在同一局域网内)。 然后,使用python进行opencv代码调用部分: import cv2 cv2.nam...
关于采用浏览器调用手机摄像头问题
之前一直做后台开发,最近项目客户想要采用android平板扫描物品条码,所以开始在网上看了众多关于采用浏览器调用摄像头的问题,让我十分疑惑的是,为什么很多解决案例并没有讲到移动端浏览器的支持问题,以致自己走了很多弯路。下面就具体对采用浏览器调用手机摄像头问题进行一些说明。最开始采用navigator.getUserMedia这个接口:这个接口先要有一个video标签&amp;lt;video id=&quot;vi...
移动端手机适配问题
    关于手机移动端的页面适配问题,小编一直不想使用百分比来适配各个手机型号,于是参考了一下别人的方法。通过rem来适配。     首先获取html节点的字体类型,document.documentElement.style.fontSize,    然后获取移动端手机的宽度,document.documentElement.clientWidth.  我们这里用的是屏幕以375px X ...
关于手机WEB开发问题
我想开发一个某方面的学习网站,希望客户使用手机也能访问使用。手机浏览器为 UCWEB,请问在UCWEB中浏览web应用程序最好是用什么开发?需要注意些什么呢?
手机摄像头开发的问题
rnrn请问手机上摄像头的开发流程,自己开发程序启动摄像头,截取摄像头的图片,保存在手机中。rn在 wincetools 里面的那个win32下的sample貌似不能用啊,不能截获到图片的数据,是吗?rn需要安装一些什么sdk吗?rn还是用direcshow 之类的?rnrn绝对新手,提前谢谢大家了
手机摄像头的开发问题
请问手机上摄像头的开发流程,自己开发程序启动摄像头,截取摄像头的图片,保存在手机中。rn在 wincetools 里面的那个win32下的sample貌似不能用啊,不能截获到图片的数据,是吗?rn需要安装一些什么sdk吗?rn还是用direcshow 之类的?rnrn查了半天了,还是没有思路,希望大家帮忙rnrn绝对新手,提前谢谢大家了
手机WEB开发
智能手机WEB开发的一些笔记和需注意的问题,希望对WEB开发的人有所帮助。
移动端Web开发注意事项(响应式)
原文:地址 移动Web资源管理:http://www.cnblogs.com/PeunZhang/p/3407453.html#question_17 Web App优化整理:http://www.cnblogs.com/yexiaochai/p/3759959.html web移动端常见问题解决方案:http://www.html5cn.org/article-9314-1.html ...
移动端web开发个人笔记
移动web 建议使用H5的api 或使用zepto.js的库(基于高版本浏览器开发)。 https://zeptojs.com/ 适配问题 使用百分比布局(也叫流式布局),还需对移动端的viewport视口进行设置。 视觉窗口:viewport,是移动端特有。这是一个虚拟的区域,承载网页的。 承载关系:浏览器→viewport→网页。 适配方案(标准) 网页宽度必须和浏览器保存一致。 默认显...
移动端web开发---Touch事件详解
一、pc端事件回顾HTML事件、DOM0事件、DOM2事件事件对象。如果上述概念不清楚,请先去了解。二、移动端事件简介2.1 pc端事件在移动端的问题​ 移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟机键盘。所以以前的pc端事件在移动端使用起来就没有以前那么爽了,虽然部分仍然可以使用。 click事件的300ms延迟问题。​2007年第一代iphone发布,由于那个年代所
相关热词 c# 去空格去转义符 c#用户登录窗体代码 c# 流 c# linux 可视化 c# mvc 返回图片 c# 像素空间 c# 日期 最后一天 c#字典序排序 c# 截屏取色 c#中的哪些属于托管机制