HTML 5画布到视频流不起作用

Question

I'm currently trying to use the captureStream() method to convert a canvas to a live video stream. 我目前正在尝试使用captureStream()方法将画布转换为实时视频流。 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>

the JS files you find under the link (but those are only interesting for the drawing, so they won't change anything here). 您在链接下找到的JS文件（但是这些文件仅对工程图很有趣，因此它们在这里不会发生任何变化）。

When I run this code, I immediately get the message canvas.captureStream() is not a function. 运行此代码时，我立即收到消息canvas.captureStream()不是函数。 Does anybody see a mistake or can tell me why its not working at all? 是否有人看到错误或可以告诉我为什么它根本不起作用？

Thanks 谢谢

Answer 1

Ajay's answer correctly points the first issue : You are calling the captureStream method of an jQuery object, which method doesn't exist. Ajay的答案正确指出了第一个问题：您正在调用jQuery对象的captureStream方法，该方法不存在。

Second issue is that #canvasDiv is an DIV element, and not an Canvas. 第二个问题是#canvasDiv是DIV元素，而不是Canvas。 Only canvas and media elements have an captureStream method. 只有canvas和media元素具有captureStream方法。

So you need to have an <canvas> element in your document, and to get the element referenced by its jQuery object, eg 因此，您需要在文档中有一个<canvas>元素，并获取其jQuery对象引用的元素，例如

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

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

Now, note that in Firefox, to be able to capture a stream from an canvas element, its context must be initialized, or captureStream will throw an NS_Error. 现在，请注意，在Firefox中，要能够从canvas元素捕获流，必须对其上下文进行初始化，否则captureStream将抛出NS_Error。

 var canvas = $('#myCanvas')[0]; // [0] => the element // first initialise a context var ctx = canvas.getContext('2d'); // or whatever ('webgl', 'webgl2' ...) // then you can get the stream var stream = canvas.captureStream(30); // vid.srcObject = stream; // vid.play();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="myCanvas"></canvas>

Answer 2

It seems issue is at var canvas = $('#canvasDiv'); 看来问题出在var canvas = $('#canvasDiv'); print the canvas object in console and see. 在控制台中打印canvas对象，然后查看。 canavs should be the canvas element, not the enclosed div element. canavs应该是canvas元素，而不是封闭的div元素。

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/ 尝试演示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 更新：按照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);

HTML 5画布到视频流不起作用

问题描述

2 个解决方案

解决方案1
1 2017-05-18 06:27:33

解决方案2
0 2017-05-17 13:25:29

HTML 5画布到视频流不起作用

问题描述

2 个解决方案

解决方案1 1 2017-05-18 06:27:33

解决方案2 0 2017-05-17 13:25:29

解决方案1
1 2017-05-18 06:27:33

解决方案2
0 2017-05-17 13:25:29