WebRTC 实时视频处理 基础美颜与视频超分实践.pptx

1、WebRTC 实时视频处理基础美颜与视频超分实践目录1. 应用背景与 HTML5 标准2. Web 平台并行计算标准3. 基于 WebGL 的基础美颜实现4. Web 视频超分探索5. Web 平台深度学习展望应用背景与HTML5标准2014年10月，W3C发布HTML 5.0标准。随着主流浏览器逐步实现对HTML5新特性的支持，Web平台对多媒体内容的处理能力得到空前增强。WebRTC、WebGL、WebAudio等多媒体组件成为Web平台标配的能力。近年来随着RTC、云游戏、人工智能等各种多媒体新需求的出现，HTML标准也在不断演进，WebVR、 WebGPU、WebAssembly、We

2、bGL Compute、WebNN等多项新的标准和规范正在被持续推动。2019作为5G元年，RTC产业迎来蓬勃发展。如何通过HTML5技术为用户提过更多元、更友好的RTC服务，使Web平台成为既能快速触达又具客户粘滞性的渠道成为了RTC服务商所必须面对的问题。以下将从WebRTC所承载的核心对象实时视频流出发，通过2种典型的实时视频处理场景对Web平台面对的主要制约和潜在能力进行探索。Web平台并行运算OpenGL ES for the Web基于OpenGL ES的跨平台Web 2D/3D图形标准，支持以JavaScript API使用GLSL。WebGL 1.0基于OpenGL ES 2.

3、0实现WebGL 2.0基于OpenGL ES 3.0实现WebGL 2.0 Compute基于OpenGL ES 3.1实现WebGL支持的平台：Safari 5.1+Safari on IOS 8Chrome 9+Chrome for Android 25+Mozilla Firefox 4+Firefox for Android YESMicrosoft Edge 12+WebGL 2.0 Compute支持的平台：Chrome with experimental flag enabledWeb平台并行运算WebGL版本演进WebGL与OpenGL ES的关系OpenGL ES3.0Op

4、enGL ES3.2OpenGL ES3.1OpenGL ES2.02007201220142015201720112019开发中WebGL 1.0WebGL 2.0 WebGL 2.0 Extension基于GLES2.0基于GLES3.0基于GLES3.1WebGL 2.0 ComputeParallel Shader CompilationWEBGL_video_to_textureWebGL 2.0 Extension包含：Web平台并行运算WebGPU平台支持目标在Web平台提供新的接口来获取原生系统中现代3D图形及通用计算系统的能力。Chrome 78 for Macwith ex

5、perimental flagSafari Tech Preview 91+底层实现：标准与实现草案：https:/gpuweb.github.io/gpuweb/实现： WebMetal (Apple) Dawn (Google) Obsidian (Mozilla)Web平台并行运算Heterogeneous parallelcomputing in web browsersKhronos OpenCL标准在Web平台的映射。依靠GPU和多核CPU提供多种并行处理能力，为图像和视频处理以及3D游戏物理运算提供加速。在所有浏览器上均未实现；Intel、Samsung、Nokia分别实现过通过

6、浏览器插件或Web Runtime实现过自己的WebCL版本。CrosswalkProjectTencent AlloyImageWeb平台并行运算性能平台兼容性文档&易用性最好较好较好N/A最好最差较差较差较差WebGPU基于WebGL的基础美颜实现基础美颜使用的相关Web模块视频采集、处理及传输CanvasCamera数据采集及网络媒体传输视频及图像渲染WebGLAgora Web SDKGLSL实现图像滤波算法传输控制、RTC框架基于WebGL的基础美颜实现主要步骤1.视频采集2.创建WebGL纹理并应用GLSLvar constraints = audio: true, video:

7、width: 1280, height: 720 ;var video;var canvas = document.getElementById(myCanvas);var gl = canvas.getContext(webgl2);navigator.mediaDevices.getUserMedia(constraints)gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, gl.RGBA, gl.RGBA,.then(function(mediaStream) gl.UNSIGNED_BYTE, video);video = document.querySele

8、ctor(video);video.srcObject = mediaStream;video.onloadedmetadata = function(e) video.play();gl.useProgram(skinToneProgram);)gl.drawArray(gl.TRIANGLES, 0, 6);.catch(function(err) console.log(err.name + : + err.message); );3.从Canvas获取MediaStream4.发送VideoTrackvar fps = localStream.attributes.maxFrameRa

9、te;var rtcRtpSender = that.pc.peerConnection.getSenders();rtcRtpSender.replaceTrack(videoTrack);var canvasCaptureMediaStream = canvas.captureStream(fps);var videoTrack = canvasCaptureMediaStream.getVideoTracks()0;基于WebGL的基础美颜实现WebGL美颜处理帧率FPS58设备Redmi Note7 骁龙660 480p29Redmi Note7 骁龙660 720pRedmi Not

10、e7 骁龙660 1080p7PC Intel i7 UHD620集显 480pPC Intel i7 UHD620集显 720pPC Intel i7 UHD620集显 1080p606022视频演示效果基于WebGL的基础美颜实现实时美颜处理对WebRTC性能影响480p 30FPS720p 15FPS720p 30FPS关闭美颜开启美颜关闭美颜开启美颜关闭美颜开启美颜基于WebGL的基础美颜实现Chromium多进程与硬件加速合成机制基于WebGL的基础美颜实现Chromium Camera视频采集与渲染Shared MemoryGPU MemoryI420 DataNV12 DataV

11、ideoFramesTexturesVideo DataVideoCaptureController(VideoFrameReceiver)VideoCaptureImplVideoCaptureDeviceBlink:HTMLVideoElementWebMediaPlayerMSGLES / D3DVideoCaptureDeviceClientVideoCaptureHostBuffer IDGpuMemoryBufferVideoFramePoolIPCIPCIPCVideo Capture ProcessBrowser ProcessRender ProcessGPU Process

12、基于WebGL的基础美颜实现Chromium从Video生成WebGL纹理的性能优化WebGL视频超分探索SRCNN工具箱Web平台开源CNN框架Keras.js支持Keras深度学习模型文件WebGL加速项目在Tensorflow.js发布后停止维护ONNX.js支持onnx格式的深度学习模型文件WebGL加速实现了基本的OperationTensorFlow.js MIL WebDNN支持Tensorflow和Keras格式的模型文件实现了web平台对Keras深度学习模型的支持WebGL加速WebGPU或WebAssembly实现支持较多的OperationWebGPU计算只能在MacO

13、S或IOS上运行WebGL视频超分探索SRCNN工具箱对比GPU加速平台兼容性 模型兼容性 生态及社区一般好一般ONNX.jsKeras.jsWebGLWebGLWebGLWebGPU好好较好较好停止维护活跃TensorFlow.jsMIL WebDNN较差一般一般WebGL视频超分探索TensorFlow.js在浏览器和Node.js训练和部署机器学习模型的通用JavaScript库。WebGL推理:数据IO过程： TensorFlow生态成员，获TensorFlow的工具生态系统支持 具有WebGL和WebAssembly两种后端，计划实现WebGPU后端 支持Keras模型及TesorF

14、low GraphDef模型导入，可通过第三方工具导入Onnx模型文件 无法支持大规模、长时间训练，以及多机分布式训练运算特性WebGL视频超分探索基于TensorFlow.js实现超分视频数据获取var canvas = document.getElementById(canvas);var gl = canvas.getContext(2d);gl.drawImage(video, 0, 0);var imageData = gl.getImageData(0, 0, width, height);神经网络模型加载和推理var model = await tf.loadLayersMode

15、l(sr-tf/model.json);const inputTensor = tf.tensor(inputs, 1, 1, height, width, float32);model.summary();const prediction = model.predict(inputTensor);const outputY = await prediction.data();超分图像显示var srImage = new ImageData(srDataArray, width * 2, height * 2);document.getElementById(tf-canvas).getCo

16、ntext(2d).putImageData(srImage, 0, 0);WebGL视频超分探索TensorFlow.js视频超分帧率视频分别率： 240 x 320处理方式：逐帧处理Geforce MX250UHD Graphics 620WebGL视频超分探索TensorFlow.js接口定制fromElement(pixels: PixelData|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement,numChannels: number,callback: (gpgpu: any) = void): Tensor

17、3D const tempPixelHandle = this.makeTensorHandle(texShape, int32);this.texData.get(tempPixelHandle.dataId).usage = TextureUsage.PIXELS;this.gpgpu.uploadPixelDataToTexture(this.getTexture(tempPixelHandle.dataId), pixels as ImageData);this.gpgpu.inputTexture = this.getTexture(tempPixelHandle.dataId);l

18、et program, res;增加从Video生成纹理的输入接口该接口以HTMLVideoElement为参数，直接将从Video元素生成texture，避免从Javascript输入图像数据。if (ENV.getBool(WEBGL_PACK) program = new FromPixelsPackedProgram(outShape);const packedOutput =this.makeOutputArray(program.outputShape, float32);res = pileAndRun(program, tempPixelHandle, packedOutput

19、); else program = new FromPixelsProgram(outShape);res = pileAndRun(program, tempPixelHandle);增加推理结果的纹理获取接口通过该接口应用可以直接从tensorFlow.js拿到Texture推理结果，应用可以通过WebGL对结果继续进行处理直至在Canvas中显示， this.disposeData(tempPixelHandle.dataId);callback(this.gpgpu);return res as Tensor3D;避免超分数据在GPU和CPU之间的复制。tfjs-core/src/ba

20、ckends/webgl/backend_webgl.tsWebGL视频超分探索基于定制tfjs的视频超分实现function sr(video) gl.scissor(0, 0, width * 2, height * 2);/ Create input tensor from Video elementvar videoInput = tf.browser.fromElement(video, 1,function(result) gl.useProgram(screenProgram.program);gpgpu = result;gl.activeTexture(gl.TEXTURE0

21、);gl.bindTexture(gl.TEXTURE_2D, gpgpu.outputTexture);gl.uniform1i(aLocation, 0););videoInput.shape = 1, 1, 240, 320;videoInput.strides = 76800, 76800, 320;gl.activeTexture(gl.TEXTURE1);gl.bindTexture(gl.TEXTURE_2D, gpgpu.inputTexture);gl.uniform1i(bLocation, 1);/ Predict and create output texturecon

22、st prediction = model.predict(videoInput);/ Make output texture drawable and draw to canvasvar aLocation = gl.getUniformLocation(program, A);var bLocation = gl.getUniformLocation(program, B);gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);/ Release tensorsvideoInput.dispose();prediction.dispo

23、se();gl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.viewport(0, 0, width * 2, height * 2);WebGL视频超分探索基于定制tfjs的视频超分帧率视频分别率： 240 x 320处理方式：逐帧处理Geforce MX250UHD Graphics 620WebGL视频超分探索图像效果(320 x 240)视频演示效果WebGL视频超分探索基于定制tfjs的视频超分资源开销Web平台深度学习展望W3C机器学习社区组正在推动的Proposal之一目标：定义一套硬件加速实现的神经网络专用API内容：https:/webmachinelearning.github.io/webnn/Web平台深度学习展望HIAIAgora Web RuntimeNPE SDKNNAPI通过定制的Web Runtime将NPU、DSP等硬件能力提供给Web开发者Web平台深度学习展望总结1. WebGL是Web实时视频处理的有效手段2. 避免使用JS对视频数据进行处理3. 了解浏览器原理避免低效的WebGL操作4. 通用处理框架可依据应用场景进行特殊优化5. 部分浏览器暂时无法满足的需求可通过定制Web引擎实现