html5-canvas_编程技术问答社区_程序员问答知识库

以下是关于 html5-canvas 的编程技术问答

我正在尝试使用HTML5和JavaScript构建视频会议，直到现在我能够将相机捕获并显示在Canvas 上这是代码 nav .search { display: none; } .demoFrame header, .demoFrame .footer, .demoFrame h1, .demoFrame .p { display: none !important; } h1 { font-size: 2.6em; } h2, h3 { font-size: 1.7em; } .left { width: 920px

0 2023-12-02 编程技术问答社区 websocket video-streaming html5-canvas html5-video webrtc

SignalR WebRTC WebSocket已经处于CLOSING或CLOSED状态

我想对SignalR和WEBRTC的最简单实现进行测试.我在 https://github.com/foyzulkarim/webrtc 我制作了两个不同的文件" index.html"和" index1.html". 在index.html中，我通过SignalR广播了一个视频文件，并且进行得很好.但是，当我刚刚用网络摄像头的feed替换现有视频文件时，它开始遇到错误. 运行几秒钟后，我开始遇到此错误 " Websocket已经处于关闭或关闭状态." 我试图进行油门，但没有更改，仍然会得到错误.知道为什么会发生吗? 错误图像您可以查看视频i http://1drv.ms/1mem1oi 解决方案消息大小似乎是这里的关键问题. 在您的项目中，每个视频的帧大约为40k，但CAM的每个帧都超过140K. 实际上，在您播放视频时，在index.html中，大约20秒钟后，将有几个大于70k的帧，也会给您带来相同的错误. 我尝试发送一些长字符串消息作为

0 2023-12-02 编程技术问答社区 websocket html5-canvas html5-video signalr webrtc

如何从Java websocket服务器发送图像到HTML5画布中使用？

我有Java中实现的WebSocket服务器.当客户端连接时，我想通过此连接发送图像，以供客户端在画布元素中使用.我提出了以下服务器代码: public void onOpen(Connection connection) { try { BufferedImage image = ImageIO.read(new File("image.jpg")); ByteArrayOutputStream baos = new ByteArrayOutputStream(); ImageIO.write(image, "jpg", baos); byte[] byteArray = baos.toByteArray(); connection.sendMessage(byteArray, 0, byteArray.length); } catch (Exception e ){

0 2023-12-02 编程技术问答社区 java image websocket html5-canvas

如何从交互式图表中抓取json数据？

我有一个特定部分的特定部分该节 - 我检查了该特定部分的元素，并注意到它在画布标签内.但是，我还检查了网站的源代码，发现数据以我不熟悉的格式在源代码中.这是该数据的示例 JSON.parse('\x5B\x7B\x22id\x22\x3A\x2232522\x22,\x22minute\x22\x3A\x2222\x22,\x22result\x22\x3A\x22MissedShots\x22, \x22X\x22\x3A\x220.7859999847412109\x22,\x22Y\x22\x3A\x220.52\x22,\x22xG\x22\x3A\x220.03867039829492569\x22, \x22player\x22\x3A\x22Lionel\x20Messi\x22, \x22h_a\x22\x3A\x22h\x22, \x22player_id\x22\x3A\x222097\x22,\x22situation\x22\x3A\x22OpenPlay\

0 2023-12-01 编程技术问答社区 json python-3.x web-scraping html5-canvas

在没有画布/显示器的情况下拍摄不可见的WebRTC/视频照片

我已经阅读了但是我做不是需要(并且不想)向用户显示拍摄图像，因此我也不想使用画布，因为我会说第一次绘制画布只是为了获取图像数据(作为iMagedata或dataUri)可能对性能不利. 因此，有没有使用画布的方法可以获取图像数据? 解决方案使用帆布完全很好，并且表现良好.只是不要将画布附加到文档上，也不会显示.我认为您对性能的关注是没有根据的. 将数据从流中获取数据的唯一方法是有一个关于 flag 背后.它将提供.takePhoto()方法，该方法还可以在可用的地方访问全分辨率的照片摄像头(即手机).

0 2023-12-01 编程技术问答社区 html html5-canvas video-streaming webrtc video-capture

我们如何使用mediaRecorder将画布流和音频流混合起来？

i使用canvas.capturestream()有一个帆布流.我还有WebRTC视频通话中的另一个视频流.现在，我想将帆布流与视频流的音轨混合.我怎么做? 解决方案使用 MediaStream constructor 在Firefox和Chrome 56中可用，将轨道结合到新的流中: let stream = new MediaStream([videoTrack, audioTrack]); 在Firefox中为我工作(使用 https fiddle 在Chrome中在 navigator.mediaDevices.getUserMedia({audio: true}) .then(stream => record(new MediaStream([stream.getTracks()[0], whiteNoise().getTracks()[0]]), 5000

0 2023-12-01 编程技术问答社区 javascript html5-canvas webrtc mediarecorder-api

WebGL帆布在Mousemove上崩溃，仅在使用WebPack捆绑资源时

Draw here

0 2023-12-01 编程技术问答社区 javascript webpack html5-canvas webgl bundler

平滑画布动画

我正在尝试使用HTML5的画布来学习如何创建平滑的JavaScript动画.由于某种原因，动画不是平稳的，而是" Sputtery". 您可以看到我在此jsfiddle 上另一位开发人员能够使用他们的WebViews源代码，该概念 a href =" http://www.sencha.com/products/extjs" rel =" nofollow"> ext.js .出于学习目的，我想避免使用任何图书馆来更好地理解JavaScript.可以通过我已经阅读并尝试了各种不同的方案，从将update从请求inimatimationframe中拉出到自己的循环中，将上下文转换为抽奖位置，绘制绘制后背景上下文并复制它到视口.以下代码代表了我到目前为止的最大努力. 关于如何改善性能的任何建议预先感谢您. var app; var now = then = delta = 0; var viewport = document.createElement( 'canva

0 2023-12-01 编程技术问答社区 javascript animation webkit html5-canvas game-loop

blockWebkitDraw是什么意思，如何解决？

我正在使用WebView包装Android应用程序，并且需要渲染HTML5画布.除一个设备外，它在我的所有设备上都可以正常工作.我的Galaxy S4(4.2.2)正在闪烁画布，然后迅速变成灰色.这是它产生的logcat消息: d/geduretetector(20071):[表面触摸事件] mweepdown false， mlrsdcnt:-1 mtouchcnt:7 mfalsesizecnt:0 v/webViewInputDisPatcher(20071):blockwebkitdraw v/webViewInputDisPatcher(20071):blockwebkitdraw lockedfalse d/webview(20071):blockwebkitviewmessage = false 我单击一个按钮，然后画布应该呈现.这就是为什么第一个日志项目是用于表面触摸事件的原因.当我直接使用WebKit浏览器ping时，它可以在我的S4上工作

0 2023-12-01 编程技术问答社区 android webkit html5-canvas

webkit css resize在canvas作为子节点时不起作用？

假设以下HTML和CSS代码段: 在 #outer { width: 100px; height: 100px; overflow: hidden; resize: both; border: 1px solid black; } #inner { width: 100%; height: 100%; } 我希望Div可以重新介绍，并且在Firefox中.但是，在基于Webkit的浏览器(例如Chrome和Opera)中，事实并非如此.但是，如果我用Div替换内部画布，它也可以在那里工作.因此，我的问题是:为什么在这种情况下，帆布元素可以阻止外部div蜜蜂可重新解释?我该如何解决这个问题? 解决方案看来画布正在采取鼠标事件阻止调整大小.如果您在画布上考虑pointer-events:none，它将起作用:

0 2023-12-01 编程技术问答社区 html css html5-canvas webkit

画布的总内存使用量超过了最大限制（Safari 12）。

我们正在处理可视化Web应用程序使用D3-Force在画布上绘制网络. ，但是现在我们在iOS上的浏览器上遇到了问题，在与接口进行了几次交互后，该过程崩溃了. 回忆我，这不是较旧版本的问题(在ios12之前)，但我没有任何不定期的设备来确认这一点. 我认为此代码总结了问题: const { range } = require('d3-array') // create a 1MB image const createImage = () => { const size = 512 const canvas = document.createElement('canvas') canvas.height = size canvas.width = size const ctx = canvas.getContext('2d') ctx.strokeRect(0, 0, size, size) return canv

0 2023-11-30 编程技术问答社区 javascript safari html5-canvas webkit mobile-safari

Android Chrome上的HTML5视频绘制到canvas2D的问题

我在JavaScript(无jQuery或其他框架)中开发VR HTML5页面，该页面使用WebGL呈现一个球体，并具有将流视频呈现到的纹理. 在iPhone 6，6+上工作正常，但是在Android上，我撞到了墙壁 - 简单地，视频没有被转移到纹理中(gl.texsubimage2d).质地仍然是黑色的. 没有webgl错误. 因此，我创建了一个没有WebGL的测试，该测试只是尝试播放视频并将其框架绘制到Canvas2d中，因此我至少可以验证帧确实是从流视频中提取的. 视频是在用户互动(触摸)上播放的，当触发 canplay 事件时，我启动帧循环(window.requestanimationframe)，将视频绘制到canvas(canvas.drawimage(视频，0,0，0,0) ) 视频和画布都在文档主体上可见，彼此相邻. 结果:在桌面上，它可以按预期工作，两个屏幕，左为带有本机控件的视频，右为canvas.当我单击播放时，视频启动，并且画布同

0 2023-11-30 编程技术问答社区 javascript android html5-canvas html5-video webgl

摄像头旋转后的WebGL平移（作为FPS）。

我已经完成了一些使用C ++和OpenGL的项目，现在我使用HTML5和WebGL创建了一个简单的项目. 问题是，在我旋转相机后，移动始终沿默认轴而不是沿旋转的轴沿距离.例如:我向前迈进 - >没问题，我将相机旋转90度 - >没问题，现在，我在前进的情况下，相机就在世界轴上(因此在相机前，作为FPS游戏)，但相机始终朝着启动的Z轴(启动前轴).很奇怪的是，我的代码与OpenGL合作良好，现在不再与WebGL一起使用. 代码的主要部分是用JavaScript编写的.我使用" glmatrix-0.9.5.min"库来简化矩阵计算. 这些是保存相机状态的变量: var px = 0.0, py = 2.0, pz = 10.0, ang = 0.0, elev = 0.0, roll = 0.0; var DELTA_ANG = 0.5, DELTA_MOVE = 0.5; 这是我计算模型视图矩阵并将其传递给着色器的部分: mat4.identity(

0 2023-11-30 编程技术问答社区 javascript html5-canvas webgl shader

WebGL在每个Interval之间进行清除

当gl.drawArrays被顺序调用时，它绘制在画布上的先前图形的顶部.但是，当我将其放入setInterval()中时，它会在重新刷新之前清除画布. 绘制矩形彼此绘制矩形的代码: for(var i =0; i { setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20); gl.drawArrays(gl.TRIANGLES, 0, 6); }, 500); 这是一个完整的 fiddle 包含上述代码的小提琴. 我正在制作一个涉及对大

0 2023-11-30 编程技术问答社区 html5-canvas webgl

WebGl Fragment Shader通行证阵列

我对OpenGL或WebGL一无所知.我想知道是否可以将碎片着色器传播为论点.具体来说，我想将其传递给一个多维数组，例如为每个像素设置的颜色，例如: [0][0][0] = 1 将是(0，0)的像素的红色组件. 解决方案这样做的标准方法是使用其他解决方案西蒙的答案在上是正确的.但是我花了大约6个小时才能真正使它起作用.这是我作为HTML文件的完整工作代码.希望它能为您节省我今晚遇到的所有麻烦. 如何使用:单击画布上的任何地方以设置或卸下瓷砖. 测试在:chrome，ie，边缘: TEXTURE AS TILEMAP

0 2023-11-30 编程技术问答社区 javascript html opengl-es html5-canvas webgl

在Webgl中剪切图像

2-D画布提供了一个称为Draw Image的API: context.drawImage(img，sx，sy，swidth，sheight，x，y，宽度，高度); 其中 sx 是图像剪辑开始的位置. 我正在尝试使用 teximage2d 使用WebGL来渲染2D图像.我想检查是否有办法使用WebGl . . 我使用以下教程将2D图像呈现使用WebGL. 原始图像: 用绘制图(2D)剪切: 用WebGL剪切: var gl,program,positionLocation,originalImageTexture,canvas; var x = 10; var y = 20; function setupWebGL(){ var canvas = document.getElementById("canvas"); gl = canvas.getContext("webgl"); if (!gl) { return;

0 2023-11-30 编程技术问答社区 html5-canvas webgl image-clipping

JavaScript图像仅在刷新时加载

我目前正在为游戏引擎上的一个非常烦人的问题而苦苦挣扎... 我无法弄清楚为什么图像第一次没有加载页面加载，并且要使这项工作我必须刷新它. 这是我当前的代码: 纹理创建: /** * @param {GLContext} context Context * @param {boolean} clamp Clamp * @param {Integer} filter Filter */ this.create = function(filename, context, filter, clamp) { this.filename = filename; this.context = context; var gl = context.GL; this.id = gl.createTexture(); this.id.image = new Image(); var _this = this; this.

0 2023-11-30 编程技术问答社区 javascript html html5-canvas webgl

在HTML5画布上添加按钮和控件

我使用的是三个.JS 3D引擎.如何在我的WebGL帆布上添加UI按钮? 解决方案使用css以的绝对定位html元素. 就像所有其他HTML元素一样，同样的技巧也可以.

0 2023-11-30 编程技术问答社区 javascript html5-canvas webgl three.js

Three.js: 纹理到数据夹具

我正在尝试在JavaScript中实现延迟的网络摄像头查看器，使用three.js for WebGL功能. 我需要存储从网络摄像头中抓取的帧，因此可以在一段时间后显示它们(有些毫秒至一秒钟).我可以使用canvas和getImageData()在没有三个js的情况下执行此操作.您可以找到我正在尝试找到一种无需画布的方法，但是使用three.js Texture或DataTexture对象. 在这里是我正在尝试的示例.问题在于我找不到如何将图像从Texture(image属于HTMLVideoElement)复制到另一个. 在rotateFrames()功能中，旧的框架应丢失，并且应该像在FIFO中一样替换.但是线 frames[i].image = frames[i + 1].image; 只是复制引用，而不是纹理数据.我猜DataTexture应该这样做，但是我无法从Texture或HTMLVideoElement中获得DataTexture. 有什么想法

0 2023-11-30 编程技术问答社区 javascript html5-canvas webgl three.js

Safari中的HTML5视频纹理

是否可以在Safari中使用视频作为WebGL的纹理(我什至不是在谈论ios Safari)?我无法使它起作用.这是我可以提出的最简单的代码来复制: https://jsfiddle.net/bmkb6r9h/3/3/它行不通在这里一旦视频源来自另一个域或子域，SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent将视频纹理与texImage2D>. 一起失败. 这是我的代码(对不起，有点长，但这是WebGL的发展)也很乐意对如何改善WebGL的评论.我从 https://github.com/hawksley/elevr-web-player是360个视频播放器的很好的介绍. // get DOM elements videoContainer = document.getElementById('video-c

0 2023-11-30 编程技术问答社区 javascript safari html5-canvas html5-video webgl

首页
<
1
2
3
4
5
6
7
8
>
尾页