2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存

〝 古人学问遗无力，少壮功夫老始成 〞

随着5G技术的发展，音视频直播领域发生了翻天覆地的变化，尤其是 2011 年 Google 推出 WebRTC 技术后，大大降低了音视频技术的门槛，你再也不必自己去实现回音消除算法了，也不用自己去实现各种音视频的编解码器了，更不必去考虑跨平台的问题了。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

 一、拍照原理

二、Canvas绘图

三、图片保存

四、实现滤镜

---

 一、拍照原理

好多人小时候应该都学过，在几张空白的纸上画同一个物体，并让物体之间稍有一些变化，然后连续快速地翻动这几张纸，它就形成了一个小动画，音视频播放器就是利用这样的原理来播放音视频文件的

播放器播的是非编码帧（解码后的帧），这些非编码帧就是一幅幅独立的图像

浏览器提供了一个非常强大的对象，称为Canvas，你可以把它想像成一块画布，你可以在上面画点、面、图形

拍照原理其实就是获取摄像头里面的非编码帧数据，并在Canvas上画出来

    
    
    
    




    Realtime communication with WebRTC 
    
    
    Take

二、Canvas绘图

canvas中提供了 ctx.drawImage(image, dx, dy, dWidth, dHeight) 方法进行绘图

image：可以是一幅图片，或 HTMLVideoElement，既可以是一幅图片，也可以是一个 Video 元素

dx, dy：图片起点的 x、y 坐标

dWidth：图片的宽度

dHeight：图片的高度

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

三、图片保存

首先，通过 Canvas 的 toDataURL 方法获得图片的 URL 地址

然后，创建一个标签

将 URL 地址放到标签中，当用户点击时就将图片下载下来

    
    
    
    




    Realtime communication with WebRTC 
    
    
    Take
     保存 

四、实现滤镜

视频流中获取到照片后，你还可以通过滤镜为照片增加点特效，这样会让你的照片更加特别

在浏览器中对于图片的滤镜处理是通过 CSS 来控制的

首先在 HTML 中增加 CSS 的滤镜代码如下：

blur：模糊度

grayscale：灰度（黑白）

invert：反转

sepia：深褐色

当用户点击拍照时候，我们可以给canvas这个标签加上一个滤镜类命即可

    
    
    
    
    



    Realtime communication with WebRTC 
    
  	
    Take

    
    
        None
        blur
        Grayscale
        Invert
        sepia