third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html - Issue 1467103003: Basic use implementation for MediaStream from Canvas: captureStream()

Side by Side Diff: third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html

Issue 1467103003: Basic use implementation for MediaStream from Canvas: captureStream() (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Adding LayoutTests. Created 5 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-events-and-exceptions.html ('k') | third_party/WebKit/LayoutTests/fast/mediacapturefromelement/resources/canvas_video.mp4 » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <title>HTMLCanvasElement capture into MediaStream demo</title>

	5 <!--

	6 This test verifies that the output of captureStream on <canvas>

	7 is as expected and matches the original input.

	8 -->

	9 </head>

	10 <body>

	11 <div id="tx"> Create Real-Time stream from < canvas > and play it back.</div>

	12 </body>

	13 <video id="video_source" muted="true" autoplay hidden loop>

	14 <source src="resources/canvas_video.mp4" type='video/mp4' />

	15 <source src="resources/canvas_video.webm" type='video/webm' />

	16 <source src="resources/canvas_video.ogv" type='video/ogg' />

	17 </video>

	18 <canvas id="canvas_source" width="240" height="180"></canvas>

	19 <video id="video_sink" width="240" height="180"></video>

	20 <script type="application/x-javascript">

	21 if (window.testRunner) {

	22 testRunner.dumpAsTextWithPixelResults();

	23 testRunner.waitUntilDone();

	24 }

	25

	26 var canvas_source = document.getElementById("canvas_source");

	27 var context = canvas_source.getContext('2d');

	28 var video_source = document.getElementById("video_source");

	29 video_source.addEventListener("playing", drawVideoToCanvas, true);

	30 function drawVideoToCanvas() {

	31 for (i = 0; i < 10; i++) {
	Justin Novosad 2015/12/02 21:08:16 What is the purpose of this loop? What is the purpose of this loop?
	32 context.globalAlpha = 1;

	33 context.fillStyle = "blue";

	34 context.fillRect(0, 0, canvas_source.width, canvas_source.width);

	35 context.drawImage(video_source, 0, 0);

	36 }

	37 }

	38

	39 var video_sink = document.getElementById('video_sink');

	40 try {

	41 var stream = canvas_source.captureStream();

	42 video_sink.src = window.URL.createObjectURL(stream);

	43 } catch(e) {

	44 onErrorOutput("FAIL: " + e);

	45 }

	46 video_sink.play();

	47 video_sink.addEventListener("error", onError, true);

	48 video_sink.addEventListener("loadeddata", onCanvasPlaybackStarted, true);
	Justin Novosad 2015/12/02 21:08:16 I think the execution order of drawVideoToCanvas v I think the execution order of drawVideoToCanvas vs, onCanvasPlaybackStarted is non-deterministic. You probably want to test both orders explicitly to: a) have complete coverage and b) avoid flakiness in the case one of the two orders is broken.
	49

	50 function onCanvasPlaybackStarted() {

	51 setTimeout(onCanvasPlaybackIsOn, 2000);
	Justin Novosad 2015/12/02 21:08:16 Arbitrary large delays in layout tests is a no-no. Arbitrary large delays in layout tests is a no-no. What exactly is this delay suppose to achieve? If it is to give time for something specific to happen, don't use a delay for that. This is how flaky tests are born. Figure out an event you can latch on to that will give you the right execution order.
	52 }

	53

	54 function onCanvasPlaybackIsOn() {

	55 if (window.testRunner) {

	56 testRunner.notifyDone();

	57 }

	58 }

	59

	60 function onError() {

	61 onErrorOutput("Error");

	62 }

	63

	64 function onErrorOutput(ad_content){

	65 document.getElementById('tx').innerHTML += ad_content;

	66 }

	67 </script>

	68 </html>

OLD	NEW