<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>HTMLCanvasElement capture into MediaStream demo</title> </head> <body> <div> Create Real-Time stream from < canvas > and play it back.</div> </body> <div style="background-color: pink"> <canvas id="c" width="480" height="270"></canvas> </div> </br> <button id="btn1" onclick="startStreaming()">Create Stream from < canvas ></button> <script type="text/javascript" src="dimsum.js"></script> <script type="text/javascript" src="example1.js"></script> <script> var theStream; var thePlayback; function startStreaming() { document.getElementById("btn1").disabled = true; // Create a MediaStream out of the <canvas> tag. theStream = document.getElementById("c").captureStream(); document.body.appendChild(document.createElement("br")); createButton("btn2", "Play back captured Stream to a <video>", startPlayback); document.body.appendChild(document.createElement("br")); } function startPlayback() { document.getElementById("btn2").disabled = true; // And plug the created MediaStream into another <video> tag. createVideoTag("playbackTag", 480, 270, theStream); thePlayback = document.getElementById("playbackTag"); document.body.appendChild(document.createElement("br")); createButton("btn3", "Stop theStream captured from <canvas>", stopStreaming); } function stopStreaming() { document.getElementById("btn3").disabled = true; theStream.getVideoTracks()[0].stop(); } </script> </html>