HTML 5 Canvas 到视频流不起作用答案

【问题标题】：HTML 5 Canvas to Video Stream not workingHTML 5 Canvas 到视频流不起作用
【发布时间】：2017-05-17 13:10:53
【问题描述】：

我目前正在尝试使用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() is not a function。有没有人看到错误或可以告诉我为什么它根本不起作用？

谢谢

【问题讨论】：

您在 jquery 对象上调用它，而不是在 HTMLElement 上。 c应该是画布[0]。在调用 captureStream 之前，IIRC 画布应该被初始化（在其上下文中绘制一些东西）。

标签： javascript html canvas html5-canvas html5-video

【解决方案1】：

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

第二个问题是#canvasDiv 是 DIV 元素，而不是 Canvas。只有画布和媒体元素有captureStream 方法。

所以你需要在你的文档中有一个 <canvas> 元素，并获取它的 jQuery 对象引用的元素，例如

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

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

现在，请注意，在 Firefox 中，为了能够从画布元素中捕获流，必须初始化其上下文，否则 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>

【讨论】：

感谢您的回答.. 但是，它似乎仍然不起作用...使用您提供的代码我现在出现错误canvas.getContext is not a function...
@nameless 你还在用你的var canvas = $('#canvasDiv'); 吗？应该是var canvas = $('#canvasDiv')[0];哦，我的错！您的代码中没有画布元素！
是的，我现在正在尝试这段代码： var canvas = $('#canvasDiv')[0]; var ctx = canvas.getContext('2d'); var video = $('#video'); var 流 = canvas.captureStream(); video.srcObject = 流；
好吧，画布被脚本初始化（使用函数prepareCanvas()调用，所以画布就在那里
您可以在 Ajay 答案的评论中找到console.log('canvas element', canvas ); 的日志输出

【解决方案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 url：https://github.com/williammalone/Simple-HTML5-Drawing-App/blob/master/html5-canvas-drawing-app.js#L405

您可以通过以下方式获取画布和流：

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

【讨论】：

可能是对的，我现在把它改成var canvas = $('canvas');，但仍然出现同样的错误......
您使用的是哪个浏览器版本？我在您的代码中没有看到<canvas> 元素，prepareCanvas() 函数会做什么？最好提供一个 JSfiddle 示例
我使用的是 Chrome 版本 58。您在我的帖子中提到的页面上找不到 prepareCanvas() 和其他的漏洞代码：williammalone.com/articles/…
将画布对象打印为console.log('canvas element', canvas ); 并提供给我日志