07月15, 2021

站直了问题汇总

站直了APP使用uniapp混合开发的模式嵌入H5来开发的。

视频流getUserMedia,然后截图,然后绘图。

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

默认的视频流不是镜像模式的,你的右手在视频中也是右手。但镜像模式就像照镜子。

可以使用https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setTransform

进行水平或竖直翻转

JS动态设置

this.videoElement = document.createElement('video')
this.canvasElement = document.createElement('canvas')
this.videoElement.setAttribute('playsinline', true)
this.videoElement.style.webkitTransform = "scaleX(-1)";
// this.videoElement.setAttribute('transform', 'scaleX(-1)')

还有图片截取的时候也要翻转

const imageWidth = this.videoElement.videoWidth
const imageHeight = this.videoElement.videoHeight
const context = this.canvasElement.getContext('2d')
this.canvasElement.width = imageWidth
this.canvasElement.height = imageHeight

// 图片也取镜像的图片
context.setTransform(-1,0,0,1,imageWidth,0);

context.drawImage(this.videoElement, 0, 0, imageWidth, imageHeight)

参考:

华为手机如何开启USB调试模式

本文链接:https://www.daguanren.cc/post/zhan-zhi-le-wen-ti-hui-zong.html

-- EOF --

Comments