HTML 5画布到视频流不工作
我目前正在尝试使用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>- 您在链接下找到的JS文件(但这些文件只对绘图感兴趣，因此不会在这里更改任何内容)。
当我运行这段代码时，我立即得到消息canvas.captureStream()不是一个函数。有没有人看到一个错误，或者能告诉我为什么它根本不起作用？
谢谢
回答 2
Stack Overflow用户
发布于 2017-05-18 06:27:33
Ajay的回答正确地指出了第一个问题:您正在调用captureStream对象的jQuery方法，该对象没有这样的方法。
第二个问题是#canvasDiv是一个<div>元素，而不是<canvas>。只有<canvas> and MediaElements (&) have a captureStream()方法。
因此，您需要在文档中包含一个<canvas>元素，并获取jQuery对象引用的元素，例如
<canvas id="myCanvas"></canvas>const $canvas = $('#myCanvas'); // the jQuery object
const canvasElement = $canvas[0]; // the real element现在，请注意，要从<canvas>元素捕获流，必须初始化它的上下文，否则captureStream()会抛出。
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>
也要注意，一旦你污染了你的<canvas> (例如，通过在它上画跨源媒体)，流将是静音的。
Stack Overflow用户
发布于 2017-05-17 13:25:29
问题似乎是在var canvas = $('#canvasDiv');，在控制台中打印画布对象，然后查看。canavs应该是画布元素，而不是封闭的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);https://stackoverflow.com/questions/44025907
复制相似问题
腾讯云开发者
