欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页知识笔记正文

uniapp canvas 无法获取 webgl context 的问题解决

墨初 知识笔记 130阅读
uniapp canvas 无法获取 webgl context 的问题解决 一、问题描述

在 uniapp 中做一个查看监控视频的页面用到的是 JSMpeg 这个库原理就是前后台通过 websocket 不断推送新画面内容到前端前端通过这个 JSMpeg 渲染到前端页面中指定的 canvas 中。
而这个 canvas 需要具备 webgl 的内容而不是 2d 的内容。

最初我是在页面中直接预写了一个 canvas 元素

<canvas classdisplay/>

结果当执行 .getContext(webgl) 的时候始终得到的是 null

二、原因、解决办法

从网上查了下找到答案了原因是 uniapp 中预写的 canvas 默认是 2d 的是无法取到 webgl 内容的。
所以需要在代码中自己创建一个 canvas 再插入到页面中。

页面中放一个 canvas 的盛放容器
<view classcanvas-container></view>
创建 canvas 元素并添加到这个 canvas 容器中
let canvasContainer  document.querySelector(.canvas-container)let canvasEl  document.createElement(canvas)canvasEl.setAttribute(class, display)canvasContainer.appendChild(canvasEl)let url  ws://192.168.0.105${path}this.player  new JSMpeg.Player(url, {canvas: canvasEl})
三、结果

这样就能正常显示视频了。

标签:
声明:无特别说明,转载请标明本文来源!