金沙js8331Mobile调用摄像头

详细解释HTML5 使用video标签实现采用摄像头功效

HTML5 PC、Mobile调用录制头(navigator.getUserMedia),html5录像头

废话少说,先贴上代码

金沙js8331Mobile调用摄像头。html:

金沙js8331 1 1 <div
id=”main” class=”masthead”> 2 <div id=”face_scan_camera”
class=”container blackbg” style=”height:792px; “> 3 <div
style=”width:1400px;margin:0 auto;”> 4 <video id=”video”
width=”1400″ height=”790″ autoplay=”autoplay” style=”margin:0
auto;position:relative;z-index:100;”></video> 5 </div> 6
<div class=”camera-mask”></div> 7 <div
class=”camera-area”
style=”width:450px;height:350px;background:url(/images/lifescan/scan_金沙js8331,kuang1.png)
no-repeat;z-index:102;top:560px;left:780px;”> 8 <img
src=”/images/lifescan/scan_kuang1.png” /> 9 <div
class=”scan-area” style=”height:585px;width:580px;display:none; “> 10
<canvas id=”canvas” width=”1054″ height=”790″
style=”display:inline-block; margin:0
auto;position:relative;left:13px;top:70px;z-index:100;”></canvas>
11 </div> 12 <a id=”snap” ><img
src=”/images/lifescan/camera_btn.png” /></a> 13 </div>
14 </div> 15 <div id=”cream_loading”
style=”display:none;position:absolute; margin:-62px 0 0
-62px;top:50%;left:50%;height:124px;width:124px;z-index:2001;”><img
src=”/Images/cream_loading.gif”/></div> 16 </div> View Code

js:

金沙js8331 2 1 var
sel, fr; 2 $(function () { 3 $(‘#canvas’).hide(); 4 try { 5 sel =
document.getElementById(‘fileselect’); // get reference to file select
input element 6 7 window.addEventListener(“DOMContentLoaded”, function
() { 8 // Grab elements, create settings, etc. 9 var canvas =
document.getElementById(“canvas”), 10 context = canvas.getContext(“2d”),
11 video = document.getElementById(“video”), 12 videoObj = { “video”:
true }, 13 errBack = function (error) { 14 if (error.PERMISSION_DENIED卡塔尔{ 15 jAlert(‘客户拒绝了浏览器央求媒体的权位’, ‘提醒’卡塔尔; 16 } else if
(error.NOT_SUPPORTED_E传祺ROCRUISER卡塔尔国 { 17
jAlert(‘对不起,您的浏览器不帮衬拍照效果,请使用其余浏览器’, ‘提醒’卡塔尔; 18
} else if (error.MANDATO瑞虎Y_UNSATISFIED_E本田CR-VRO奇骏卡塔尔国 { 19
jAlert(‘内定的传播媒介类型未接到到媒体流’, ‘提醒’State of Qatar; 20 } else { 21
jAlert(‘系统不允许获得到录制头,请保管录制头已准确安装。或尝试刷新页面,重试’,
‘提醒’卡塔尔(قطر‎; 22 } 23 }; 24 25 26 var message =
“为了获得越来越精确的测验结果,请尽量将面部置于红框中,然后开展录像、扫描。
点击“OK”后,请在显示屏上方现身的提示框接受“允许”,以张开始拍片摄效率”; 27 //
Put video listeners into place 28 if (navigator.getUserMedia卡塔尔(قطر‎ { //
斯坦dard 29 if (navigator.userAgent.indexOf(‘MQQBrowser’卡塔尔国 > -1卡塔尔 { 30
jAlert(‘对不起,您的浏览器不扶植拍照效果,请使用别的浏览器’, ‘提醒’卡塔尔(قطر‎; 31
return false; 32 } 33 jAlert(message, ‘提示’, function (卡塔尔(قطر‎ { 34
$(document卡塔尔.scrollTop($(window卡塔尔国.height(State of QatarState of Qatar; 35 }卡塔尔国; 36 37
navigator.getUserMedia(videoObj, function (stream卡塔尔 { 38 video.src =
stream; 39 video.play(State of Qatar; 40 alert(11State of Qatar; 41 $(‘#lifescan #main
.btn_click’).css(‘margin-top’, ‘-550px’); 42
video.addEventListener(‘loadeddata’, function () { 43
$(document).scrollTop($(window).height()); 44 }, false); 45
$(‘#snap’).click(function () { 46 //$(‘.scan-area’).show(); 47
$(‘#cream_loading’).toggle(); 48 context.drawImage(video, 0, 0, 640,
480); 49 convertCanvasToImage(); 50 }); 51 }, errBack); 52 } else if
(navigator.webkitGetUserMedia) { // WebKit-prefixed 53 jAlert(message,
‘提示’, function () { 54 $(document).scrollTop($(window).height()); 55
}); 56 57 navigator.webkitGetUserMedia(videoObj, function (stream) { 58
video.src = window.webkitURL.createObjectURL(stream); 59 video.play();
60 $(‘#lifescan #main .btn_click’).css(‘margin-top’, ‘-550px’); 61
video.addEventListener(‘loadeddata’, function () { 62
$(document).scrollTop($(window).height()); 63 }, false); 64 if
(navigator.userAgent.indexOf(‘UCBrowser’) > -1) { 65 $(‘#lifescan
#main .btn_click’).css(‘margin-top’, ‘-10px’); 66 } 67
$(‘#snap’).click(function () { 68 $(‘#cream_loading’).toggle(); 69
context.drawImage(video, 0, 0, 640, 480); 70 convertCanvasToImage(); 71
}); 72 }, errBack); 73 74 } 75 else if (navigator.mozGetUserMedia) { //
Firefox-prefixed 76 jAlert(message, ‘提示’, function () { 77
$(document).scrollTop($(window).height()); 78 }); 79 80
navigator.mozGetUserMedia(videoObj, function (stream) { 81 video.src =
window.URL.createObjectURL(stream); 82 video.play(); 83
video.addEventListener(‘loadeddata’, function () { 84
$(document).scrollTop($(window).height()); 85 }, false); 86
$(‘#lifescan #main .btn_click’).css(‘margin-top’, ‘-550px’); 87 88
$(‘#snap’).click(function () { 89 $(‘#cream_loading’).toggle(); 90
context.drawImage(video, 0, 0, 640, 480); 91 convertCanvasToImage(); 92
}); 93 }, errBack); 94 95 } 96 else if (navigator.msGetUserMedia) { 97
jAlert(message, ‘提示’, function () { 98
$(document).scrollTop($(window).height()); 99 }); 100
navigator.msGetUserMedia(videoObj, function (stream) { 101
$(document).scrollTop($(window).height()); 102 video.src =
window.URL.createObjectURL(stream); 103 video.play(); 104 $(‘#lifescan
#main .btn_click’).css(‘margin-top’, ‘-550px’); 105
video.addEventListener(‘loadeddata’, function () { 106
$(document).scrollTop($(window).height()); 107 }, false); 108
$(‘#snap’).click(function () { 109 $(‘#cream_loading’).toggle(); 110
context.drawImage(video, 0, 0, 640, 480); 111 convertCanvasToImage();
112 }); 113 }, errBack); 114 115 } 116 else { 117 var userAgent =
navigator.userAgent; 118 if (userAgent.indexOf(“Safari”) > -1 &&
userAgent.indexOf(“Oupeng”) == -1 && userAgent.indexOf(“360 Aphone”) ==
-1) { 119 sel.addEventListener(‘change’, function (e) { 120 var f =
sel.files[0]; // get selected file (camera capture) 121 fr = new
FileReader(); 122 fr.onload = receivedData; // add onload event 123 124
fr.readAsDataURL(f); // get captured image as data URI 125 }); 126
$(‘#imgtag’).show(); 127 $(‘.div_video’).hide(); 128
$(‘#snap’卡塔尔国.click(function (卡塔尔 { 129 sel.click(卡塔尔(قطر‎; 130 }State of Qatar; 131 }
//决断是或不是Safari浏览器 132 else { 133
jAlert(‘对不起,您的浏览器不帮衬拍照效率,请使用别的浏览器’, ‘提示’卡塔尔(قطر‎;
134 } 135 } 136 }, falseState of Qatar; 137 } 138 catch (err卡塔尔国 { 139
jAlert(‘对不起,您的浏览器不扶植拍照作用,请使用此外浏览器’, ‘提醒’卡塔尔;
140 } 141 }State of Qatar; 142 // for iOS 143 // create file reader 144 function
receivedData(卡塔尔(قطر‎ { 145 // readAsDataU传祺L is finished – add U君越I to IMG tag
src 146 var canvas = document.getElementById(“canvas”卡塔尔国; 147 var context
= canvas.getContext(“2d”State of Qatar; 148 var imgtag =
document.getElementById(‘imgtag’卡塔尔(قطر‎; // get reference to img tag 149
imgtag.src = fr.result; 150 $(‘#cream_loading’卡塔尔国.toggle(State of Qatar; 151 152 try
{ 153 setTimeout(function (State of Qatar { 154 context.drawImage(imgtag, 0, 0, 640,
480State of Qatar; 155 convertCanvasToImage(State of Qatar; 156 }, 500卡塔尔国; 157 158 } 159 catch (err卡塔尔国{ 160 alert(errState of Qatar; 161 } 162 } 163 //帆布调换来图像并保留图片 164
function convertCanvasToImage(canvas卡塔尔国 { 165 var image = new Image(卡塔尔; 166
image.src = document.getElementById(“canvas”State of Qatar.toDataUGL450L(“image/png”State of Qatar;
167 //alert(image.src卡塔尔国; 168
//删除字符串前的提示消息“data:image/png;base64” 169 var b64 =
image.src.substring(22卡塔尔; 170 var myDate = new Date(卡塔尔; 171 var filename =
myDate.getTime(State of Qatar; 172 $.post(“/Article/SavePhoto”, { data: b64, name:
filename }, function (result卡塔尔(قطر‎ { 173 if (result.success卡塔尔国 { 174
$(‘#cream_loading’).toggle(); 175 window.location.href =
“/yourreenex?photo=” + result.photo; 176 } 177 }); 178 return image; 179
} View Code

 然后说一下那么些宽容性,近来支撑,PC端:chrome,Firefox,360;移动端:chrome,Firefox,UC,Safair(这一个的调用跟别的有一点点不同,前面会说道卡塔尔(قطر‎

进而上海体育场所片:PC端的没上海教室片,第一张是mobile chrome,前面两张是mobile
firefox

金沙js8331 3
金沙js8331 4金沙js8331 5
     然后大家的话一下代码,html代码中内部使用的正是video 跟canvas 
标签,当中canvas是藏身的,当中的height width 不是卸载style这种。  
我们照旧来根本说雅培下js代码吧  
为了合作分化的浏览器大家那边对navigator.getUserMedia
进行了剖断,因为手机上video的width实在倒霉调控要满屏,所以本人特意放大了,但如此就能够有二个拍片按键被撑到了上边,须求滑动页面本领找到,客商体验倒霉,为精晓决这一主题素材本人给video 
加多了 ‘loadeddata’事件,让页面能再及时的自发性下滑到地步  
再来讲一下水墨画,用到了context.drawImage(video, 0, 0, 640,
480State of Qatar;但这么并不可能落得生成图片的目标,所早前边笔者又用到了convertCanvasToImage()函数
   
我再来讲一下对Safair的拍卖,safair就好像不扶助navigator.getUserMedia,再一大牌的赞助下,管理找到了另一种管理形式:
  便是调用safair本人的照相来兑现,sel.add伊夫ntListener(‘change’,
function (e卡塔尔(قطر‎{…}卡塔尔(قطر‎ 便是加多了
你选用的是拍照或然图片的风云,前面的receivedData(State of Qatar函数是对其的管理,个中的应当要做三个setTimeout,苹果的图形高水平,加载未有那么高效,为了让drawImage能够取到已经加载的图片要做三个延时,不然会取不到图片
   
为了缓慢解决程序管理图片速度慢的主题素材,笔者还加了三个loading图片,来增进顾客体验。
 
对了忘了说一下,safair拍出的图形是反着的,笔者也不明了怎么回事,大家有明白,希望指引一下!!!
         

// jquery reference //  //  Open WebCam      Snap Photo  

html5怎调用手机摄像头,达成拍照,拍片像实现上传功能够

PhoneGap是一个用基于HTML,CSS和JavaScript的,成立移动跨平台活动应用程序的火速支付平台。它使开采者能够运用摩托罗拉,Android,Palm,Symbian,WP7,Bada和Blackberry智能手提式有线电电话机的基本成效——包蕴地理定位,加快器,联系人,声音和振憾等,别的PhoneGap具有丰硕的插件,能够以此增添Infiniti的成效。PhoneGap是免费的,但是它要求一定平台提供的增大软件,比如中兴的SamsungSDK,Android的Android
SDK等,也能够和DW5.5配套开拓。使用PhoneGap只比为各个平台独家创造应用程序好一丢丢,因为就算基本代码是相符的,但是你照样必要为种种平台独家编译应用程序。
 

  1. javascript

    //// Elements for taking the snapshot var canvasPreview = document.getElementById; var canvasUpload = document.getElementById; var contextPreview = canvasPreview.getContext; var contextUpload = canvasUpload.getContext; //#################### Video Source #######################3 var videoElement = document.querySelector; var videoSelect = document.querySelector; navigator.mediaDevices.enumerateDevices.then.catch; videoSelect.onchange = getStream; function gotDevices { for (var i = 0; i < deviceInfos.length; ++i) { var deviceInfo = deviceInfos[i]; var option = document.createElement; option.value = deviceInfo.deviceId; if (deviceInfo.kind === ‘videoinput’) { option.text = deviceInfo.label || ‘camera ‘ + (videoSelect.length + 1); videoSelect.appendChild; } else { console.log(‘Found ome other kind of source/device: ‘, deviceInfo); } } } var _streamCopy = null; function getStream() { if { try { _streamCopy.stop(); // if this method doesn’t exist, the catch will be executed. } catch { _streamCopy.getVideoTracks; // then stop the first video track of the stream } } var constraints = { audio:false, video: { optional: [ { sourceId: videoSelect.value } ] } }; navigator.mediaDevices.getUserMedia.then.catch; } function gotStream { _streamCopy = stream; // make stream available to console videoElement.srcObject = stream; } function handleError { alert(error.name + “: ” + error.message); } //######################## End Video Source ################# // Get access to the camera! if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia.then { videoElement.src = window.URL.createObjectURL; videoElement.play; } else { document.getElementById.style.display = “none”; } //// Trigger photo take document.getElementById.addEventListener { contextPreview.drawImage(videoElement, 0, 0, 300, 224); contextUpload.drawImage(videoElement, 0, 0, 300, 224); document.getElementById.style.display = “none”; document.getElementById.style.display = “none”; document.getElementById.style.display = “block”; var image = document.getElementById.toDataURL; image = image.replace(‘data:image/jpeg;base64,’, ”); $.val; alert(“image value :” + image); }); //// Trigger photo take document.getElementById.addEventListener { document.getElementById.style.display = “block”; document.getElementById.style.display = “block”; document.getElementById.style.display = “block”; document.getElementById.style.display = “none”; });

html5调用手提式有线电话机录制头,实现拍照上传功能够

您能够看一下那一个篇作品,可能对你有赞助www.glve.net/…e.html
 

PC、Mobile调用摄像头(navigator.getUserMedia),html5录制头
废话少说,先贴上代码 html: 1 div id =”main” class =”masthead” 2 div id
=”face_scan_camera” c…

如有疑问请留言可能到本站社区调换座谈,多谢阅读,希望能支援到大家,谢谢我们对本站的支撑!

发表评论

电子邮件地址不会被公开。 必填项已用*标注