Question

我目前正在尝试使用captureStream()方法将画布转换为实时视频流。因此，我首先创建了一个画布，你可以画画（因此我使用this little code。所以我有一个画布，我可以在那个画布上绘画。现在，我想要一个视频流在它下面，它永久地显示了这个画布的内容。

所以我的代码是这样的：

<!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>

你在链接下找到的JS文件（但这些只对绘图有意义，所以他们不会在这里改变任何东西）。

当我运行此代码时，我立即收到消息canvas.captureStream()不是函数。有没有人看到错误或者可以告诉我为什么它根本不起作用？

由于

Answer 1

Ajay的回答正确地指出了第一个问题：您正在调用jQuery对象的captureStream方法，该方法不存在。

第二个问题是#canvasDiv是DIV元素，而不是Canvas。只有canvas和media元素才有captureStream方法。

因此，您需要在文档中包含<canvas>元素，并获取其jQuery对象引用的元素，例如

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

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

现在，请注意，在Firefox中，为了能够从canvas元素捕获流，必须初始化其上下文，否则captureStream将抛出NS_Error。

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 2

似乎问题是在var canvas = $('#canvasDiv');在控制台中打印画布对象并看到。 canavs应该是canvas元素，而不是封闭的div元素。

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

video.srcObject = stream;

尝试演示https://webrtc.github.io/samples/src/content/capture/canvas-record/

更新：根据git网址：https://github.com/williammalone/Simple-HTML5-Drawing-App/blob/master/html5-canvas-drawing-app.js#L405

你可以得到帆布＆amp;流如下：

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

HTML 5 Canvas到Video Stream无法正常工作

2 个答案: