<!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对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
}
function handleError(error) {
console.log('Error: ', error);
}
