Asked by:
My website is not working

Question
-
User-527908287 posted
I built a website using visual studio community 2015 with database too; and after completion, I tested the website in visual studio machine and everything worked out fine but when i hosted site, some the web pages appears to display differently ESPECIALLY ON MOBILE PHONE DEVICE as the images did not cover the whole web page as they did when i used visual studio to run the site. Here is what I am talking about in the web address: (www.donald416-001-site1.htempurl.com), if you check some pages you will the images not covering the whole width of the page, and some are not covering the whole hieght of the page. Furthermore, my database is not connected when i tried to insert data in my site, but it worked on the local server.
I REALLY NEED ASSISTANCE PLEASE.
-Donald Symmons
Monday, April 6, 2020 9:30 AM
All replies
-
User-527908287 posted
Hello Charles,<br>
One of the issues I am having is described in a thread I posted earlier, Titled: NEED AN ASSISTANCE PLEASE. If you check one of my threads with that title you will see.<br>
Thank youMonday, April 6, 2020 2:53 PM -
User1535942433 posted
Hi Donald416,
if you check some pages you will the images not covering the whole width of the page, and some are not covering the whole hieght of the page.
Accroding to your description and codes,Could you tell us what is your image?The link your web address cann't open and I cann't find images in the page. Besides,I find the navbar-fixed-top and navbar-fixed-bottom are not full screen when reduce the screen.I create a demo to fixed navbar width for mobile device.
More details,you could refer to below codes:
.navbar { width:100%; !important; top:0px; } footer { width:100%; !important; }
Result:
my database is not connected when i tried to insert data in my site, but it worked on the local server.
Could you tell us what‘s wrong?I'm guessing that your TCP IP is limited access.
Best regards,
Yijing Sun
Tuesday, April 7, 2020 3:33 AM -
User-527908287 posted
Hello Yijing Sun,
Thank you for your assistance. I can see the output result, the navigation bar and footer has covered the width of the screen, but it looks like the span button on the navbar is not displaying well. Regarding the default page where you stated that you couldn’t find images, it is supposed to display webcam to scan QR code.
Let me give you full details of the issues I am facing; I used visual studio community 2015 to build a website that will save data into the database and will also read Bar and QR codes. After completion, I ran the website in my visual studio and it all displayed fine, data could be stored in the database, and the camera frame displays when I navigate to the webpage where it is supposed to read the code and output results. I later signed up to host the website online with a hosting company on a free trial basis; upon hosting the website I browsed it and discovered that the images I have in some pages are not covering full width and height of the screen in a mobile device. Also, the web cam will not display in Google Chrome or Firefox for me to scan Bar or QR codes, but it displays in Microsoft EDGE. Furthermore, I wanted the web page where I have the webcam display to automatically detect, and read Bar and QR codes without having to select the type of code and click the “scan” button to read code. It should automatically redirect me to the address of the scan result and not in a textbox. I hope I have been able to give you an understanding of my issues.
NOTE: I installed the reference, Bytescout SDK tool for the QR and Bar code scan, and copied their sample code for Default2.aspx, FlashCamera.aspx.cs, HTML5.aspx.cs and webcam.js
I have attached all the codes I used for each page in my project below. I will please need more of your assistance to resolve this and I will be totally grateful if you help me out here. Thank you.
-Donald Symmons
DEFAULT2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Code Scan</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript" src="webcam.js"></script> <!-- this javascript plugin uses the webcam.swf file to capture image and send the image to server for further processing --> <script type="text/javascript"> var canvas, context, timer; var constraints = window.constraints = { audio: false, video: { facingMode: "environment" } // change to "user" for front camera, see https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode }; // (HTML5 based camera only) this portion of code will be used when browser supports navigator.getUserMedia ********* */ window.addEventListener("DOMContentLoaded", function () { canvas = document.getElementById("canvasU"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function (error) { console.log("Video capture error: ", error.code); }; // check if we can use HTML5 based camera (through mediaDevices.getUserMedia() function) if (navigator.mediaDevices.getUserMedia) { // Standard browser // display HTML5 camera document.getElementById("userMedia").style.display = ''; // adding click event to take photo from webcam document.getElementById("snap").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); }); navigator.mediaDevices .getUserMedia(constraints) .then(handleSuccess) .catch(handleError); } // check if we can use HTML5 based camera (through .getUserMedia() function in Webkit based browser) else if (navigator.webkitGetUserMedia) { // WebKit-prefixed for Google Chrome // display HTML5 camera document.getElementById("userMedia").style.display = ''; // adding click event to take photo from webcam document.getElementById("snap").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); }); navigator.webkitGetUserMedia(videoObj, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } // check if we can use HTML5 based camera (through .getUserMedia() function in Firefox based browser) else if (navigator.mozGetUserMedia) { // moz-prefixed for Firefox // display HTML5 camera document.getElementById("userMedia").style.display = ''; // adding click event to take photo from webcam document.getElementById("snap").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); }); navigator.mozGetUserMedia(videoObj, function (stream) { video.mozSrcObject = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else // if we can not use any of HTML5 based camera ways then we use Flash based camera { // display Flash camera document.getElementById("flashDiv").style.display = ''; document.getElementById("flashOut").innerHTML = (webcam.get_html(640, 480)); } }, false); // (all type of camera) set the default selection of barcode type var selection = "All barcodes (slow)"; // (all type of camera) gets the selection text of "barcode type to scan" combobox function selectType(type) { selection = type.options[type.selectedIndex].text; } function handleSuccess(stream) { var video = document.querySelector('video'); var videoTracks = stream.getVideoTracks(); console.log('Got stream with constraints:', constraints); console.log(`Using video device: ${videoTracks[0].label}`); window.stream = stream; // make variable available to browser console video.srcObject = stream; } function handleError(error) { if (error.name === 'ConstraintNotSatisfiedError') { var v = constraints.video; errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`); } else if (error.name === 'PermissionDeniedError') { errorMsg('Permissions have not been granted to use your camera and ' + 'microphone, you need to allow the page access to your devices in ' + 'order to work.'); } errorMsg(`getUserMedia error: ${error.name}`, error); } function errorMsg(msg, error) { var errorElement = document.querySelector('#errorMsg'); errorElement.innerHTML += `<p>${msg}</p>`; if (typeof error !== 'undefined') { console.error(error); } } // (HTML5 based camera only) // uploads the image to the server function UploadToCloud() { document.getElementById('report').innerHTML = "scanning current frame......"; context.drawImage(video, 0, 0, 640, 480); $("#upload").attr('disabled', 'disabled'); $("#upload").attr("value", "Uploading..."); var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1]; // send AJAX request to the server with image data $.ajax({ url: "HTML5Camera.aspx/Upload", type: "POST", data: "{ 'image': '" + img + "' , 'type': '" + selection + "'}", contentType: "application/json; charset=utf-8", dataType: "json", // on success output the result returned by the server side (See HTML5Camera.aspx) success: function (data, status) { $("#upload").removeAttr('disabled'); $("#upload").attr("value", "Upload"); if (data.d.length != 0) { var htmlSelect = document.getElementById('OutListBoxHTML5'); //var selectBoxOption = document.createElement("option"); //selectBoxOption.text = data.d; //selectBoxOption.id = "child"; //htmlSelect.insertBefore(selectBoxOption, htmlSelect.childNodes[0]); htmlSelect.value = data.d + "\r\n" + htmlSelect.value; } }, // on error just show the message that no barcodes were found error: function (data) { document.getElementById('report').innerHTML = "scanning..., no barcode found"; $("#upload").removeAttr('disabled'); $("#upload").attr("value", "Upload"); }, async: false }); timer = setTimeout(UploadToCloud, 3000); // will capture new image to detect barcode after 3000 mili second } // (flash based camera only) stop the capturing function stopCall() { document.getElementById('report').innerHTML = "Scanning STOPPED" clearTimeout(timer); } // (flash based camera only) sets the handler for callback completition to output the result Webcam.on('onComplete', 'my_completion_handler'); // (flash based camera only) this function will start flash to capture image and send the image to the server for further processing (for IE) function take_snapshot() { // set api to be called by flash camera webcam.set_api_url('FlashCamera.aspx?type=' + selection); webcam.set_quality(100); // enable the shutter sound webcam.set_shutter_sound(true); document.getElementById('upload_results').innerHTML = '<h4>Scanning...</h4>'; // capture image from the webcam webcam.snap(); // set timout to capter new image (interval between captures) timer = setTimeout(take_snapshot, 3000); } // (flash based camera only) this one will work after recieving barcode from server // this function writes the output result back to the front page (from server side) function my_completion_handler(msg) { var str = msg; // encode into html compatible string var result = str.match(/<d>(.*?)<\/d>/g).map(function (val) { return val.replace(/<\/?d>/g, ''); }); // add new result into the listbox var htmlSelect = document.getElementById('OutListBoxFlash'); //var selectBoxOption = document.createElement("option"); //selectBoxOption.text = result; //selectBoxOption.id = "child"; //htmlSelect.insertBefore(selectBoxOption, htmlSelect.childNodes[0]); htmlSelect.value = result + "\r\n" + htmlSelect.value; // reset webcam and flash to capture new image. this reset process flickers a little webcam.reset(); } // (flash based camera only) stop the scan and set the message on the page function stopScanning() { document.getElementById('upload_results').innerHTML = "Scanning STOPPED." clearTimeout(timer); } </script> <style> span { font-size:20px; } .center-page { width:300px; height:300px; ; top:0; bottom:0; left:0; right:0; margin:auto; } </style> </head> <body style=" background-color:#DCDCDC; overflow-x:hidden;"> <form id="form1" runat="server"> <div> <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="Searchweb.aspx" style="color: #FFFFFF">Center</a></li> <li><a href="Login.aspx" style="color: #FFFFFF">Sign up</a></li> <li><a href="PhoneCheck.aspx" style="color: #FFFFFF">Register Phone</a></li> <li><a href="Register.aspx" style="color: #FFFFFF">Phones</a></li> <li><a href="Default2.aspx" style="color: #FFFFFF">QR Code/BarCode Scan</a></li> </ul> </div> </div> </div> </div> <!-- HTML5 camera based capturing section --> <!-- this div block will be shown when browser supports get user media--> <div id="userMedia" style="display: none; height: 575px; width: 1182px"> <div style="text-align: left; align: top;"> <h3 style="color: #200662; margin-top:5%; margin-left:2%; font-size: large;">JOSCHECK BAR CODE AND QR CODE READER </h3> </div> <div class="row"> <div style="margin-left:3%"> <p>IMPORTANT: webcam access requires SSL connection! Otherwise, web camera will not initialize at all as it requies SSL connection only. </p> <p id="choiceU"><b style="font-size: medium;">Select Barcode Type To Scan (Click SCAN CODE below)</b></p> </div> <div> <div class="center-page" style="align: left; valign: top;"> <video id="video" width="300" height="250" autoplay playsinline muted></video> <!-- canvas with the output --> <canvas id="canvasU" width="640" height="480" style="display: none"></canvas> <br /> <select id="comboBoxBarCodeTypeHTML5" onchange="selectType(this)" style="width: 300px;"> <option value="1">All Barcodes (slow)</option> <option value="2">All Linear Barcodes (Code39, Code 128, EAN 13, UPCA, UPCE, etc.)</option> <option value="3">All 2D Barcodes (QR Code, Aztec, DataMatrix, PDF417, etc.)</option> <option value="4">Code 39c</option> <option value="5">Code 128</option> <option value="6">EAN 13</option> <option value="7">UPCA</option> <option value="8">GS1-128</option> <option value="9">GS1DataBarExpanded</option> <option value="10">GS1DataBarExpandedStacked </option> <option value="11">GS1DataBarLimited</option> <option value="12">GS1DataBarOmnidirectional</option> <option value="13">GS1DataBarStacked</option> <option value="14">I2of5</option> <option value="15">Intelligent Mail</option> <option value="16">Patch Code</option> <option value="17">PDF 417</option> <option value="18">QR Code</option> <option value="19">DataMatrix</option> <option value="20">Aztec</option> <option value="21">MaxiCode</option> </select> <br /> <span style="font-size: 20px;">Scan Result</span> <br /> <!-- decoding results appears in this listbox --> <textarea style="width: 300px; height: 80px;" size="8" id="OutListBoxHTML5"> </textarea> <br /> <input id="snap" style="color: black; font-weight: bold; font-size: medium;" type="button" onclick="UploadToCloud();" value="SCAN CODE" /> <input id="pause" style="color: black; font-weight: bold; font-size: medium;" type="button" onclick="stopCall();" value="STOP SCAN" /> <h4 id="report"></h4> </div> </div> </div> </div> <!-- Flash (SWF) camera based capturing section --> <!-- this div block will be shown when browser does not support user media so the only way is to capture with flash (swf) camera --> <div id="flashDiv" style=" display:none; "> <div> <tr align="left" valign="top"> <td colspan="2"><h3 style=" color:Green; " >(FLASH based camera) This works in Internet Explorer 9+, Chrome, Firefox and other browsers with flash support. To enable web-cam access answer ALLOW when asked if you want to give access to webcam </h3></td> </tr> <tr align="left" valign="top"> <td valign="top"> <h4 id="choice"> <b>Barcode Type To Scan (to start barcode scan - click START below)</b></h4> <br /> <select id="comboBoxBarCodeTypeFlash" onchange="selectType(this)"> <option value="1">All Barcodes (slow)</option> <option value="2">All Linear Barcodes (Code39, Code 128, EAN 13, UPCA, UPCE, etc.)</option> <option value="3">All 2D Barcodes (QR Code, Aztec, DataMatrix, PDF417, etc.)</option> <option value="4">Code 39</option> <option value="5">Code 128</option> <option value="6">EAN 13</option> <option value="7">UPCA</option> <option value="8">GS1-128</option> <option value="9">GS1DataBarExpanded</option> <option value="10">GS1DataBarExpandedStacked </option> <option value="11">GS1DataBarLimited</option> <option value="12">GS1DataBarOmnidirectional</option> <option value="13">GS1DataBarStacked</option> <option value="14">I2of5</option> <option value="15">Intelligent Mail</option> <option value="16">Patch Code</option> <option value="17">PDF 417</option> <option value="18">QR Code</option> <option value="19">DataMatrix</option> <option value="20">Aztec</option> <option value="21">MaxiCode</option> </select> <br /> <span style=" font-size:20px; ">Output barcode values read appears below: </span> <br /> <!-- decoding results appears in this listbox --> <textarea style="width:500px; height:100px;" size="8" id="OutListBoxFlash"> </textarea> <br /> <input type="button" style="color:black; font-weight:bold; font-size:x-large;" value="START READING BARCODES.." onclick="take_snapshot()"/> <br /> <input type="button" style="color:black; font-weight:bold; font-size:x-large;" value="STOP" onclick="stopScanning()"/> <br /> </div> <div id="upload_results" style="background-color:#eee;"></div> </td> <td> <div id="flashOut"> </div> </td> </tr> </div> <br /><br /><br /><br /><br /> <footer> <div class="navbar-fixed-bottom" style="background-color:#2A2A2A; width:auto; margin-top:5%;"> <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> · <a href="About - 2.aspx" style="color: red;">About Us</a> · <a href="#" style="color: red;">Contact</a> ·</p> <p style="color: white; text-align: center;">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p> </div> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
FLASHCAMERA.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Flashcamera.aspx.cs" Inherits="uploadimage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
Flashcamera.aspx.cs
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.IO; //For MemoryStream using System.Web.Services; //For WebMethod attribute using Bytescout.BarCodeReader; using System.Web.UI.HtmlControls; using System.Drawing; using System.Drawing.Imaging; using System.Threading; public partial class uploadimage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { try { String send = ""; System.Drawing.Image originalimg; // read barcode type set String type = Request.QueryString["type"].ToString(); MemoryStream log = new MemoryStream(); byte[] buffer = new byte[1024]; int c; // read input buffer with image and saving into the "log" memory stream while ((c = Request.InputStream.Read(buffer, 0, buffer.Length)) > 0) { log.Write(buffer, 0, c); } // create image object originalimg = System.Drawing.Image.FromStream(log); // resample image originalimg = originalimg.GetThumbnailImage(640, 480, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero); Bitmap bp = new Bitmap(originalimg); // create bytescout barcode reader object Reader reader = new Reader(); // set barcode type to read reader.BarcodeTypesToFind = GetBarcodeTypeToFindFromCombobox(type); // read barcodes from image reader.ReadFrom(bp); // if there are any result then convert them into a single stream if (reader.FoundBarcodes != null) { foreach (FoundBarcode barcode in reader.FoundBarcodes) { // form the output string send = send + (String.Format("{0} : {1}", barcode.Type, barcode.Value)); } } // close the memory stream log.Close(); // dispose the image object originalimg.Dispose(); // write output Response.Write("<d>" + send + "</d>"); } catch (Exception ex) { // write the exception if any Response.Write("<d>" + ex + "</d>"); } } public bool ThumbnailCallback() { return false; } /// <summary> /// Get symbology filter for the SDK from the combobox selection text /// </summary> /// <param name="barType"></param> /// <returns></returns> private static BarcodeTypeSelector GetBarcodeTypeToFindFromCombobox(string barType) { string selectedItemText = barType.Trim().ToUpper(); BarcodeTypeSelector barcodeTypeToScan = new BarcodeTypeSelector(); if (selectedItemText.IndexOf("ALL BARCODES") > -1) barcodeTypeToScan.SetAll(); else if (selectedItemText.IndexOf("ALL LINEAR BARCODES") > -1) barcodeTypeToScan.SetAll1D(); else if (selectedItemText.IndexOf("ALL 2D BARCODES") > -1) barcodeTypeToScan.SetAll2D(); else if (selectedItemText.IndexOf("AZTEC") > -1) barcodeTypeToScan.Aztec = true; else if (selectedItemText.IndexOf("CODABAR") > -1) barcodeTypeToScan.Codabar = true; else if (selectedItemText.IndexOf("CODE 39") > -1) barcodeTypeToScan.Code39 = true; else if (selectedItemText.IndexOf("CODE 128") > -1) barcodeTypeToScan.Code128 = true; else if (selectedItemText.IndexOf("DATAMATRIX") > -1) barcodeTypeToScan.DataMatrix = true; else if (selectedItemText.IndexOf("EAN 13") > -1) barcodeTypeToScan.EAN13 = true; else if (selectedItemText.IndexOf("GS1-128") > -1) barcodeTypeToScan.GS1 = true; else if (selectedItemText.IndexOf("GS1DATABAREXPANDED") > -1) barcodeTypeToScan.GS1DataBarExpanded = true; else if (selectedItemText.IndexOf("GS1DATABAREXPANDEDSTACKED") > -1) barcodeTypeToScan.GS1DataBarExpandedStacked = true; else if (selectedItemText.IndexOf("GS1DATABARLIMITED") > -1) barcodeTypeToScan.GS1DataBarLimited = true; else if (selectedItemText.IndexOf("GS1DATABAROMNIDIRECTIONAL") > -1) barcodeTypeToScan.GS1DataBarOmnidirectional = true; else if (selectedItemText.IndexOf("GS1DATABARSTACKED") > -1) barcodeTypeToScan.GS1DataBarStacked = true; else if (selectedItemText.IndexOf("I2OF5") > -1) barcodeTypeToScan.Interleaved2of5 = true; else if (selectedItemText.IndexOf("INTELLIGENT MAIL") > -1) barcodeTypeToScan.IntelligentMail = true; else if (selectedItemText.IndexOf("PATCH") > -1) barcodeTypeToScan.PatchCode = true; else if (selectedItemText.IndexOf("PDF 417") > -1) barcodeTypeToScan.PDF417 = true; else if (selectedItemText.IndexOf("QR CODE") > -1) barcodeTypeToScan.QRCode = true; else if (selectedItemText.IndexOf("UPCA") > -1) barcodeTypeToScan.UPCA = true; else if (selectedItemText.IndexOf("UPCE") > -1) barcodeTypeToScan.UPCE = true; else if (selectedItemText.IndexOf("MAXICODE") > -1) barcodeTypeToScan.MaxiCode = true; return barcodeTypeToScan; } }
Homepage.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Homepage.aspx.cs" Inherits="Homepage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Home</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> .center-page { width:300px; height:300px; ; top:0; bottom:0; left:0; right:0; margin:auto; } </style> </head> <body style=" background-color:#DCDCDC; overflow-x:hidden;"> <form id="form1" runat="server"> <div> <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li> <li><a href="#" style="color: #FFFFFF">Services</a></li> <li><a href="Login.aspx"style="color: #FFFFFF">Sign Up</a></li> </ul> </div> </div> </div> </div> <div class="jumbotron" style="margin-top: 3%; background-image: url('images/bizcard.jpg'); margin-top:0%; height: 628px; background-size: 100% 100%;"> <div class="center-page"; style="margin-top:7%;"> <h1 style="font-size:x-large; font-family: Co Headline Corp; color:red;">Login</h1><hr style="color:#200662";/><br /> <div class="col-xs-11" style="margin-left:-12%;"> <asp:Label ID="Label1" ForeColor="#200662" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="USERNAME"></asp:Label> <div class="col-xs-11"> <asp:TextBox ID="Username" CssClass="form-control" Width="350px" BorderStyle="None" runat="server" placeholder="Username"></asp:TextBox> </div> </div> <div class="col-xs-11" style="margin-top:20px; margin-left:-12%;"> <asp:Label ID="Label2" ForeColor="#200662" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="PASSWORD"></asp:Label> <div class="col-xs-11"> <asp:TextBox ID="Password" CssClass="form-control" Width="350px" BorderStyle="None" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox> </div> </div> <div class="col-xs-11" style="margin-top:20px; margin-left:-12%;"> <div class="row"> <asp:Button ID="Button1" runat="server" Text="Login" Font-Size="larger" Class="btn btn-success" OnClick="Button1_Click" /> <asp:HyperLink ID="HyperLink1" runat="server" href="Login.aspx" Font-Bold="true" Font-Size="medium" ForeColor="red">SIGN UP HERE</asp:HyperLink> </div> </div> <div class="col-xs-11" style="margin-top: 10px; margin-left:-12%;"> <asp:Label ID="Label7" runat="server"></asp:Label> </div> </div> </div> <footer> <div class="navbar-fixed-bottom" style="background-color:#2A2A2A; width:auto; margin-top:0%;"> <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> · <a href="About - 2.aspx" style="color: red;">About Us</a> · <a href="#" style="color: red;">Contact</a> ·</p> <p style="color: white; text-align: center;">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p> </div> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Homepage.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.SqlClient; public partial class Homepage : System.Web.UI.Page { SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security=True"); protected void Page_Load(object sender, EventArgs e) { Label7.Dispose(); } protected void Button1_Click(object sender, EventArgs e) { { string check = "select count(*) from [Login] where user_name = '" + Username.Text + "' and pass = '" + Password.Text + "' "; SqlCommand com = new SqlCommand(check, con); con.Open(); int temp = Convert.ToInt32(com.ExecuteScalar().ToString()); con.Close(); if (temp == 1) { Username.Text = ""; Password.Text = ""; Response.Redirect("Searchweb.aspx"); } else { Label7.ForeColor = System.Drawing.Color.Red; Label7.Text = "Invalid Username or Password"; Username.Text = ""; Password.Text = ""; } } } }
HTML5Camera.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HTML5Camera.aspx.cs" Inherits="Camera" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
HTML5Camera.aspx.cs
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.IO; //For MemoryStream using System.Web.Services; //For WebMethod attribute using Bytescout.BarCodeReader; using System.Web.UI.HtmlControls; using System.Drawing; using System.Drawing.Imaging; using System.Threading; using System.Text; public partial class Camera : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } /// <summary> /// Takes the base64 encoded image from the browser /// and tries to read barodes from it /// </summary> /// <param name="image"></param> /// <param name="type"></param> /// <returns></returns> [WebMethod] public static string Upload(string image, string type) { try { StringBuilder send = new StringBuilder(); // lock by send variable lock (send) { // Convert base64 string from the client side into byte array byte[] bitmapArrayOfBytes = Convert.FromBase64String(image); // Create Bytescout.BarCodeReader.Reader object Reader reader = new Reader(); // Get the barcode type from user's selection in the combobox reader.BarcodeTypesToFind = GetBarcodeTypeToFindFromCombobox(type); // Read barcodes from image bytes reader.ReadFromMemory(bitmapArrayOfBytes); // Check whether the barcode is decoded if (reader.FoundBarcodes != null) { // Add each decoded barcode into the string foreach (FoundBarcode barcode in reader.FoundBarcodes) { // Add barcodes as text into the output string send.AppendLine(String.Format("{0} : {1}", barcode.Type, barcode.Value)); } } // Return the output string as JSON return send.ToString(); } } catch (Exception ex) { // return the exception instead return (ex.Message + "\r\n" + ex.StackTrace); } } /// <summary> /// Get symbology filter for the SDK from the combobox selection text /// </summary> /// <param name="barType"></param> /// <returns></returns> private static BarcodeTypeSelector GetBarcodeTypeToFindFromCombobox(string barType) { string selectedItemText = barType.Trim().ToUpper(); BarcodeTypeSelector barcodeTypeToScan = new BarcodeTypeSelector(); if (selectedItemText.IndexOf("ALL BARCODES") > -1) barcodeTypeToScan.SetAll(); else if (selectedItemText.IndexOf("ALL LINEAR BARCODES") > -1) barcodeTypeToScan.SetAll1D(); else if (selectedItemText.IndexOf("ALL 2D BARCODES") > -1) barcodeTypeToScan.SetAll2D(); else if (selectedItemText.IndexOf("AZTEC") > -1) barcodeTypeToScan.Aztec = true; else if (selectedItemText.IndexOf("CODABAR") > -1) barcodeTypeToScan.Codabar = true; else if (selectedItemText.IndexOf("CODE 39") > -1) barcodeTypeToScan.Code39 = true; else if (selectedItemText.IndexOf("CODE 128") > -1) barcodeTypeToScan.Code128 = true; else if (selectedItemText.IndexOf("DATAMATRIX") > -1) barcodeTypeToScan.DataMatrix = true; else if (selectedItemText.IndexOf("EAN 13") > -1) barcodeTypeToScan.EAN13 = true; else if (selectedItemText.IndexOf("GS1-128") > -1) barcodeTypeToScan.GS1 = true; else if (selectedItemText.IndexOf("GS1DATABAREXPANDED") > -1) barcodeTypeToScan.GS1DataBarExpanded = true; else if (selectedItemText.IndexOf("GS1DATABAREXPANDEDSTACKED") > -1) barcodeTypeToScan.GS1DataBarExpandedStacked = true; else if (selectedItemText.IndexOf("GS1DATABARLIMITED") > -1) barcodeTypeToScan.GS1DataBarLimited = true; else if (selectedItemText.IndexOf("GS1DATABAROMNIDIRECTIONAL") > -1) barcodeTypeToScan.GS1DataBarOmnidirectional = true; else if (selectedItemText.IndexOf("GS1DATABARSTACKED") > -1) barcodeTypeToScan.GS1DataBarStacked = true; else if (selectedItemText.IndexOf("I2OF5") > -1) barcodeTypeToScan.Interleaved2of5 = true; else if (selectedItemText.IndexOf("INTELLIGENT MAIL") > -1) barcodeTypeToScan.IntelligentMail = true; else if (selectedItemText.IndexOf("PATCH") > -1) barcodeTypeToScan.PatchCode = true; else if (selectedItemText.IndexOf("PDF 417") > -1) barcodeTypeToScan.PDF417 = true; else if (selectedItemText.IndexOf("QR CODE") > -1) barcodeTypeToScan.QRCode = true; else if (selectedItemText.IndexOf("UPCA") > -1) barcodeTypeToScan.UPCA = true; else if (selectedItemText.IndexOf("UPCE") > -1) barcodeTypeToScan.UPCE = true; else if (selectedItemText.IndexOf("MAXICODE") > -1) barcodeTypeToScan.MaxiCode = true; return barcodeTypeToScan; } }
Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Login</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"/> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> .form-horizontal { line-height: 1.33; letter-spacing: -.5px; margin-bottom: 5px; margin-top:0%; } </style> </head> <body style="background-color: #DCDCDC; background-image: url('images/Dox.png'); overflow-x: hidden;"> <form id="form1" runat="server"> <div> <div class=" navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #200662; font-family: Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #200662; font-family: Nunito;"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="Home.aspx" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li> <li><a href="#" style="color: #FFFFFF">Services</a></li> </ul> </div> </div> </div> </div> <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:100px;"> <div class="container"> <br /><br /> <h1 style="color: red; margin-top:-3%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification Search Our Database For Verification</h1> </div> </div> <!--login start--> <div class="container"> <div class="row"> <div class="form-horizontal col-md-6"> <h1 style="font-size:x-large; margin-top:0%; color:red;">Sign Up Here</h1><hr /> <br /> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label3" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="E-mail"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="emtxt" CssClass="form-control" Width="300px" runat="server" placeholder="Email Address"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label5" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Username"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="signutxt" CssClass="form-control" Width="300px" runat="server" placeholder="Choose Username"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label6" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="passtxt" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label4" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Confirm Password"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="conpass" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:Button ID="Button2" runat="server" Width="300" Text="Sign Up" Font-Size="larger" Class="btn btn-success" OnClick="Button2_Click" /> <br /> <asp:Label ID="info" runat="server"></asp:Label> <br /> </div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:CheckBox ID="check1" runat="server" /> <asp:Label ID="checklabel" runat="server" class="control-label" Text="By Signing up you agree to the Terms & Conditons of Joscheck"></asp:Label> </div> </div> </div> <div class="col-md-6" style="margin-top: 7%;"> <img src="images/joscheck.jpg" class="image-fluid" width="450" height="240"/> </div> </div> </div> <hr /><footer class="container" style="background-color:black; width:auto; height:300px;"> <p class="pull-right"><a href="#" style="color: red;">Back to Top</a></p> <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> · <a href="About - 2.aspx" style="color: red;">About Us</a> · <a href="#" style="color: red;">Contact</a> ·</p> <p style="color: gray; text-align:center; font-size:small; margin-top:3%;">Contact Address: 10 Adetokunbo Ademola Cresent</p> <p style="color: gray; text-align:center;font-size:small;">Wuse Zone 1 Abuja, F.C.T</p> <p style="color: gray; text-align:center;font-size:small;">08138709222 08037445843 08023456781</p> <br /><br /><asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebook.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/gplus.png" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink3" runat="server" ImageUrl="~/images/twitter.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink> <br /><br /><br /><p class="pull-center">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Login.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.SqlClient; public partial class Login : System.Web.UI.Page { SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security=True"); protected void Page_Load(object sender, EventArgs e) { } protected void Button2_Click(object sender, EventArgs e) { SqlCommand cmd = new SqlCommand(); con.Open(); cmd.CommandText = "Select * from [Login] where mail=@email"; cmd.Parameters.AddWithValue("@email", emtxt.Text); cmd.Connection = con; SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { info.Visible = true; info.Text = "e-mail already exists"; info.ForeColor = System.Drawing.Color.Red; emtxt.Text = ""; signutxt.Text = ""; } else { con.Close(); if (emtxt.Text != "" & signutxt.Text != "" & passtxt.Text != "" & conpass.Text != "") { if (conpass.Text == passtxt.Text) { string ins = "insert into [Login](mail, user_name, pass, conpass) values('" + emtxt.Text + "','" + signutxt.Text + "','" + passtxt.Text + "', '" + conpass.Text + "')"; SqlCommand com = new SqlCommand(ins, con); con.Open(); com.ExecuteNonQuery(); info.Text = "Sign Up Successful"; info.ForeColor = System.Drawing.Color.Green; emtxt.Text = ""; signutxt.Text = ""; passtxt.Text = ""; conpass.Text = ""; con.Close(); Response.Redirect("Searchweb.aspx"); } else { info.Visible = true; info.Text = "Passwords don't match"; info.ForeColor = System.Drawing.Color.Red; passtxt.Text = ""; conpass.Text = ""; } } else { info.ForeColor = System.Drawing.Color.Red; info.Text = "*All Fields Are Required*"; } } } }
Register.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Register.aspx.cs" Inherits="Register" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Registration</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"/> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> @media(min-width:992px){ .col-md-6:not(:first-child) { } .col-md-6:not(:last-child) { border-right:1px solid #200662; } } </style> </head> <body style="background-color:#DCDCDC; background-image: url('images/Dox.png');"> <form id="form1" runat="server"> <div> <div class=" navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #200662; font-family: Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #200662; color: white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="Home.aspx" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Searchweb.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="About.aspx" style="color: #FFFFFF">About Us</a></li> <li><a href="Report.aspx" style="color: #FFFFFF">Report Stolen Vehicle</a></li> </ul> </div> </div> </div> </div> <div class="jumbotron" style="margin-top:20px; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:170px;"> <div class="container"> <h1 style="color: #200662; margin-top: 0%; font-family: St Ryde; font-size: xx-large">JosCheck Vehicle Registration and Search</h1> <h1 style="color: #200662; margin-top: -1%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification Search Our Database For Verification</h1> <p> <i style="color: red; margin-top: -2%; font-family: Tombouctou DEMO; font-size: large; font-style: normal">Search and/or Register Your Vehicle</i> </p> </div> </div> <!--login start--> <br/> <div class="container" style="margin-top:-2%;"> <div class="form-horizontal col-md-6" style="margin-left:0%;"> <h1 style="font-size:x-large; margin-top:0%; color:#200662;">Vehicle Check</h1> <h1 style="font-size:small; margin-top:0%; color:red;">Check That Vehicle for Verification Before Purchase</h1><hr style="color:#200662";/><br /> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label6" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="V.I.N"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Vehicle Inspection Number"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-md-2"></div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:Button ID="Button1" runat="server" Width="300" Text="Search" Font-Size="larger" Class="btn btn-success" OnClick="Button1_Click" /> <br /> <asp:Label ID="Label8" runat="server"></asp:Label> <hr style="color:red";/> </div> </div> </div> <div class="container"> <div class="form-horizontal col-md-6"> <h1 style="font-size:x-large; margin-top:0%; color:#200662;">Vehicle Registration</h1> <h1 style="font-size:small; margin-top:0%; color:red;">Register Your Vehicle Here</h1><hr /> <br /> <div class="page"> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Full Name"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Nametext" CssClass="form-control" runat="server" Width="300px" placeholder="Full Name"></asp:TextBox> <%--<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" CssClass="text-danger" runat="server" ErrorMessage="Username Field is Required!" ControlToValidate="Username"></asp:RequiredFieldValidator>--%> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label2" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Vehicle Inspection Number"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="vintext" CssClass="form-control" runat="server" Width="300px" placeholder="Vehicle Inspection Number"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label3" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Vehicle Model"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="modeltext" CssClass="form-control" runat="server" Width="300px" placeholder="Vehicle Model E.g Ford Explorer"></asp:TextBox> <%--<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" CssClass="text-danger" runat="server" ErrorMessage="Username Field is Required!" ControlToValidate="Username"></asp:RequiredFieldValidator>--%> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label4" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Phone Number"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="phonetext" CssClass="form-control" runat="server" Width="300px" placeholder="Phone Number"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label5" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="E-mail Address"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="mailtext" CssClass="form-control" runat="server" Width="300px" placeholder="E-mail"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:Button ID="btnreg" runat="server" Text="SUBMIT" Font-Size="Larger" margin-left="100px" class="btn btn-success" Width="295px" OnClick="btnreg_Click" /> <br /> <br /> <asp:Label ID="Labelreg" runat="server" Font-Bold="True" Font-Italic="True" Font-Size="Medium" ForeColor="#000099"></asp:Label> <br /> <br /> <br /> </div> </div> </div> </div> </div> </div> <!--Login end--> <footer class="container" style="background-color:black; width:auto; height:300px;"> <p class="pull-right"><a href="#" style="color: red;">Back to Top</a></p> <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> · <a href="About - 2.aspx" style="color: red;">About Us</a> · <a href="#" style="color: red;">Contact</a> ·</p> <p style="color: gray; text-align:center; font-size:small; margin-top:3%;">Contact Address: 10 Adetokunbo Ademola Cresent</p> <p style="color: gray; text-align:center;font-size:small;">Wuse Zone 1 Abuja, F.C.T</p> <p style="color: gray; text-align:center;font-size:small;">08138709222 08037445843 08023456781</p> <br /><br /><asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebook.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/gplus.png" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink3" runat="server" ImageUrl="~/images/twitter.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink> <br /><br /><br /><p class="pull-center">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Register.aspx.cs
using System; using System.Collections.Generic; using System.Data; using System.Web.Security; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Data.SqlClient; public partial class Register : System.Web.UI.Page { SqlCommand cmd = new SqlCommand(); SqlDataAdapter sda = new SqlDataAdapter(); DataSet ds = new DataSet(); SqlConnection con = new SqlConnection(); protected void Page_Load(object sender, EventArgs e) { con.ConnectionString = "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security=True"; } protected void btnreg_Click(object sender, EventArgs e) { SqlCommand cmd = new SqlCommand(); con.Open(); cmd.CommandText = "Select * from [Register] where vin=@number"; cmd.Parameters.AddWithValue("@number", vintext.Text); cmd.Connection = con; SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { Labelreg.Visible = true; Labelreg.Text = "VIN already exists, Insert New VIN"; Labelreg.ForeColor = System.Drawing.Color.Red; vintext.Text = ""; } else { con.Close(); if (Nametext.Text != "" & vintext.Text != "" & modeltext.Text != "" & phonetext.Text != "" & mailtext.Text != "") { string ins = "insert into [Register](fname, vin, model, phone_n, mail) values('" + Nametext.Text + "','" + vintext.Text + "','" + modeltext.Text + "','" + phonetext.Text + "','" + mailtext.Text + "')"; { SqlCommand com = new SqlCommand(ins, con); con.Open(); com.ExecuteNonQuery(); Labelreg.Text = "Vehicle Successfully Registered"; Labelreg.ForeColor = System.Drawing.Color.Green; Nametext.Text = ""; vintext.Text = ""; modeltext.Text = ""; phonetext.Text = ""; mailtext.Text = ""; // Response.Redirect("Register.aspx"); } con.Close(); } else { Labelreg.ForeColor = System.Drawing.Color.Red; Labelreg.Text = "*All Fields Are Required*"; } } Label8.Text = ""; } protected void Button1_Click(object sender, EventArgs e) { Labelreg.Text = ""; { string user = Username.Text.Trim(); cmd.CommandText = "select * from Report where chass_re='" + Username.Text + "'"; cmd.Connection = con; sda.SelectCommand = cmd; sda.Fill(ds, "detail"); if (ds.Tables[0].Rows.Count > 0) { Session["user"] = user; Response.Redirect("Information.aspx"); } else { ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", "alert('Wrong or Empty Data, Please provide the correct VIN');", true); Username.Text = ""; } } } }
Searchweb.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Searchweb.aspx.cs" Inherits="Searchweb" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Search</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"/> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> .title { line-height: 1.33; letter-spacing: -.5px; margin-bottom: 5px; margin-top:0%; } .desc { margin-bottom: 50px; margin-top: 12px; line-height: 1.7; } </style> </head> <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;"> <form id="form1" runat="server"> <div> <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Searchweb.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="About.aspx" style="color: #FFFFFF">About</a></li> <li><a href="Register.aspx" style="color: #FFFFFF">Cars</a></li> <li><a href="PhoneCheck.aspx" style="color: #FFFFFF">Phones</a></li> <li><a href="Scanner.aspx" style="color: #FFFFFF">QR Code/BarCode Scan</a></li> </ul> </div> </div> </div> </div> <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:160px;"> <div class="container"> <br /><br /> <h1 style="color: red; margin-top:-3%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification Search Our Database For Verification</h1> </div> </div> <div class="jumbotron" style="margin-top:-8%; background-image: url('images/homeimg.jpg'); height:350px;background-size: 100% 100%;"> <h1 style="color: #200662; margin-left: 10%; font-size: x-large; font-family: Co Headline Corp">Search <i style="color:white; font-size: x-large; font-family: Co Headline Corp">JOSCHECK</i> System for Vehicles, Phones and verify Product(s) Purchased</h1> <p style="margin-left:10%;"> <i style="color: red; font-family:St Ryde; font-size:large; font-style:normal">1. Check Vehicles For Verification Before Purchase</i></p> <p style="margin-left:10%;"> <i style="color: red; font-family:St Ryde; font-size:large; font-style:normal">2. Check Phones For Verification Before Purchase</i></p> <p style="margin-left:10%;"> <i style="color: red; font-family:St Ryde; font-size:large; font-style:normal">3. Bar Code Product Verification</i></p> </div> <div> <p style="color:#200662; text-align: left; margin-left:2%; font-family:Verdana; font-size:small; margin-top:-2%;"> Guard against Vehicle and Phone Theft; Verify Authentic Products</p> <p style="margin-left:2%; color:#200662; font-family:St Ryde; font-size:smaller; margin-top:-1%;">Be first to register your Car or Phone and prevent it from being stolen. You can also verify the authenticity of the product you buy with Bar Code Scan</p> </div> <div> <h1 style="font-size:large; font-family:Comic Sans MS; color:#200662; margin-left:2%;">VISION...</h1> <p style="font-size:small; font-family:Verdana; margin-left:2%;">The predominant discourse, familiar since from the 1990s, emphasizes infrastructure as one of the principal entities in a global system of development. The process of moving a society from a traditional subsistent level towards a modern and scientific stage is one of the most perplexing issues facing many nations in the developing world. What is at hand is a conflict between the seemingly non-dynamic forces of traditions and the systematic growth orientation of modernization (Myrdal, 1970). Given these conditions, the process of promoting development is essentially one of organizing and combining various elements in what Mosher terms the 'institutional milieu' of development [1966. 1976]. These elements consist of a nation’s customs and traditions, ideology, physical resources and education.</p> </div> <br /><br /><br /> <div style="background-color:#200662; width:auto; height:400%;",> <!-- Example row of columns --> <div class="row" style="margin-left:1%;"> <div class="section"> <div class="col-lg-4"> <img src="images/amg-1889366_1280.png" alt="Toyota-2016-Lineup" width="200" height="100"/> <h2 style="color: darkorange; margin-top: 0; font-size: larger; font-family: St Ryde;">Car Verification and Tracking</h2> <p style="color:white;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> <div class="col-md-4"> <img src="images/2018-Mercedes-Benz-C-300-Sedan.png" alt="fleetimg" width="200" height="100"/> <h2 style="color: darkorange; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone Verification and Tracking</h2> <p style=" color: white;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> <div class="col-md-4"> <img src="images/imgbenz.png" alt="imgbenz" width="200" height="100"/> <h2 style="color: darkorange; margin-top: 0; font-size: larger; font-family: St Ryde;">Bar Code/QR Code Verification</h2> <p style=" color:white;">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Ut fermentum justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> <br /> </div> <div style="background-color:white; margin-top:0%"> <p style="color: red; margin-left: 2%; font-family: Lucida Sans Unicode; font-size: medium;">FEATURES</p> <br /> <!--middle content--> <div class="container" style="margin-top: 0%;"> <div class="row"> <div class="col-md-6" style="margin-top: 3%;"> <img src="images/Toyota-2016-Lineup.png" class="image-fluid" width="450" /> </div> <div class="col-md-6 text-left col-z-index"> <h1 class="title" style="font-size: medium; color: #200662; margin-top:3%; font-family: Co Headline Corp;">GET YOUR CAR(S) FULLY VERIFIED</h1> <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. </h4> </div> </div> </div> <!--middle content end--> <!--middle content2--> <div class="container" style="margin-top: 0%;"> <div class="row"> <div class="col-md-6" style="margin-top: 3%;"> <img src="images/joscheck1.jpg" class="image-fluid" width="450" height="190" /> </div> <div class="col-md-6 text-left col-z-index"> <h1 class="title" style="font-size: medium; color: #200662; margin-top:3%; font-family: Co Headline Corp;">GET YOUR PHONE(S) FULLY VERIFIED</h1> <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. </h4> </div> </div> </div> <!--middle content2 end--> <!--middle content3--> <div class="container" style="margin-top: 0%;"> <div class="row"> <div class="col-md-6" style="margin-top: 2%;"> <img src="images/BarCode img.png" class="image-fluid" width="450" height="180" /> </div> <div class="col-md-6 text-left col-z-index"> <h1 class="title" style="font-size: medium; color: #200662; margin-top:3%; font-family: Co Headline Corp;">GET YOUR PRODUCT(S) FULLY VERIFIED</h1> <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular. </h4> </div> </div> </div> <!--middle content3 end--> </div> <footer class="container" style="background-color:black; width:auto; height:250px;"> <p class="pull-right"><a href="#" style="color: red;">Back to Top</a></p> <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> · <a href="About - 2.aspx" style="color: red;">About Us</a> · <a href="#" style="color: red;">Contact</a> ·</p> <p style="color: gray; text-align:center; font-size:small; margin-top:3%;">Contact Address: Nigerian Merit Award House</p> <p style="color: gray; text-align:center;font-size:small;">Maitama District Abuja, F.C.T</p> <p style="color: gray; text-align:center;font-size:small;">08138709222 08037445843 08023456781</p> <br /><br /> <div style="float:right;"><asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebook-icon.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/twitter-icon.png" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink3" runat="server" height="20" ImageUrl="~/images/gplus-32.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink> <asp:HyperLink ID="HyperLink4" runat="server" height="20" ImageUrl="~/images/linkedin-icon.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink></div> <br /><br /><p style="color:white;">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
webcam.js
// WebcamJS v1.0.25 // Webcam library for capturing JPEG/PNG images in JavaScript // Attempts getUserMedia, falls back to Flash // Author: Joseph Huckaby: http://github.com/jhuckaby // Based on JPEGCam: http://code.google.com/p/jpegcam/ // Copyright (c) 2012 - 2017 Joseph Huckaby // Licensed under the MIT License (function (window) { var _userMedia; // declare error types // inheritance pattern here: // https://stackoverflow.com/questions/783818/how-do-i-create-a-custom-error-in-javascript function FlashError() { var temp = Error.apply(this, arguments); temp.name = this.name = "FlashError"; this.stack = temp.stack; this.message = temp.message; } function WebcamError() { var temp = Error.apply(this, arguments); temp.name = this.name = "WebcamError"; this.stack = temp.stack; this.message = temp.message; } var IntermediateInheritor = function () { }; IntermediateInheritor.prototype = Error.prototype; FlashError.prototype = new IntermediateInheritor(); WebcamError.prototype = new IntermediateInheritor(); var Webcam = { version: '1.0.25', // globals protocol: location.protocol.match(/https/i) ? 'https' : 'http', loaded: false, // true when webcam movie finishes loading live: false, // true when webcam is initialized and ready to snap userMedia: true, // true when getUserMedia is supported natively iOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream, params: { width: 0, height: 0, dest_width: 0, // size of captured image dest_height: 0, // these default to width/height image_format: 'jpeg', // image format (may be jpeg or png) jpeg_quality: 90, // jpeg image quality from 0 (worst) to 100 (best) enable_flash: true, // enable flash fallback, force_flash: false, // force flash mode, flip_horiz: false, // flip image horiz (mirror mode) fps: 30, // camera frames per second upload_name: 'webcam', // name of file in upload post data constraints: null, // custom user media constraints, swfURL: '', // URI to webcam.swf movie (defaults to the js location) flashNotDetectedText: 'ERROR: No Adobe Flash Player detected. Webcam.js relies on Flash for browsers that do not support getUserMedia (like yours).', noInterfaceFoundText: 'No supported webcam interface found.', unfreeze_snap: true, // Whether to unfreeze the camera after snap (defaults to true) iosPlaceholderText: 'Click here to open camera.', user_callback: null, // callback function for snapshot (used if no user_callback parameter given to snap function) user_canvas: null // user provided canvas for snapshot (used if no user_canvas parameter given to snap function) }, errors: { FlashError: FlashError, WebcamError: WebcamError }, hooks: {}, // callback hook functions init: function () { // initialize, check for getUserMedia support var self = this; // Setup getUserMedia, with polyfill for older browsers // Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia this.mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ? navigator.mediaDevices : ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? { getUserMedia: function (c) { return new Promise(function (y, n) { (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n); }); } } : null); window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; this.userMedia = this.userMedia && !!this.mediaDevices && !!window.URL; if (this.iOS) { this.userMedia = null; } // Older versions of firefox (< 21) apparently claim support but user media does not actually work if (navigator.userAgent.match(/Firefox\D+(\d+)/)) { if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null; } // Make sure media stream is closed when navigating away from page if (this.userMedia) { window.addEventListener('beforeunload', function (event) { self.reset(); }); } }, exifOrientation: function (binFile) { // extract orientation information from the image provided by iOS // algorithm based on exif-js var dataView = new DataView(binFile); if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { console.log('Not a valid JPEG file'); return 0; } var offset = 2; var marker = null; while (offset < binFile.byteLength) { // find 0xFFE1 (225 marker) if (dataView.getUint8(offset) != 0xFF) { console.log('Not a valid marker at offset ' + offset + ', found: ' + dataView.getUint8(offset)); return 0; } marker = dataView.getUint8(offset + 1); if (marker == 225) { offset += 4; var str = ""; for (n = 0; n < 4; n++) { str += String.fromCharCode(dataView.getUint8(offset + n)); } if (str != 'Exif') { console.log('Not valid EXIF data found'); return 0; } offset += 6; // tiffOffset var bigEnd = null; // test for TIFF validity and endianness if (dataView.getUint16(offset) == 0x4949) { bigEnd = false; } else if (dataView.getUint16(offset) == 0x4D4D) { bigEnd = true; } else { console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)"); return 0; } if (dataView.getUint16(offset + 2, !bigEnd) != 0x002A) { console.log("Not valid TIFF data! (no 0x002A)"); return 0; } var firstIFDOffset = dataView.getUint32(offset + 4, !bigEnd); if (firstIFDOffset < 0x00000008) { console.log("Not valid TIFF data! (First offset less than 8)", dataView.getUint32(offset + 4, !bigEnd)); return 0; } // extract orientation data var dataStart = offset + firstIFDOffset; var entries = dataView.getUint16(dataStart, !bigEnd); for (var i = 0; i < entries; i++) { var entryOffset = dataStart + i * 12 + 2; if (dataView.getUint16(entryOffset, !bigEnd) == 0x0112) { var valueType = dataView.getUint16(entryOffset + 2, !bigEnd); var numValues = dataView.getUint32(entryOffset + 4, !bigEnd); if (valueType != 3 && numValues != 1) { console.log('Invalid EXIF orientation value type (' + valueType + ') or count (' + numValues + ')'); return 0; } var value = dataView.getUint16(entryOffset + 8, !bigEnd); if (value < 1 || value > 8) { console.log('Invalid EXIF orientation value (' + value + ')'); return 0; } return value; } } } else { offset += 2 + dataView.getUint16(offset + 2); } } return 0; }, fixOrientation: function (origObjURL, orientation, targetImg) { // fix image orientation based on exif orientation data // exif orientation information // http://www.impulseadventure.com/photo/exif-orientation.html // link source wikipedia (https://en.wikipedia.org/wiki/Exif#cite_note-20) var img = new Image(); img.addEventListener('load', function (event) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // switch width height if orientation needed if (orientation < 5) { canvas.width = img.width; canvas.height = img.height; } else { canvas.width = img.height; canvas.height = img.width; } // transform (rotate) image - see link at beginning this method switch (orientation) { case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break; case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break; case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break; case 5: ctx.transform(0, 1, 1, 0, 0, 0); break; case 6: ctx.transform(0, 1, -1, 0, img.height, 0); break; case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break; case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break; } ctx.drawImage(img, 0, 0); // pass rotated image data to the target image container targetImg.src = canvas.toDataURL(); }, false); // start transformation by load event img.src = origObjURL; }, attach: function (elem) { // create webcam preview and attach to DOM element // pass in actual DOM reference, ID, or CSS selector if (typeof (elem) == 'string') { elem = document.getElementById(elem) || document.querySelector(elem); } if (!elem) { return this.dispatch('error', new WebcamError("Could not locate DOM element to attach to.")); } this.container = elem; elem.innerHTML = ''; // start with empty element // insert "peg" so we can insert our preview canvas adjacent to it later on var peg = document.createElement('div'); elem.appendChild(peg); this.peg = peg; // set width/height if not already set if (!this.params.width) this.params.width = elem.offsetWidth; if (!this.params.height) this.params.height = elem.offsetHeight; // make sure we have a nonzero width and height at this point if (!this.params.width || !this.params.height) { return this.dispatch('error', new WebcamError("No width and/or height for webcam. Please call set() first, or attach to a visible element.")); } // set defaults for dest_width / dest_height if not set if (!this.params.dest_width) this.params.dest_width = this.params.width; if (!this.params.dest_height) this.params.dest_height = this.params.height; this.userMedia = _userMedia === undefined ? this.userMedia : _userMedia; // if force_flash is set, disable userMedia if (this.params.force_flash) { _userMedia = this.userMedia; this.userMedia = null; } // check for default fps if (typeof this.params.fps !== "number") this.params.fps = 30; // adjust scale if dest_width or dest_height is different var scaleX = this.params.width / this.params.dest_width; var scaleY = this.params.height / this.params.dest_height; if (this.userMedia) { // setup webcam video container var video = document.createElement('video'); video.setAttribute('autoplay', 'autoplay'); video.style.width = '' + this.params.dest_width + 'px'; video.style.height = '' + this.params.dest_height + 'px'; if ((scaleX != 1.0) || (scaleY != 1.0)) { elem.style.overflow = 'hidden'; video.style.webkitTransformOrigin = '0px 0px'; video.style.mozTransformOrigin = '0px 0px'; video.style.msTransformOrigin = '0px 0px'; video.style.oTransformOrigin = '0px 0px'; video.style.transformOrigin = '0px 0px'; video.style.webkitTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; video.style.mozTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; video.style.msTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; video.style.oTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; video.style.transform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; } // add video element to dom elem.appendChild(video); this.video = video; // ask user for access to their camera var self = this; this.mediaDevices.getUserMedia({ "audio": false, "video": this.params.constraints || { mandatory: { minWidth: this.params.dest_width, minHeight: this.params.dest_height } } }) .then(function (stream) { // got access, attach stream to video video.onloadedmetadata = function (e) { self.stream = stream; self.loaded = true; self.live = true; self.dispatch('load'); self.dispatch('live'); self.flip(); }; // as window.URL.createObjectURL() is deprecated, adding a check so that it works in Safari. // older browsers may not have srcObject if ("srcObject" in video) { video.srcObject = stream; } else { // using URL.createObjectURL() as fallback for old browsers video.src = window.URL.createObjectURL(stream); } }) .catch(function (err) { // JH 2016-07-31 Instead of dispatching error, now falling back to Flash if userMedia fails (thx @john2014) // JH 2016-08-07 But only if flash is actually installed -- if not, dispatch error here and now. if (self.params.enable_flash && self.detectFlash()) { setTimeout(function () { self.params.force_flash = 1; self.attach(elem); }, 1); } else { self.dispatch('error', err); } }); } else if (this.iOS) { // prepare HTML elements var div = document.createElement('div'); div.id = this.container.id + '-ios_div'; div.className = 'webcamjs-ios-placeholder'; div.style.width = '' + this.params.width + 'px'; div.style.height = '' + this.params.height + 'px'; div.style.textAlign = 'center'; div.style.display = 'table-cell'; div.style.verticalAlign = 'middle'; div.style.backgroundRepeat = 'no-repeat'; div.style.backgroundSize = 'contain'; div.style.backgroundPosition = 'center'; var span = document.createElement('span'); span.className = 'webcamjs-ios-text'; span.innerHTML = this.params.iosPlaceholderText; div.appendChild(span); var img = document.createElement('img'); img.id = this.container.id + '-ios_img'; img.style.width = '' + this.params.dest_width + 'px'; img.style.height = '' + this.params.dest_height + 'px'; img.style.display = 'none'; div.appendChild(img); var input = document.createElement('input'); input.id = this.container.id + '-ios_input'; input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*'); input.setAttribute('capture', 'camera'); var self = this; var params = this.params; // add input listener to load the selected image input.addEventListener('change', function (event) { if (event.target.files.length > 0 && event.target.files[0].type.indexOf('image/') == 0) { var objURL = URL.createObjectURL(event.target.files[0]); // load image with auto scale and crop var image = new Image(); image.addEventListener('load', function (event) { var canvas = document.createElement('canvas'); canvas.width = params.dest_width; canvas.height = params.dest_height; var ctx = canvas.getContext('2d'); // crop and scale image for final size ratio = Math.min(image.width / params.dest_width, image.height / params.dest_height); var sw = params.dest_width * ratio; var sh = params.dest_height * ratio; var sx = (image.width - sw) / 2; var sy = (image.height - sh) / 2; ctx.drawImage(image, sx, sy, sw, sh, 0, 0, params.dest_width, params.dest_height); var dataURL = canvas.toDataURL(); img.src = dataURL; div.style.backgroundImage = "url('" + dataURL + "')"; }, false); // read EXIF data var fileReader = new FileReader(); fileReader.addEventListener('load', function (e) { var orientation = self.exifOrientation(e.target.result); if (orientation > 1) { // image need to rotate (see comments on fixOrientation method for more information) // transform image and load to image object self.fixOrientation(objURL, orientation, image); } else { // load image data to image object image.src = objURL; } }, false); // Convert image data to blob format var http = new XMLHttpRequest(); http.open("GET", objURL, true); http.responseType = "blob"; http.onload = function (e) { if (this.status == 200 || this.status === 0) { fileReader.readAsArrayBuffer(this.response); } }; http.send(); } }, false); input.style.display = 'none'; elem.appendChild(input); // make div clickable for open camera interface div.addEventListener('click', function (event) { if (params.user_callback) { // global user_callback defined - create the snapshot self.snap(params.user_callback, params.user_canvas); } else { // no global callback definied for snapshot, load image and wait for external snap method call input.style.display = 'block'; input.focus(); input.click(); input.style.display = 'none'; } }, false); elem.appendChild(div); this.loaded = true; this.live = true; } else if (this.params.enable_flash && this.detectFlash()) { // flash fallback window.Webcam = Webcam; // needed for flash-to-js interface var div = document.createElement('div'); div.innerHTML = this.getSWFHTML(); elem.appendChild(div); } else { this.dispatch('error', new WebcamError(this.params.noInterfaceFoundText)); } // setup final crop for live preview if (this.params.crop_width && this.params.crop_height) { var scaled_crop_width = Math.floor(this.params.crop_width * scaleX); var scaled_crop_height = Math.floor(this.params.crop_height * scaleY); elem.style.width = '' + scaled_crop_width + 'px'; elem.style.height = '' + scaled_crop_height + 'px'; elem.style.overflow = 'hidden'; elem.scrollLeft = Math.floor((this.params.width / 2) - (scaled_crop_width / 2)); elem.scrollTop = Math.floor((this.params.height / 2) - (scaled_crop_height / 2)); } else { // no crop, set size to desired elem.style.width = '' + this.params.width + 'px'; elem.style.height = '' + this.params.height + 'px'; } }, reset: function () { // shutdown camera, reset to potentially attach again if (this.preview_active) this.unfreeze(); // attempt to fix issue #64 this.unflip(); if (this.userMedia) { if (this.stream) { if (this.stream.getVideoTracks) { // get video track to call stop on it var tracks = this.stream.getVideoTracks(); if (tracks && tracks[0] && tracks[0].stop) tracks[0].stop(); } else if (this.stream.stop) { // deprecated, may be removed in future this.stream.stop(); } } delete this.stream; delete this.video; } if ((this.userMedia !== true) && this.loaded && !this.iOS) { // call for turn off camera in flash var movie = this.getMovie(); if (movie && movie._releaseCamera) movie._releaseCamera(); } if (this.container) { this.container.innerHTML = ''; delete this.container; } this.loaded = false; this.live = false; }, set: function () { // set one or more params // variable argument list: 1 param = hash, 2 params = key, value if (arguments.length == 1) { for (var key in arguments[0]) { this.params[key] = arguments[0][key]; } } else { this.params[arguments[0]] = arguments[1]; } }, on: function (name, callback) { // set callback hook name = name.replace(/^on/i, '').toLowerCase(); if (!this.hooks[name]) this.hooks[name] = []; this.hooks[name].push(callback); }, off: function (name, callback) { // remove callback hook name = name.replace(/^on/i, '').toLowerCase(); if (this.hooks[name]) { if (callback) { // remove one selected callback from list var idx = this.hooks[name].indexOf(callback); if (idx > -1) this.hooks[name].splice(idx, 1); } else { // no callback specified, so clear all this.hooks[name] = []; } } }, dispatch: function () { // fire hook callback, passing optional value to it var name = arguments[0].replace(/^on/i, '').toLowerCase(); var args = Array.prototype.slice.call(arguments, 1); if (this.hooks[name] && this.hooks[name].length) { for (var idx = 0, len = this.hooks[name].length; idx < len; idx++) { var hook = this.hooks[name][idx]; if (typeof (hook) == 'function') { // callback is function reference, call directly hook.apply(this, args); } else if ((typeof (hook) == 'object') && (hook.length == 2)) { // callback is PHP-style object instance method hook[0][hook[1]].apply(hook[0], args); } else if (window[hook]) { // callback is global function name window[hook].apply(window, args); } } // loop return true; } else if (name == 'error') { var message; if ((args[0] instanceof FlashError) || (args[0] instanceof WebcamError)) { message = args[0].message; } else { message = "Could not access webcam: " + args[0].name + ": " + args[0].message + " " + args[0].toString(); } // default error handler if no custom one specified alert("Webcam.js Error: " + message); } return false; // no hook defined }, setSWFLocation: function (value) { // for backward compatibility. this.set('swfURL', value); }, detectFlash: function () { // return true if browser supports flash, false otherwise // Code snippet borrowed from: https://github.com/swfobject/swfobject var SHOCKWAVE_FLASH = "Shockwave Flash", SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash", FLASH_MIME_TYPE = "application/x-shockwave-flash", win = window, nav = navigator, hasFlash = false; if (typeof nav.plugins !== "undefined" && typeof nav.plugins[SHOCKWAVE_FLASH] === "object") { var desc = nav.plugins[SHOCKWAVE_FLASH].description; if (desc && (typeof nav.mimeTypes !== "undefined" && nav.mimeTypes[FLASH_MIME_TYPE] && nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { hasFlash = true; } } else if (typeof win.ActiveXObject !== "undefined") { try { var ax = new ActiveXObject(SHOCKWAVE_FLASH_AX); if (ax) { var ver = ax.GetVariable("$version"); if (ver) hasFlash = true; } } catch (e) {; } } return hasFlash; }, getSWFHTML: function () { // Return HTML for embedding flash based webcam capture movie var html = '', swfURL = this.params.swfURL; // make sure we aren't running locally (flash doesn't work) if (location.protocol.match(/file/)) { this.dispatch('error', new FlashError("Flash does not work from local disk. Please run from a web server.")); return '<h3 style="color:red">ERROR: the Webcam.js Flash fallback does not work from local disk. Please run it from a web server.</h3>'; } // make sure we have flash if (!this.detectFlash()) { this.dispatch('error', new FlashError("Adobe Flash Player not found. Please install from get.adobe.com/flashplayer and try again.")); return '<h3 style="color:red">' + this.params.flashNotDetectedText + '</h3>'; } // set default swfURL if not explicitly set if (!swfURL) { // find our script tag, and use that base URL var base_url = ''; var scpts = document.getElementsByTagName('script'); for (var idx = 0, len = scpts.length; idx < len; idx++) { var src = scpts[idx].getAttribute('src'); if (src && src.match(/\/webcam(\.min)?\.js/)) { base_url = src.replace(/\/webcam(\.min)?\.js.*$/, ''); idx = len; } } if (base_url) swfURL = base_url + '/webcam.swf'; else swfURL = 'webcam.swf'; } // if this is the user's first visit, set flashvar so flash privacy settings panel is shown first if (window.localStorage && !localStorage.getItem('visited')) { this.params.new_user = 1; localStorage.setItem('visited', 1); } // construct flashvars string var flashvars = ''; for (var key in this.params) { if (flashvars) flashvars += '&'; flashvars += key + '=' + escape(this.params[key]); } // construct object/embed tag html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" codebase="' + this.protocol + '://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="' + this.params.width + '" height="' + this.params.height + '" id="webcam_movie_obj" align="middle"><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="' + swfURL + '" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="' + flashvars + '"/><embed id="webcam_movie_embed" src="' + swfURL + '" wmode="opaque" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="' + this.params.width + '" height="' + this.params.height + '" name="webcam_movie_embed" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="' + flashvars + '"></embed></object>'; return html; }, getMovie: function () { // get reference to movie object/embed in DOM if (!this.loaded) return this.dispatch('error', new FlashError("Flash Movie is not loaded yet")); var movie = document.getElementById('webcam_movie_obj'); if (!movie || !movie._snap) movie = document.getElementById('webcam_movie_embed'); if (!movie) this.dispatch('error', new FlashError("Cannot locate Flash movie in DOM")); return movie; }, freeze: function () { // show preview, freeze camera var self = this; var params = this.params; // kill preview if already active if (this.preview_active) this.unfreeze(); // determine scale factor var scaleX = this.params.width / this.params.dest_width; var scaleY = this.params.height / this.params.dest_height; // must unflip container as preview canvas will be pre-flipped this.unflip(); // calc final size of image var final_width = params.crop_width || params.dest_width; var final_height = params.crop_height || params.dest_height; // create canvas for holding preview var preview_canvas = document.createElement('canvas'); preview_canvas.width = final_width; preview_canvas.height = final_height; var preview_context = preview_canvas.getContext('2d'); // save for later use this.preview_canvas = preview_canvas; this.preview_context = preview_context; // scale for preview size if ((scaleX != 1.0) || (scaleY != 1.0)) { preview_canvas.style.webkitTransformOrigin = '0px 0px'; preview_canvas.style.mozTransformOrigin = '0px 0px'; preview_canvas.style.msTransformOrigin = '0px 0px'; preview_canvas.style.oTransformOrigin = '0px 0px'; preview_canvas.style.transformOrigin = '0px 0px'; preview_canvas.style.webkitTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; preview_canvas.style.mozTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; preview_canvas.style.msTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; preview_canvas.style.oTransform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; preview_canvas.style.transform = 'scaleX(' + scaleX + ') scaleY(' + scaleY + ')'; } // take snapshot, but fire our own callback this.snap(function () { // add preview image to dom, adjust for crop preview_canvas.style.position = 'relative'; preview_canvas.style.left = '' + self.container.scrollLeft + 'px'; preview_canvas.style.top = '' + self.container.scrollTop + 'px'; self.container.insertBefore(preview_canvas, self.peg); self.container.style.overflow = 'hidden'; // set flag for user capture (use preview) self.preview_active = true; }, preview_canvas); }, unfreeze: function () { // cancel preview and resume live video feed if (this.preview_active) { // remove preview canvas this.container.removeChild(this.preview_canvas); delete this.preview_context; delete this.preview_canvas; // unflag this.preview_active = false; // re-flip if we unflipped before this.flip(); } }, flip: function () { // flip container horiz (mirror mode) if desired if (this.params.flip_horiz) { var sty = this.container.style; sty.webkitTransform = 'scaleX(-1)'; sty.mozTransform = 'scaleX(-1)'; sty.msTransform = 'scaleX(-1)'; sty.oTransform = 'scaleX(-1)'; sty.transform = 'scaleX(-1)'; sty.filter = 'FlipH'; sty.msFilter = 'FlipH'; } }, unflip: function () { // unflip container horiz (mirror mode) if desired if (this.params.flip_horiz) { var sty = this.container.style; sty.webkitTransform = 'scaleX(1)'; sty.mozTransform = 'scaleX(1)'; sty.msTransform = 'scaleX(1)'; sty.oTransform = 'scaleX(1)'; sty.transform = 'scaleX(1)'; sty.filter = ''; sty.msFilter = ''; } }, savePreview: function (user_callback, user_canvas) { // save preview freeze and fire user callback var params = this.params; var canvas = this.preview_canvas; var context = this.preview_context; // render to user canvas if desired if (user_canvas) { var user_context = user_canvas.getContext('2d'); user_context.drawImage(canvas, 0, 0); } // fire user callback if desired user_callback( user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100), canvas, context ); // remove preview if (this.params.unfreeze_snap) this.unfreeze(); }, snap: function (user_callback, user_canvas) { // use global callback and canvas if not defined as parameter if (!user_callback) user_callback = this.params.user_callback; if (!user_canvas) user_canvas = this.params.user_canvas; // take snapshot and return image data uri var self = this; var params = this.params; if (!this.loaded) return this.dispatch('error', new WebcamError("Webcam is not loaded yet")); // if (!this.live) return this.dispatch('error', new WebcamError("Webcam is not live yet")); if (!user_callback) return this.dispatch('error', new WebcamError("Please provide a callback function or canvas to snap()")); // if we have an active preview freeze, use that if (this.preview_active) { this.savePreview(user_callback, user_canvas); return null; } // create offscreen canvas element to hold pixels var canvas = document.createElement('canvas'); canvas.width = this.params.dest_width; canvas.height = this.params.dest_height; var context = canvas.getContext('2d'); // flip canvas horizontally if desired if (this.params.flip_horiz) { context.translate(params.dest_width, 0); context.scale(-1, 1); } // create inline function, called after image load (flash) or immediately (native) var func = function () { // render image if needed (flash) if (this.src && this.width && this.height) { context.drawImage(this, 0, 0, params.dest_width, params.dest_height); } // crop if desired if (params.crop_width && params.crop_height) { var crop_canvas = document.createElement('canvas'); crop_canvas.width = params.crop_width; crop_canvas.height = params.crop_height; var crop_context = crop_canvas.getContext('2d'); crop_context.drawImage(canvas, Math.floor((params.dest_width / 2) - (params.crop_width / 2)), Math.floor((params.dest_height / 2) - (params.crop_height / 2)), params.crop_width, params.crop_height, 0, 0, params.crop_width, params.crop_height ); // swap canvases context = crop_context; canvas = crop_canvas; } // render to user canvas if desired if (user_canvas) { var user_context = user_canvas.getContext('2d'); user_context.drawImage(canvas, 0, 0); } // fire user callback if desired user_callback( user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100), canvas, context ); }; // grab image frame from userMedia or flash movie if (this.userMedia) { // native implementation context.drawImage(this.video, 0, 0, this.params.dest_width, this.params.dest_height); // fire callback right away func(); } else if (this.iOS) { var div = document.getElementById(this.container.id + '-ios_div'); var img = document.getElementById(this.container.id + '-ios_img'); var input = document.getElementById(this.container.id + '-ios_input'); // function for handle snapshot event (call user_callback and reset the interface) iFunc = function (event) { func.call(img); img.removeEventListener('load', iFunc); div.style.backgroundImage = 'none'; img.removeAttribute('src'); input.value = null; }; if (!input.value) { // No image selected yet, activate input field img.addEventListener('load', iFunc); input.style.display = 'block'; input.focus(); input.click(); input.style.display = 'none'; } else { // Image already selected iFunc(null); } } else { // flash fallback var raw_data = this.getMovie()._snap(); // render to image, fire callback when complete var img = new Image(); img.onload = func; img.src = 'data:image/' + this.params.image_format + ';base64,' + raw_data; } return null; }, configure: function (panel) { // open flash configuration panel -- specify tab name: // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager" if (!panel) panel = "camera"; this.getMovie()._configure(panel); }, flashNotify: function (type, msg) { // receive notification from flash about event switch (type) { case 'flashLoadComplete': // movie loaded successfully this.loaded = true; this.dispatch('load'); break; case 'cameraLive': // camera is live and ready to snap this.live = true; this.dispatch('live'); break; case 'error': // Flash error this.dispatch('error', new FlashError(msg)); break; default: // catch-all event, just in case // console.log("webcam flash_notify: " + type + ": " + msg); break; } }, b64ToUint6: function (nChr) { // convert base64 encoded character to 6-bit integer // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 ? nChr - 71 : nChr > 47 && nChr < 58 ? nChr + 4 : nChr === 43 ? 62 : nChr === 47 ? 63 : 0; }, base64DecToArr: function (sBase64, nBlocksSize) { // convert base64 encoded string to Uintarray // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { nMod4 = nInIdx & 3; nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; if (nMod4 === 3 || nInLen - nInIdx === 1) { for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; } nUint24 = 0; } } return taBytes; }, upload: function (image_data_uri, target_url, callback) { // submit image data to server using binary AJAX var form_elem_name = this.params.upload_name || 'webcam'; // detect image format from within image_data_uri var image_fmt = ''; if (image_data_uri.match(/^data\:image\/(\w+)/)) image_fmt = RegExp.$1; else throw "Cannot locate image format in Data URI"; // extract raw base64 data from Data URI var raw_image_data = image_data_uri.replace(/^data\:image\/\w+\;base64\,/, ''); // contruct use AJAX object var http = new XMLHttpRequest(); http.open("POST", target_url, true); // setup progress events if (http.upload && http.upload.addEventListener) { http.upload.addEventListener('progress', function (e) { if (e.lengthComputable) { var progress = e.loaded / e.total; Webcam.dispatch('uploadProgress', progress, e); } }, false); } // completion handler var self = this; http.onload = function () { if (callback) callback.apply(self, [http.status, http.responseText, http.statusText]); Webcam.dispatch('uploadComplete', http.status, http.responseText, http.statusText); }; // create a blob and decode our base64 to binary var blob = new Blob([this.base64DecToArr(raw_image_data)], { type: 'image/' + image_fmt }); // stuff into a form, so servers can easily receive it as a standard file upload var form = new FormData(); form.append(form_elem_name, blob, form_elem_name + "." + image_fmt.replace(/e/, '')); // send data to server http.send(form); } }; Webcam.init(); if (typeof define === 'function' && define.amd) { define(function () { return Webcam; }); } else if (typeof module === 'object' && module.exports) { module.exports = Webcam; } else { window.Webcam = Webcam; } }(window));
Tuesday, April 7, 2020 8:15 AM