我正在使用javascript（没有jQuery或其他框架）开发VR html5页面，该页面使用WebGL渲染球体并具有渲染流式视频的纹理。
所有这一切在iPhone 6,6 +上运行良好，但是在Android上我已经碰到了墙 - 简单地说，视频没有转移到纹理（gl.texSubImage2D）。纹理保持黑色。没有抛出WebGL错误。
所以我创建了一个没有WebGL的测试，只是尝试播放视频并将其绘制到canvas2D中，所以我至少可以验证帧是否确实是从流视频中提取的。
视频在用户交互（触摸）上播放，当 canplay 事件被触发时，我启动帧循环（window.requestAnimationFrame）将视频绘制到画布中（canvas.drawImage（video，0,0） ））
视频和画布都在文档主体上可见，彼此相邻。
结果：在桌面上它按预期工作，两个屏幕，左边是带有本机控件的视频，右边是画布。当我点击播放时，视频会启动，并且画布会同时刷新。在Android Chrome 48.0.2564.106上没有绘制像素 - 画布完全为空。
我已经安装了Android Chrome Beta（50.0.2661.57）并且可以在那里运行，但在Android Chrome 48.0.2564.106上却没有。
设置视频和画布的代码：
window.addEventListener("beforeunload", function (e) {
Actions.SendTimeOutEMail();
});
任何人都可以确认Chrome 48及更早版本上的canvas.drawImage是否无法接受视频作为绘图源？对于我而言，这似乎是不可能的，因为WebGL已经在Chrome的支持下使用了很长时间，而且还有很多关于视频纹理的实验。
我尝试过将视频复制到WebGL纹理或Canvas2D的其他示例，但它们也不能正常工作。
这里有什么我想念的吗？
答案 0 :(得分：0)
经过深入研究后，似乎：
自2015年7月以来，Canvas2D.drawImage（视频，0,0）已被破坏（至少我发现此时发现的错误报告）并且有点固定 - 不固定 - 再次修复 - 并且再次没有修复 - 但我可以确认它已在Android Chrome 49和Android Chrome 50（Beta）中修复。将视频中的像素解码为Canvas2D的相同问题影响了将视频绘制到WebGL纹理中。
唯一的解决方法是：a）使用JavaScript中的Websocket + JPG序列流（通过打开的websocket连接接收的图像）定制的视频流服务器或b）JavaScript中的JPG序列流（下载图像一个）一个并负责加载新的 - 删除旧的。）
我使用选项2.b并且CDN踢了它真的非常适合1024x512视频大小，这是足够好的解决方案。
我首先使用http请求预加载mp3文件，然后将其加载到Audio对象中。一旦完成，JPG流媒体将启动，然后将使用声音currentTime值开始播放。它与声音100％同步！
但是，问题已在Chrome 49和Chrome 50（测试版）中修复，因此这可能会在2-3个月内过时。