CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvashtml5-video
nameless
nameless

Reputation: 1521

HTML 5 Canvas to Video Stream not working

I'm currently trying to use the captureStream() method to convert a canvas to a live video stream. Therefore, I first created a canvas, that you can draw in (therefore I'm using this little code. So I have a canvas and I can draw in that canvas. Now, I want a video stream beneath that, which permanently shows exactly the content of this canvas.

So my code is this:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="html5-canvas-drawing-app.js"></script>
  </head>
  <body>
    <div id="canvasDiv"></div>
    <video id="video" autoplay></video>
    <script type="text/javascript">
        $(document).ready(function() {
         prepareCanvas();
        var canvas = $('#canvasDiv');
        var video = $('#video');

        var stream = canvas.captureStream();
        video.srcObject = stream;
});
    </script>
  </body>
</html>

When I run this code, I immediately get the message canvas.captureStream() is not a function. Does anybody see a mistake or can tell me why its not working at all?

Thanks

Upvotes: 1

Views: 8046

Answers (2)

Kaiido
Kaiido

Reputation: 137171

Ajay's answer correctly points the first issue : You are calling the captureStream method of a jQuery object, which doesn't have such a method.

The second issue is that #canvasDiv is a <div> element, and not a <canvas>. Only <canvas> and MediaElements (&) have a captureStream()` method.

So you need to have a <canvas> element in your document, and to get the Element referenced by the jQuery object, e.g

<canvas id="myCanvas"></canvas>

const $canvas = $('#myCanvas'); // the jQuery object
const canvasElement = $canvas[0]; // the real element

Now, note that to be able to capture a stream from an <canvas> element, its context must be initialized, or captureStream() will throw.

const canvas = $('#myCanvas')[0]; // [0] => the element
// first initialize a context
const ctx = canvas.getContext('2d'); // or whatever ('webgl', 'webgl2' ...)
// then you can get the stream
const stream = canvas.captureStream(30);
// const $video = $('#video');
// $video[0].srcObject = stream;
// $video[0].play();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas"></canvas>

Also beware that as soon as you taint your <canvas> (e.g by drawing cross-origin media on it), the stream will be muted.

Upvotes: 1

Ajay
Ajay

Reputation: 2643

It seems issue is at var canvas = $('#canvasDiv'); print the canvas object in console and see. canavs should be the canvas element, not the enclosed div element. 

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');
var stream = canvas.captureStream();

video.srcObject = stream;

Try the demo https://webrtc.github.io/samples/src/content/capture/canvas-record/

Update: As per the git url: https://github.com/williammalone/Simple-HTML5-Drawing-App/blob/master/html5-canvas-drawing-app.js#L405

You can get canvas & stream as follows:

var canvas = document.getElementById('canvas');
var stream = canvas.captureStream();
console.log('canvas element', canvas, stream);

Upvotes: 0

Related Questions