| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 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> |
| 12 </body> |
| 13 <video id="video_source" muted="true" hidden loop> |
| 14 <source src="resources/canvas_video.webm" type='video/webm' /> |
| 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); |
| 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); |
| 68 } |
| 69 |
| 70 function onWrite(text){ |
| 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 |
|---|
Chromium Code Reviews
Issue 1467103003:
Basic use implementation for MediaStream from Canvas: captureStream() (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master