<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>JS獲取手機型號和系統</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.photoArea {
width: 100px;
height: 30px;
border: 1px solid red;
text-align: center;
line-height: 28px;
border-radius: 10px;
position: relative;
}
.photoArea input {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 30px;
opacity: 0;
}
video {
width: 200px;
}
</style>
</head>
<body>
<div id="arrow"></div>
<div class="photoArea">
<button>拍照上傳</button>
<input type="file" onchange="submitImage()" id="file">
</div>
<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>
<div id="video">
<video muted autoplay playsinline></video>
</div>
<br />
<canvas id="canvas1" height="200px"></canvas>
<input type="button" title="拍照" value="拍照" onclick="getPhoto();" />
</body>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/mobile-detect.min.js"></script>
<script src="js/main.js"></script>
<script>
//判斷數組中是否包含某字符串
Array.prototype.contains = function(needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
var device_type = navigator.userAgent; //獲取userAgent信息
// document.write(device_type);//打印到頁面
var md = new MobileDetect(device_type); //初始化mobile-detect
var os = md.os(); //獲取系統
var version = ""; //獲取系統版本
var model = "";
if (os == "iOS") { //ios系統的處理
os = md.os() + md.version("iPhone");
version = md.version("iPhone")
model = md.mobile();
if (model == "iPad") {
version = md.version("iPad")
}
} else if (os == "AndroidOS") { //Android系統的處理
os = md.os() + md.version("Android");
var sss = device_type.split(";");
var i = sss.contains("Build/");
if (i > -1) {
model = sss[i].substring(0, sss[i].indexOf("Build/"));
}
}
console.log(version + "---" + model); //打印系統版本和手機型號
try {
var text = "";
window.addEventListener("deviceorientation", orientationHandler, false);
function orientationHandler(event) {
text = ""
var arrow = document.getElementById("arrow");
text += "左右旋轉：rotate alpha{" + Math.round(event.alpha) + "deg)<p>";
text += "前后旋轉：rotate beta{" + Math.round(event.beta) + "deg)<p>";
text += "扭轉設備：rotate gamma{" + Math.round(event.gamma) + "deg)<p>";
arrow.innerHTML = text;
}
} catch (e) {
$("#arrow").html(e.message)
}
function submitImage() {
var file = document.getElementById("file").files[0];
console.log(file);
let formData = new FormData();
formData.append("userName", "1");
formData.append("img", file);
$.ajax({
url: 'http://b4imc5.natappfree.cc/qrv',
type: 'POST',
data: formData,
dataType: 'json',
processData: false, // 告訴jQuery不要去設置Content-Type請求頭
contentType: false,
success: function(data) {
console.log(data)
},
error: function(err) {
console.log("請求失敗" + err)
}
})
}
</script>
</html>
main.js
/*
Copyright 2017 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
var videoElement = document.querySelector('video');
var video = document.getElementById('video');
var videoHeight = "";
setTimeout(() => {
videoHeight = video.offsetHeight;
console.log(videoHeight)
}, 2000);
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
navigator.mediaDevices.enumerateDevices()
.then(gotDevices).then(getStream).catch(handleError);
audioSelect.onchange = getStream;
videoSelect.onchange = getStream;
function gotDevices(deviceInfos) {
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
var option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label ||
'microphone ' + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || 'camera ' +
(videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Found one other kind of source/device: ', deviceInfo);
}
}
}
function getStream() {
if (window.stream) {
window.stream.getTracks().forEach(function(track) {
track.stop();
});
}
var constraints = {
audio: {
deviceId: { exact: audioSelect.value }
},
video: {
deviceId: { exact: videoSelect.value }
}
};
navigator.mediaDevices.getUserMedia(constraints).
then(gotStream).catch(handleError);
}
function gotStream(stream) {
window.stream = stream; // make stream available to console
videoElement.srcObject = stream;
}
function getPhoto() {
console.log(1)
context1.drawImage(videoElement, 0, 0, 200, videoHeight); //將video對象內指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，實現拍照。
}
function handleError(error) {
console.log('Error: ', error);
}
