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

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

一、问题描述

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

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

<canvas class="display"/>

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

二、原因、解决办法

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

1. 页面中放一个 canvas 的盛放容器

<view class="canvas-container"></view>

2. 创建 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})

三、结果

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