站直了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
进行水平或竖直翻转
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)
参考:
Comments