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: Updated 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

« third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-events-and-exceptions.html ('K') | « third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-events-and-exceptions.html ('k') | third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output-expected.txt » ('j') | third_party/WebKit/Source/core/html/HTMLCanvasElement.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>
	esprehn 2015/12/03 18:47:34 leave out html, head and body leave out html, head and body
	4 <title>HTMLCanvasElement capture into MediaStream</title>

	5 <!--

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

	7 runs as expected.

	8 -->

	9 </head>

	10 <body>

	11 <div id="tx"> Create Real-Time stream from < canvas > and play it back.</div>
	esprehn 2015/12/03 18:47:34 < and > don't put spaces like that, remove s < and > don't put spaces like that, remove space at the start
	12 </body>

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

	14 <source src="resources/canvas_video.webm" type='video/webm' />
	esprehn 2015/12/03 18:47:34 leave out / on elements leave out / on elements
	15 </video>

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

	17 <video id="video_sink" muted="true" hidden></video>

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

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

	20 if (window.testRunner) {

	21 testRunner.dumpAsText();

	22 testRunner.waitUntilDone();

	23 }

	24

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

	26 var context_source = canvas_source.getContext('2d');

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

	28 video_source.addEventListener("playing", onVideoSourcePlaying);

	29 video_source.play();

	30 var video_sink = document.getElementById("video_sink");

	31 var canvas_sink = document.getElementById("canvas_sink");

	32 var context_sink = canvas_sink.getContext('2d');

	33

	34 function onVideoSourcePlaying() {

	35 video_source.removeEventListener("playing", onVideoSourcePlaying);

	36 drawVideoToCanvas(context_source, video_source, canvas_source);

	37 onWrite("Video source started drawing on canvas source.");

	38 createCaptureStream();

	39 }

	40

	41 function createCaptureStream() {

	42 try {

	43 var stream = canvas_source.captureStream();

	44 video_sink.src = URL.createObjectURL(stream);

	45 onWrite("Got a stream from canvas.");

	46 } catch(e) {

	47 onWrite("FAIL: " + e);

	48 }

	49 video_sink.addEventListener("play", onVideoSinkPlaying);

	50 video_sink.play();

	51 }

	52

	53 function onVideoSinkPlaying() {

	54 onWrite("Video sink playing.");

	55 drawVideoToCanvas(context_sink, video_sink, canvas_sink);

	56 onWrite("Video sink started drawing on canvas.");

	57 setTimeout(onCanvasPlaybackIsOn, 2000);
	Justin Novosad 2015/12/03 15:44:37 Can we avoid using set timeout with long delays. I Can we avoid using set timeout with long delays. It is still not clear to me what this arbitrary delay is for. Please use an actual event instead to simultaneously avoid flake and long run times. If you want a full paint update cycle to happen before calling onCanvasPlaybackIsOn, then you should use testRunner.layoutAndPaintAsyncThen(). If you want to wait for the video to advance, use the timeupdate event on the video, etc.
	58 }

	59

	60 function onCanvasPlaybackIsOn() {

	61 if (window.testRunner)

	62 testRunner.notifyDone();

	63 }

	64

	65 function drawVideoToCanvas(ctx, video, canvas) {

	66 ctx.drawImage(video, 0, 0, canvas.width, canvas.width);

	67 setTimeout(drawVideoToCanvas, 100, ctx, video, canvas);
	Justin Novosad 2015/12/03 15:44:37 This animation loop should use requestAnimationFra This animation loop should use requestAnimationFrame instead of setTimeout. Also, does the test really require updates in a continuous, never ending loop?
	68 }

	69

	70 function onWrite(text){
	Justin Novosad 2015/12/03 15:44:37 why the 'on' prefix here? why the 'on' prefix here?
	71 var tx = document.getElementById('tx');

	72 tx.appendChild(document.createElement('br'));

	73 tx.appendChild(document.createTextNode(text));

	74 }

	75 </script>

	76 </html>

OLD	NEW