| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| |
| <script src=../../media-resources/video-test.js></script> |
| |
| <script> |
| var imageBitmap; |
| |
| function getColorIndicesForCoord(x, y, width) { |
| var red = y * (width * 4) + x * 4; |
| return [red, red + 1, red + 2, red + 3]; |
| } |
| |
| async function canplaythrough() |
| { |
| // As we can't guarantee when an actual image will get painted; |
| // we loop until the condition becomes true: a pixel in the centre is no longer black. |
| let firstRun = true; |
| for (;;) { |
| imageBitmap = await createImageBitmap(video); |
| if (firstRun) { |
| testExpected("imageBitmap instanceof ImageBitmap", true); |
| testExpected("imageBitmap.width != 0", true); |
| testExpected("imageBitmap.height != 0", true); |
| } |
| let ctx = c1.getContext("2d"); |
| ctx.drawImage(imageBitmap, 0, 0); |
| const imageData = ctx.getImageData(0, 0, c1.width, c1.height); |
| // At the centre of the video we have a circle, ensure that it's not black. |
| let colorIndices = getColorIndicesForCoord(imageBitmap.width / 2, imageBitmap.height / 2, c1.width); |
| let redIndex = colorIndices[0]; |
| let greenIndex = colorIndices[1]; |
| let blueIndex = colorIndices[2]; |
| let alphaIndex = colorIndices[3]; |
| |
| let redForCoord = imageData.data[redIndex]; |
| let greenForCoord = imageData.data[greenIndex]; |
| let blueForCoord = imageData.data[blueIndex]; |
| let alphaForCoord = imageData.data[alphaIndex]; |
| |
| if (redForCoord != 0 && greenForCoord != 0 && blueForCoord != 0 && alphaForCoord == 255) { |
| consoleWrite("Image isn't all black \\o/"); |
| endTest(); |
| break; |
| } |
| firstRun = false; |
| await sleepFor(100); |
| } |
| } |
| |
| function start() |
| { |
| consoleWrite("<br><em>** Set video.src, wait for media data to load</em>"); |
| findMediaElement(); |
| run("video.src = 'http://127.0.0.1:8000/media/resources/hls/metadata/prog_index.m3u8'"); |
| consoleWrite(""); |
| waitForEventOnce("canplaythrough", canplaythrough); |
| } |
| </script> |
| </head> |
| <body onload="start()"> |
| <video controls></video> |
| <p>Check that creating an ImageBitmap from a video succeeds.</p> |
| <canvas id="c1" width="640" height="480"></canvas> |
| </body> |
| </html> |
