Javascript HTML 5画布到视频流不工作_Javascript_Html_Canvas_Html5 Canvas_Html5 Video

Javascript HTML 5画布到视频流不工作

javascript html canvas html5-canvas

Javascript HTML 5画布到视频流不工作,javascript,html,canvas,html5-canvas,html5-video,Javascript,Html,Canvas,Html5 Canvas,Html5 Video,我目前正在尝试使用captureStream（）方法将画布转换为实时视频流。因此，我首先创建了一个画布，您可以在其中绘制（因此我正在使用）。因此，我有一个画布，我可以在该画布中绘制。现在，我希望在该画布下有一个视频流，它可以永久准确地显示此画布的内容所以我的代码是： <!DOCTYPE html> <html> <head> <title>HTML5 Create HTML5 Canvas JavaScript Drawing App

我目前正在尝试使用

captureStream（）

方法将画布转换为实时视频流。因此，我首先创建了一个画布，您可以在其中绘制（因此我正在使用）。因此，我有一个画布，我可以在该画布中绘制。现在，我希望在该画布下有一个视频流，它可以永久准确地显示此画布的内容

所以我的代码是：

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


HTML5创建HTML5画布JavaScript绘图应用程序示例
$（文档）.ready（函数（）{
preparecavas（）；
var canvas=$（“#canvasDiv”）；
var video=$（“#video”）；
var stream=canvas.captureStream（）；
video.srcObject=流；
});

您在链接下找到的JS文件（但这些文件只对图形感兴趣，因此它们不会在此处更改任何内容）

当我运行这段代码时，我立即得到消息

canvas.captureStream（）

不是一个函数。是否有人看到错误或可以告诉我为什么它根本不工作

谢谢

问题似乎在

var canvas=$（“#canvasDiv”）；

在控制台中打印canvas对象并查看。

canavs

应该是canvas元素，而不是封闭的div元素

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

video.srcObject = stream;

试试这个演示

根据git url更新：：

您可以按如下方式获取画布和流：

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

Ajay的回答正确地指出了第一个问题：您正在调用jQuery对象的

captureStream

方法，该方法不存在

第二个问题是，

#canvasDiv

是一个DIV元素，而不是Canvas。只有Canvas和media元素具有

captureStream

方法

因此，您需要在文档中有一个

元素，并获取其jQuery对象引用的元素，例如

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

现在，请注意，在Firefox中，为了能够从画布元素捕获流，必须初始化其上下文，否则

captureStream

将抛出一个NS_错误

var canvas=$（'#myCanvas'）[0]；//[0]=>元素
//首先初始化一个上下文
var ctx=canvas.getContext（'2d'）；//或任何（'webgl'，'webgl2'…）
//然后你就可以得到那条小溪了
var-stream=canvas.captureStream（30）；
//vid.srcObject=流；
//视频播放（）；

可能是对的，我现在把它改成了

var canvas=$（'canvas'）；

但还是出现了相同的错误…您使用的是哪个浏览器版本？我在代码中没有看到

元素，什么是

prepareCanvas（）

函数可以吗？最好提供一个JSFIDLE示例。我使用的是Chrome版本58。在我的帖子中提到的页面上找不到prepareCanvas（）和另一个的孔代码：将画布对象打印为

console.log（'canvas element'，canvas）；

并向我提供您在jquery对象上而不是在HtmleElement上调用它的日志。C应该是画布[0]。此外，应该初始化画布（在其上下文上绘制某些内容）在调用captureStream之前。感谢您的回答。。但是，它似乎仍然不起作用…使用您提供的代码，我现在发现错误

canvas.getContext不是一个函数

。@nameless您仍然在使用

var canvas=$（'.\canvasDiv'）；

？它应该是

var canvas=$（'.\canvasDiv'）[0]

Oh my bad！！！您的代码中没有canvas元素！是的，我现在正在尝试以下代码：var canvas=$（'#canvasDiv'）[0]；var ctx=canvas.getContext（'2d'）；var video=$（'#video'）；var stream=canvas.captureStream（）；video.srcObject=stream；画布由脚本初始化（使用函数

prepareCanvas（）

调用，因此画布就在那里，您可以在Ajay答案的注释中找到

console.log（'canvas element'，canvas）；