| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="./resources/getUserMedia-helper.js"></script> |
| </head> |
| <body onload="start()"> |
| <p id="description"></p> |
| <div id="console"></div> |
| <video controls width="680" height="360"></video> |
| <video controls width="680" height="360"></video> |
| <canvas width="680" height="360"></canvas> |
| <script> |
| let mediaStream; |
| let videos; |
| let buffer; |
| let currentTest = 0; |
| |
| function isPixelTransparent(pixel) |
| { |
| return pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0 && pixel[3] === 0; |
| } |
| |
| function isPixelBlack(pixel) |
| { |
| return pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0 && pixel[3] === 255; |
| } |
| |
| function isPixelGray(pixel) |
| { |
| return pixel[0] === 128 && pixel[1] === 128 && pixel[2] === 128 && pixel[3] === 255; |
| } |
| |
| function verifyFramesBeingDisplayed() |
| { |
| videos[currentTest].removeEventListener('playing', verifyFramesBeingDisplayed, false) |
| |
| canvas = document.querySelector('canvas'); |
| context = canvas.getContext('2d'); |
| |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| let x = canvas.width * .035; |
| let y = canvas.height * 0.6 + 2 + x; |
| buffer = context.getImageData(x, y, 1, 1).data; |
| shouldBeTrue('isPixelTransparent(buffer)'); |
| |
| evalAndLog(`context.drawImage(videos[${currentTest}], 0, 0, ${canvas.width}, ${canvas.height})`); |
| buffer = context.getImageData(x, y, 1, 1).data; |
| shouldBeFalse('isPixelTransparent(buffer)'); |
| shouldBeFalse('isPixelBlack(buffer)'); |
| |
| x = canvas.width * .05; |
| y = canvas.height * .05; |
| buffer = context.getImageData(x, y, 1, 1).data; |
| shouldBeFalse('isPixelTransparent(buffer)'); |
| if (!currentTest) |
| shouldBeTrue('isPixelBlack(buffer)'); |
| else |
| shouldBeTrue('isPixelGray(buffer)'); |
| |
| if (currentTest >= 1) { |
| finishJSTest(); |
| return; |
| } |
| |
| videos[currentTest].pause(); |
| ++currentTest; |
| requestNextStream(); |
| } |
| |
| function setupVideoElement(stream) |
| { |
| mediaStream = stream; |
| testPassed('mediaDevices.getUserMedia generated a stream successfully.'); |
| evalAndLog(`videos[${currentTest}].srcObject = mediaStream`); |
| } |
| |
| function canplay() |
| { |
| videos[currentTest].removeEventListener('canplay', canplay, false) |
| evalAndLog(`videos[${currentTest}].play()`); |
| } |
| |
| function requestNextStream() |
| { |
| debug(`<br> === checking pixels from ${!currentTest ? "front" : "back"} camera ===`); |
| let constraints = {video : !currentTest ? true : {facingMode: "environment"}}; |
| getUserMedia("allow", constraints, setupVideoElement); |
| } |
| |
| function start() |
| { |
| description("Tests that the stream displays captured buffers to the video element."); |
| |
| videos = Array.from(document.getElementsByTagName('video')); |
| videos.forEach((video) => { |
| video.addEventListener('canplay', canplay, false); |
| video.addEventListener('playing', verifyFramesBeingDisplayed, false); |
| }); |
| requestNextStream(); |
| } |
| |
| window.jsTestIsAsync = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
