标签:tle list raw fir 后台 区分 || string 访问
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 设备管理后台</title> </head> <body > <div > <!-- 内容主体区域 --> <div > <video id="video" width="480" height="320" controls></video> </div> <div > <input type="button" id="capture" value="拍照"/> </div> <div > <canvas id="canvas" width="480" height="480"></canvas> </div> </div> </body> </html> <script> window.onload = function () { //访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新的标准API navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); } else if (navigator.webkitGetUserMedia) { //webkit核心浏览器 navigator.webkitGetUserMedia(constraints, success, error) } else if (navigator.mozGetUserMedia) { //firfox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //旧版API navigator.getUserMedia(constraints, success, error); } } /* var exArray = []; //存储设备源ID MediaStreamTrack.getSources(function (sourceInfos) { for (var i = 0; i != sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; //这里会遍历audio,video,所以要加以区分 if (sourceInfo.kind === ‘video‘) { exArray.push(sourceInfo.id); } } }); */ let video = document.getElementById(‘video‘); let canvas = document.getElementById(‘canvas‘); let context = canvas.getContext(‘2d‘); function success(stream) { //兼容webkit核心浏览器 let CompatibleURL = window.URL || window.webkitURL; //将视频流设置为video元素的源 // console.log(stream); //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) { console.log(`访问用户媒体设备失败${error.name}, ${error.message}`); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { console.log("enumerateDevices() not supported."); return; } // 列出摄像头和麦克风 var exArray = []; navigator.mediaDevices.enumerateDevices() .then(function (devices) { devices.forEach(function (device) { // console.log(device.kind + ": " + device.label + // " id = " + device.deviceId); if (device.kind == "videoinput") { // alert(device.label); exArray.push(device.deviceId); } }); var mediaOpts = { video: { width: 420, height: 120 } }; var mediaOpts = { video: { deviceId: { exact: exArray[1] } } }; //调用用户媒体设备, 访问摄像头 getUserMedia(mediaOpts, success, error); }) .catch(function (err) { console.log(err.name + ": " + err.message); }); } else { alert(‘不支持访问用户媒体‘); } var img = new Image(); document.getElementById(‘capture‘).addEventListener(‘click‘, function () { context.drawImage(video, 0, 0, 480, 320); var image_data = context.getImageData(0, 0, 480, 320); // var string = OCRAD(image_data.data); // string = _arrayBufferToBase64(image_data); var image = new Image(); image.src = canvas.toDataURL("image/jpeg"); // return image; // alert(image.src); }) } </script>
标签:tle list raw fir 后台 区分 || string 访问
原文地址:https://www.cnblogs.com/fyssl/p/11280449.html