Chromium Code Reviews Chromium Code Reviews
Issue 1467103003:
Basic use implementation for MediaStream from Canvas: captureStream() (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html b/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..b3c64d8e3b1ef8cb600461a368cf4b7c7ba8d3ce |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html |
| @@ -0,0 +1,68 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + <title>HTMLCanvasElement capture into MediaStream demo</title> |
| + <!-- |
| + This test verifies that the output of captureStream on <canvas> |
| + is as expected and matches the original input. |
| + --> |
| +</head> |
| +<body> |
| + <div id="tx"> Create Real-Time stream from < canvas > and play it back.</div> |
| +</body> |
| +<video id="video_source" muted="true" autoplay hidden loop> |
| + <source src="resources/canvas_video.mp4" type='video/mp4' /> |
| + <source src="resources/canvas_video.webm" type='video/webm' /> |
| + <source src="resources/canvas_video.ogv" type='video/ogg' /> |
| +</video> |
| +<canvas id="canvas_source" width="240" height="180"></canvas> |
| +<video id="video_sink" width="240" height="180"></video> |
| +<script type="application/x-javascript"> |
| + if (window.testRunner) { |
| + testRunner.dumpAsTextWithPixelResults(); |
| + testRunner.waitUntilDone(); |
| + } |
| + |
| + var canvas_source = document.getElementById("canvas_source"); |
| + var context = canvas_source.getContext('2d'); |
| + var video_source = document.getElementById("video_source"); |
| + video_source.addEventListener("playing", drawVideoToCanvas, true); |
| + function drawVideoToCanvas() { |
| + for (i = 0; i < 10; i++) { |
|
Justin Novosad
2015/12/02 21:08:16
What is the purpose of this loop?
|
| + context.globalAlpha = 1; |
| + context.fillStyle = "blue"; |
| + context.fillRect(0, 0, canvas_source.width, canvas_source.width); |
| + context.drawImage(video_source, 0, 0); |
| + } |
| + } |
| + |
| + var video_sink = document.getElementById('video_sink'); |
| + try { |
| + var stream = canvas_source.captureStream(); |
| + video_sink.src = window.URL.createObjectURL(stream); |
| + } catch(e) { |
| + onErrorOutput("FAIL: " + e); |
| + } |
| + video_sink.play(); |
| + video_sink.addEventListener("error", onError, true); |
| + video_sink.addEventListener("loadeddata", onCanvasPlaybackStarted, true); |
|
Justin Novosad
2015/12/02 21:08:16
I think the execution order of drawVideoToCanvas v
|
| + |
| + function onCanvasPlaybackStarted() { |
| + setTimeout(onCanvasPlaybackIsOn, 2000); |
|
Justin Novosad
2015/12/02 21:08:16
Arbitrary large delays in layout tests is a no-no.
|
| + } |
| + |
| + function onCanvasPlaybackIsOn() { |
| + if (window.testRunner) { |
| + testRunner.notifyDone(); |
| + } |
| + } |
| + |
| + function onError() { |
| + onErrorOutput("Error"); |
| + } |
| + |
| + function onErrorOutput(ad_content){ |
| + document.getElementById('tx').innerHTML += ad_content; |
| + } |
| +</script> |
| +</html> |
