Index: ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js =================================================================== diff -u -r30453 -r30460 --- ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 30453) +++ ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 30460) @@ -111,7 +111,13 @@ video.muted = true; video.width = videoWidth; video.height = videoHeight; - MediaUtils.getUserMedia(true, true, function (err, stream) { + var videoObj = { + video:{ + width: {min: 720, ideal: 1920, max: 4096}, + height: {min: 480, ideal: 1080, max: 2160} + } + } + MediaUtils.getUserMedia(videoObj, true, function (err, stream) { if (err) { throw err; } else { @@ -188,27 +194,30 @@ /* 预览大图图片 */ var canvasBig = document.getElementById("canvasBig"); - canvasBig.setAttribute('width',cameraWidth); - canvasBig.setAttribute('height',cameraHeight); + /** + * 分辨率4096 x 2160,3200 × 1800,2560 x 1600,2560 x 1440,1920 x 1200,1920 x 1080,720 x 480 + * getUserMedia API说明: + * 当请求包含一个ideal(应用最理想的)值时,这个值有着更高的权重,意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头(如果设备拥有不止一个摄像头) + */ + var canvasWidth = 3200; + var canvasHeight = 1800; + canvasBig.setAttribute('width',canvasWidth); + canvasBig.setAttribute('height',canvasHeight); var contextBig = canvasBig.getContext("2d"); var video = document.getElementById("video"); var videoObj = { video: { - width:1920, - height:1080 + width: { min: 720, ideal: canvasWidth, max: 4096 }, + height: { min: 480, ideal: canvasHeight, max: 2160 } } } - var errBack = function (error) { - //console.log("Video capture error: ", error.code); - }; if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(videoObj).then(function (stream) { video.srcObject = stream; video.play(); mediaRecorder = new MediaStreamRecorder(stream); - - }).catch(errBack); + }).catch(function(){}); } else { } @@ -231,7 +240,7 @@ $("#canvas").hide(0).slideDown("normal"); $("#canvas").addClass("animate-bounce-up"); context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, cameraWidth, cameraHeight); + contextBig.drawImage(video, 0, 0, canvasWidth, canvasHeight); /* 显示在多图片页面 */ var base64Data = canvas.toDataURL('image/jpeg', 1.0); /* 预览大图 */