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..a1ed3ee0133d776b1f4c36560fdcae6292689136 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-output.html |
| @@ -0,0 +1,76 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
|
esprehn
2015/12/03 18:47:34
leave out html, head and body
|
| + <title>HTMLCanvasElement capture into MediaStream</title> |
| + <!-- |
| + This test verifies that the output of captureStream on <canvas> |
| + runs as expected. |
| + --> |
| +</head> |
| +<body> |
| + <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
|
| +</body> |
| +<video id="video_source" muted="true" hidden loop> |
| + <source src="resources/canvas_video.webm" type='video/webm' /> |
|
esprehn
2015/12/03 18:47:34
leave out / on elements
|
| +</video> |
| +<canvas id="canvas_source" width="240" height="180"></canvas> |
| +<video id="video_sink" muted="true" hidden></video> |
| +<canvas id="canvas_sink" width="240" height="180"></canvas> |
| +<script type="application/x-javascript"> |
| + if (window.testRunner) { |
| + testRunner.dumpAsText(); |
| + testRunner.waitUntilDone(); |
| + } |
| + |
| + var canvas_source = document.getElementById("canvas_source"); |
| + var context_source = canvas_source.getContext('2d'); |
| + var video_source = document.getElementById("video_source"); |
| + video_source.addEventListener("playing", onVideoSourcePlaying); |
| + video_source.play(); |
| + var video_sink = document.getElementById("video_sink"); |
| + var canvas_sink = document.getElementById("canvas_sink"); |
| + var context_sink = canvas_sink.getContext('2d'); |
| + |
| + function onVideoSourcePlaying() { |
| + video_source.removeEventListener("playing", onVideoSourcePlaying); |
| + drawVideoToCanvas(context_source, video_source, canvas_source); |
| + onWrite("Video source started drawing on canvas source."); |
| + createCaptureStream(); |
| + } |
| + |
| + function createCaptureStream() { |
| + try { |
| + var stream = canvas_source.captureStream(); |
| + video_sink.src = URL.createObjectURL(stream); |
| + onWrite("Got a stream from canvas."); |
| + } catch(e) { |
| + onWrite("FAIL: " + e); |
| + } |
| + video_sink.addEventListener("play", onVideoSinkPlaying); |
| + video_sink.play(); |
| + } |
| + |
| + function onVideoSinkPlaying() { |
| + onWrite("Video sink playing."); |
| + drawVideoToCanvas(context_sink, video_sink, canvas_sink); |
| + onWrite("Video sink started drawing on canvas."); |
| + setTimeout(onCanvasPlaybackIsOn, 2000); |
|
Justin Novosad
2015/12/03 15:44:37
Can we avoid using set timeout with long delays. I
|
| + } |
| + |
| + function onCanvasPlaybackIsOn() { |
| + if (window.testRunner) |
| + testRunner.notifyDone(); |
| + } |
| + |
| + function drawVideoToCanvas(ctx, video, canvas) { |
| + ctx.drawImage(video, 0, 0, canvas.width, canvas.width); |
| + setTimeout(drawVideoToCanvas, 100, ctx, video, canvas); |
|
Justin Novosad
2015/12/03 15:44:37
This animation loop should use requestAnimationFra
|
| + } |
| + |
| + function onWrite(text){ |
|
Justin Novosad
2015/12/03 15:44:37
why the 'on' prefix here?
|
| + var tx = document.getElementById('tx'); |
| + tx.appendChild(document.createElement('br')); |
| + tx.appendChild(document.createTextNode(text)); |
| + } |
| +</script> |
| +</html> |
