个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我目前正在尝试使用 captureStream() 方法将 Canvas 转换为实时视频流。因此，我首先创建了一个 Canvas ，您可以在其中绘制(因此我使用 this little code 。所以我有一个 Canvas ，我可以在该 Canvas 上绘制。现在，我想要在其下方有一个视频流，它永久准确地显示此 Canvas 的内容。
所以我的代码是这样的:
<!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>
当我运行此代码时，我立即收到消息 canvas.captureStream() 不是函数。有人看到错误或者可以告诉我为什么它根本不起作用吗？
谢谢
最佳答案
Ajay 的回答正确指出了第一个问题:您正在调用 captureStream jQuery 对象的方法，而 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> (例如，通过在其上绘制跨源媒体)，流将被静音。
关于javascript - HTML 5 Canvas 到视频流不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44025907/
26
4
0
我正在用 symfony2 编写应用程序，但我遇到了视频流问题。 如果一个 Action 需要很长时间才能执行 - 例如 1 分钟，整个应用程序将被卡住(当在第二个选项卡中打开时)并且必须等待该执行结
我正在用 symfony2 编写应用程序，但我遇到了视频流问题。 如果一个 Action 需要很长时间才能执行 - 例如 1 分钟，整个应用程序将被卡住(当在第二个选项卡中打开时)并且必须等待该执行结
我正在尝试用视频流做一个应用程序，现在我只能从服务器向客户端发送一张图像。当我尝试在客户端发送不止一张图像时，我收到以下错误:“参数无效。”在 pictureBox1.Image = new Bitm
我正在使用 mediaViews 和 html5 在我们的 cakephp 网站上流式传输视频截屏。我正在为播放器使用 videojs，但遇到了一些问题: 不会在 safari/ipad/iphone
我已经安装了fluent-ffmpeg和ffmpeg-static以将流转换为HTML可复制的视频。如何使用这些软件包在客户端中显示流？ 服务器端( main.js ): const { app, B
我在我的应用程序中实现了 TTS(文本转语音)功能。一切都很顺利，但现在我遇到了一个无法找到解决方案的问题。 基本上，我在激活 TTS 功能之前获得音频焦点。在实际的应用程序中，当我这样做时音乐就会停
我已经执行了开源社区链接发布的 AudioPlayer.java 示例 Audio Player Tutorial 我得到以下异常 Exception in thread "main" java.la
有什么方法可以在iOS原生App中通过URL播放无法下载或保存到本地的视频流。我想让用户观看视频，但他不能在本地下载或保存视频(通过第 3 方下载器应用程序)。 在 MPMoviePlayerCont
我正在开发用于网络吞吐量测试的点对点视频流。两个对等点之间的网络支持低比特率传输。 我使用 OpenCV 为视频流制作了简单的 python 程序。 该程序从网络摄像头抓取视频帧并将其编码为 JPEG
我正在我的应用程序中流式传输实时视频。我有一个 .m3u8 链接，它在 vlc 播放器中完美运行。但是当我在我的应用程序中播放这个流时，视频的可视化被破坏了(见截图)。有谁知道，这可能是什么原因造成的
好的。因此，有数十亿种不同的 Android 设备。我有一个视频流服务，非常适用于 iOS。我的应用程序具有实时视频功能和保存的视频剪辑播放功能(也可以流式传输到设备)。我在不同的 Android 设
我有一个屏幕共享应用程序 (WebRTC)。一个用户想与另一个用户共享他的屏幕。就像一个应用程序在用户 1 机器上运行而另一个应用程序在用户 2 机器上运行。用户 1 想要共享他的屏幕，现在如何在用户
我正在尝试提供即时转码的视频。不幸的是，这意味着寻求不起作用。我假设这是因为浏览器不知道视频有多长，因此无法正确显示搜索栏。 有谁知道是否可以对视频的时长进行硬编码？ 我想到的另一个选择可能是创建我自
在将解复用的 h264 解码输出发送到 gstreamer 管道中的 autovideosink 之前，是否可以在两者之间提供一些延迟。如果是这样，任何人都可以发布示例管道来做到这一点。 我使用的管道
一直在把我的头发拉出来，这本来应该是一项快速而简单的任务。 我有一个自托管的 WCF 服务，我需要在其中实现实时视频转码，转码本身不是问题，使用 FFMpeg 到本地临时文件。 我的代码的快速示例；
我想在 C# 应用程序和浏览器之间建立视频流。 我使用 Websockets 进行通信。 视频源是网络摄像头。 我可以请求单个 PNG 帧，但速度太慢了。 websocket 服务器( Ratchet
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
是否可以在 lync 2010 或 2013 中捕获 lync session 的视频流？我已经在我们的实验室中运行了测试版。 UCMA 为 AudioVideoFlow 提供了钩子(Hook)，但似
我有一个 ffmpeg 命令，它接收帧流并输出 ogg 视频。如何从另一个文件中添加音频？ ffmpeg -f rawvideo -pix_fmt bgr24 -s WIDTHxHEIGHT -r 3
我正在使用全息镜头，并且我正在尝试保存具有可用世界/投影矩阵的视频流。我一直在尝试拍摄一系列照片并保存数据，但我找不到保存图像和矩阵的方法。 保存到磁盘时，没有获取照片捕获帧(包含矩阵数据)的选项，保
我是一名优秀的程序员,十分优秀！