6.webrtc音视频数据采集

朱雀 2023-06-07 12:03 238阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70][]

通过getUserMedia这个方法采集音视频数据，在这个方法里面有一个重要的参数 constraints，这个constraints就是![20191014192803706.png][]类型，这个类型比较特别，在这个类型里面有两个元素，一个是video，一个是audio，也就是说分别对video和audio做一些限制，既可以是布尔类型，也可以是![20191014192803711.png][]这种复杂的类型，如果它是布尔型，也就是这里我们设置video和audio都是true的话，那么它采集的数据既有音频数据也有视频数据，如果我们只要其中一项，比如只要音频，那就是audio等于true，video等于false。如果把它当成![20191014192803711.png][]这种复制类型的话，就可以设置一些具体的控制了，比如说视频，可以控制分辨率，比如设置成640\*480，720p，1080p等等，这些都可以设置，还可以设置帧率，15帧，25帧，30帧，同样对于音频来说，也可以设置音频相关的，比如音频的延迟，音量的大小，单声道还是双声道等等都可以进行控制，这方面的具体讲解我们会在下面的课程中做详细介绍。

实战：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 1][]

index.html
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
    </head>
    
    <body>
    
           
    
           
    
           <video  autoplay playsinline  id="player"></video>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    </body>
    
    </html>
    
    client.js
    
    'use strict'
    
    
    
    
    
    //首先获取到在html中定义的vedio标签
    
    var videoplay = document.querySelector('video#player');
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        videoplay.srcObject = stream;
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    //如果这个方法不存在，则打印
    
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
    
        console.log('getUserMedia is not supported！');
    
    }else {
    
        //设置参数，同时采集音频和视频数组
    
        var constraints = {
    
                video:true,
    
                audio:true
    
        }
    
    
    
    
    
        //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
        navigator.mediaDevices.getUserMedia(constraints)
    
            .then(gotMediaStream)
    
            .catch(handleError);
    
    }

执行

node server.js

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 2][]

6-2 WebRTC\_API\_适配(浏览器适配方法)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 3][]

在3W规范中，我们采集音视频使用的API就是getUserMedia，但是google chrome实现的名字，是![20191014192803903.png][]， firefox是![20191014192803943.png][]，

这样的话给前端开发带来很大麻烦，因为想要采集音视频数据，对于不同的浏览器厂商，就需要根据不同的浏览器做类型判断

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 4][]

而如果我们自己实现的话，就需要分别判断是否有合适的浏览器api，但是这种方式比较麻烦，可以用google的开源库适配不同的浏览器，为其定义统一的接口。

添加adapter后的index.html代码如下

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
    </head>
    
    <body>
    
           
    
           
    
           <video  autoplay playsinline  id="player"></video>
    
           
    
           <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    </body>
    
    </html>

再次打开，查看网络，可以看到下载到的adapter源码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 5][]

同时，在不同的浏览器中，我们都可以获取到视频流

![20191014192804518.png][]

6-3 获取音视频设备的访问权限

在前面获取到音视频设备信息的章节中，我们在chrome浏览器中可以获取到设备信息，而换到safari浏览器中却获取失败，这是因为没有获取到相应的权限。

解决这个问题，可以通过上小节我们提到的adapter.js 获取到音视频设备的权限。

代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 6][]

index.html
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
    </head>
    
    <body>
    
           
    
    
    
    
    
           <div>
    
           <label>audio Source:</label>
    
           <select id = "audioSource"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>audio Output:</label>
    
           <select id = "audioOutput"></select>
    
           </div>
    
    
    
           <div>
    
           <label>video Source</label>
    
           <select id = "videoSource"></select>
    
           </div>
    
    
    
           
    
           
    
           <video  autoplay playsinline  id="player"></video>
    
           
    
           <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    </body>
    
    
    
    
    
    </html>
    
    
    
    clinet.js
    
    'use strict'
    
    
    
    
    
    //获取select这个元素中id为audioSource的元素
    
    var audioSource = document.querySelector("select#audioSource");
    
    var audioOutput = document.querySelector("select#audioOutput");
    
    var videoSource = document.querySelector("select#videoSource");
    
    
    
    //首先获取到在html中定义的vedio标签
    
    var videoplay = document.querySelector('video#player');
    
    
    
    
    
    //获取设备信息，参数是设备信息的数组
    
    function gotDevices(deviceInfos) {
    
        //遍历设备信息数组
    
        deviceInfos.forEach(
    
            //拿到每一项的deviceInfo作为参数
    
           function (deviceinfo) {
    
               //select 中的每一项是一个option，根据不同的种类添加到不同的select中去
    
               var option = document.createElement('option');
    
               option.text = deviceinfo.label;  //设备名称
    
               option.value = deviceinfo.deviceId //值是deviceid
    
               console.log("deviceinfo.kind:",deviceinfo.kind);
    
               if(deviceinfo.kind === 'audioinput'){
    
                   audioSource.appendChild(option);
    
               }else if(deviceinfo.kind === 'audiooutput'){
    
                   audioOutput.appendChild(option);
    
               }else if(deviceinfo.kind === 'videoinput'){
    
                   videoSource.appendChild(option);
    
               }
    
           }
    
        )
    
    }
    
    
    
    
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        videoplay.srcObject = stream;
    
        //拿到流之后，说明用户已经同意访问音视频设备了，此时可以返回一个promise，获取
    
        //所有的音视频设备
    
        return navigator.mediaDevices.enumerateDevices();
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    //如果这个方法不存在，则打印
    
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
    
        console.log('getUserMedia is not supported！');
    
    }else {
    
        //设置参数，同时采集音频和视频数组
    
        var constraints = {
    
                video:true,
    
                audio:true
    
        }
    
        //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
        //成功之后，由于promise是可以串联的，then之后可以继续then
    
        navigator.mediaDevices.getUserMedia(constraints)
    
            .then(gotMediaStream)
    
            .then(gotDevices)
    
            .catch(handleError);
    
    }

执行后打开浏览器查看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 8][]

我们看到safari浏览器并不能获取到全部设备信息，有可能是音频输出设备不叫这个名字

6-4 视频约束 （ 视频参数调整 ）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 9][]

通过音视频的采集约束我们可以精确控制音视频的采集数据，首先是width即分辨率的宽是多少，第二个是height， 一般宽和高有两种比例，4:3, 16:9 , ![20191014192804259.png][]

是比例，即宽除以高

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 10][]

frameRate 为帧率，我们可以通过帧率的多少来控制我们的码流，如果帧率低的话，会看到画面不太平滑，帧率高的话，画面就会很平滑，目前一般的高清电影都有60帧，另外一点，如果帧率过高的话，码流肯定会过大，相当于一秒钟采集的数据多，facingMode 用于控制摄像头翻转，主要用于手机摄像头。resizeMode 为采集的画面是否裁剪。

这些参数的设置方法如下：

//设置参数，只采集视频，并设置视频参数

var constraints = \{

video:\{

width:320,

height:240,

frameRate:30,

facingMode:'enviroment'

\},

audio:false

6-5 音频约束（音频参数设置）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 11][]

volunme：声音大小，从0 到 1.0

sampleRate：采样率

sampleSize: 采样大小，一般情况下为16位，也就是2个字节

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 12][]

![20191014192804326.png][]：回音，即采集数据之后，是否要开启回音消除

![20191014192804386.png][]：自动增益，即在原有声音的基础上，是否增加音量

![20191014192804411.png][] ：降噪，即采集数据的时候，是否要开启降噪功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 13][]

latency：延迟大小，设置延迟小，而网络状况不好，就会出现卡顿，花屏等问题，好处是双方可以实时通信，一般是低于500毫秒, 最好是200毫秒内

channelCount:单声道还是双声道，一般情况下使用单声道就够了，如果是乐器，一般为双声道

deviceID：当有多个摄像头或者多个输入输出设备的时候，可以进行设备的切换

groupID：音频的输入与输出？？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 14][]

实战：修改后的clinet.js 代码如下

'use strict'
    
    
    
    
    
    //获取select这个元素中id为audioSource的元素
    
    var audioSource = document.querySelector("select#audioSource");
    
    var audioOutput = document.querySelector("select#audioOutput");
    
    var videoSource = document.querySelector("select#videoSource");
    
    
    
    //首先获取到在html中定义的vedio标签
    
    var videoplay = document.querySelector('video#player');
    
    
    
    
    
    //获取设备信息，参数是设备信息的数组
    
    function gotDevices(deviceInfos) {
    
        //遍历设备信息数组
    
        deviceInfos.forEach(
    
            //拿到每一项的deviceInfo作为参数
    
           function (deviceinfo) {
    
               //select 中的每一项是一个option，根据不同的种类添加到不同的select中去
    
               var option = document.createElement('option');
    
               option.text = deviceinfo.label;  //设备名称
    
               option.value = deviceinfo.deviceId //值是deviceid
    
               console.log("deviceinfo.kind:",deviceinfo.kind);
    
               if(deviceinfo.kind === 'audioinput'){
    
                   audioSource.appendChild(option);
    
               }else if(deviceinfo.kind === 'audiooutput'){
    
                   audioOutput.appendChild(option);
    
               }else if(deviceinfo.kind === 'videoinput'){
    
                   videoSource.appendChild(option);
    
               }
    
           }
    
        )
    
    }
    
    
    
    
    
    
    
    
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        videoplay.srcObject = stream;
    
        //拿到流之后，说明用户已经同意访问音视频设备了，此时可以返回一个promise，获取
    
        //所有的音视频设备
    
        return navigator.mediaDevices.enumerateDevices();
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    function start() {
    
    
    
    
    
    //如果这个方法不存在，则打印
    
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    
            console.log('getUserMedia is not supported！')
    
            return;
    
        } else {
    
    
    
    
    
            var deviceId = videoSource.value;
    
    
    
    
    
            //设置参数，采集音视频，并设置视频参数和音频参数
    
            var constraints = {
    
                video: {
    
                    width: 320,
    
                    height: 240,
    
                    frameRate: 30,
    
                    facingMode: 'enviroment',
    
                    //判断deviceId的值是否为空，如果不为空就设置它的值为deviceId，如果为空就设置为undefined
    
                    deviceId: deviceId ? deviceId: undefined
    
                },
    
                audio: {
    
                    noiseSuppression: true,
    
                    echoCancellation: true
    
                },
    
    
    
    
    
            }
    
    
    
    
    
            //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
            //成功之后，由于promise是可以串联的，then之后可以继续then
    
            navigator.mediaDevices.getUserMedia(constraints)
    
                .then(gotMediaStream)
    
                .then(gotDevices)
    
                .catch(handleError);
    
        }
    
    }
    
    
    
    
    
    start();
    
    
    
    
    
    
    
    
    
    //增加事件，选择摄像头的时候重新调用start函数,实现设备切换
    
    videoSource.onchange = start;

6-6 视频特效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 15][]

在浏览器中做特效使用的是 CSS filter，在不同浏览器中使用的filter还不一样。我们在视频渲染的时候，实际上在底层最终调用的还是OpenGL或者是Metal基础的图形绘制库，通过GPU进行绘制。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 16][]

实战：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 17][]

index.html
    
    
    
    
    
    
    
    
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
           <style>
    
                  .none {
    
                          -webkit-filter: none;
    
                  }
    
    
    
    
    
                  .blur {
    
                          -webkit-filter: blur(3px);
    
                  }
    
    
    
    
    
                  .grayscale {
    
                          -webkit-filter: grayscale(1);
    
                  }
    
    
    
    
    
                  .invert {
    
                          -webkit-filter: invert(1);
    
                  }
    
    
    
    
    
                  .sepia {
    
                          -webkit-filter: sepia(1);
    
                  }
    
    
    
    
    
           </style>
    
    
    
    
    
    </head>
    
    <body>
    
           
    
    
    
    
    
           <div>
    
           <label>audio Source:</label>
    
           <select id = "audioSource"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>audio Output:</label>
    
           <select id = "audioOutput"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>video Source</label>
    
           <select id = "videoSource"></select>
    
           </div>
    
    
    
    
    
    
    
    
    
           <div>
    
                   <label>Filter: </label>
    
                  <select id="filter">
    
                         <option value="none">None</option>
    
                         <option value="blur">blur</option>
    
                         <option value="grayscale">Grayscale</option>
    
                         <option value="invert">Invert</option>
    
                         <option value="sepia">sepia</option>
    
                  </select>
    
           </div>
    
    
    
    
    
           
    
           
    
           <video  autoplay playsinline  id="player"></video>
    
           
    
           <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    </body>
    
    
    
    
    
    </html>
    
    
    
    client.js
    
    
    
    
    
    'use strict'
    
    
    
    
    
    //获取select这个元素中id为audioSource的元素
    
    var audioSource = document.querySelector("select#audioSource");
    
    var audioOutput = document.querySelector("select#audioOutput");
    
    var videoSource = document.querySelector("select#videoSource");
    
    var filtersSelect = document.querySelector("select#filter");
    
    
    
    
    
    
    
    
    
    //首先获取到在html中定义的vedio标签
    
    var videoplay = document.querySelector('video#player');
    
    
    
    
    
    //获取设备信息，参数是设备信息的数组
    
    function gotDevices(deviceInfos) {
    
        //遍历设备信息数组
    
        deviceInfos.forEach(
    
            //拿到每一项的deviceInfo作为参数
    
           function (deviceinfo) {
    
               //select 中的每一项是一个option，根据不同的种类添加到不同的select中去
    
               var option = document.createElement('option');
    
               option.text = deviceinfo.label;  //设备名称
    
               option.value = deviceinfo.deviceId //值是deviceid
    
               console.log("deviceinfo.kind:",deviceinfo.kind);
    
               if(deviceinfo.kind === 'audioinput'){
    
                   audioSource.appendChild(option);
    
               }else if(deviceinfo.kind === 'audiooutput'){
    
                   audioOutput.appendChild(option);
    
               }else if(deviceinfo.kind === 'videoinput'){
    
                   videoSource.appendChild(option);
    
               }
    
           }
    
        )
    
    }
    
    
    
    
    
    
    
    
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        videoplay.srcObject = stream;
    
        //拿到流之后，说明用户已经同意访问音视频设备了，此时可以返回一个promise，获取
    
        //所有的音视频设备
    
        return navigator.mediaDevices.enumerateDevices();
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    function start() {
    
    
    
    
    
    //如果这个方法不存在，则打印
    
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    
            console.log('getUserMedia is not supported！')
    
            return;
    
        } else {
    
    
    
    
    
            var deviceId = videoSource.value;
    
    
    
    
    
            //设置参数，采集音视频，并设置视频参数和音频参数
    
            var constraints = {
    
                video: {
    
                    width: 320,
    
                    height: 240,
    
                    frameRate: 30,
    
                    facingMode: 'enviroment',
    
                    //判断deviceId的值是否为空，如果不为空就设置它的值为deviceId，如果为空就设置为undefined
    
                    deviceId: deviceId ? deviceId: undefined
    
                },
    
                audio: {
    
                    noiseSuppression: true,
    
                    echoCancellation: true
    
                },
    
    
    
    
    
            }
    
    
    
    
    
            //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
            //成功之后，由于promise是可以串联的，then之后可以继续then
    
            navigator.mediaDevices.getUserMedia(constraints)
    
                .then(gotMediaStream)
    
                .then(gotDevices)
    
                .catch(handleError);
    
        }
    
    }
    
    
    
    
    
    start();
    
    
    
    
    
    
    
    
    
    //增加事件，选择摄像头的时候重新调用start函数,实现设备切换
    
    videoSource.onchange = start;
    
    //增加事件处理，当我们选择其中的某一项变化的时候，进行处理
    
    //onchange 事件会在域的内容改变时发生
    
    filtersSelect.onchange = function () {
    
        //获取视频的模式的名字
    
        videoplay.className = filtersSelect.value;
    
    
    
    
    
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 18][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 19][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 20][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 21][]

注意，如果更新代码后，开启浏览器发现没有获取到音视频设备，可以尝试重启电脑

6-7 从视频中获取图片 实战

index.html
    
    
    
    
    
    
    
    
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
           <style>
    
                  .none {
    
                          -webkit-filter: none;
    
                  }
    
    
    
    
    
                  .blur {
    
                          -webkit-filter: blur(3px);
    
                  }
    
    
    
    
    
                  .grayscale {
    
                          -webkit-filter: grayscale(1);
    
                  }
    
    
    
    
    
                  .invert {
    
                          -webkit-filter: invert(1);
    
                  }
    
    
    
    
    
                  .sepia {
    
                          -webkit-filter: sepia(1);
    
                  }
    
    
    
    
    
           </style>
    
    
    
    
    
    </head>
    
    <body>
    
           
    
    
    
    
    
           <div>
    
           <label>audio Source:</label>
    
           <select id = "audioSource"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>audio Output:</label>
    
           <select id = "audioOutput"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>video Source</label>
    
           <select id = "videoSource"></select>
    
           </div>
    
    
    
    
    
    
    
    
    
           <div>
    
                   <label>Filter: </label>
    
                  <select id="filter">
    
                         <option value="none">None</option>
    
                         <option value="blur">blur</option>
    
                         <option value="grayscale">Grayscale</option>
    
                         <option value="invert">Invert</option>
    
                         <option value="sepia">sepia</option>
    
                  </select>
    
           </div>
    
    
    
    
    
           
    
           
    
           <video  autoplay playsinline  id="player"></video>
    
           <div>
    
               <button id="snapshot">Take snapshot</button>
    
           </div>
    
           <div>
    
               <canvas id="picture"></canvas>
    
           </div>
    
    
    
    
    
    
    
    
    
           
    
           <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    
    
    
    
    </body>
    
    
    
    
    
    </html>
    
    client.js
    
    
    
    
    
    'use strict'
    
    
    
    
    
    //获取select这个元素中id为audioSource的元素
    
    var audioSource = document.querySelector("select#audioSource");
    
    var audioOutput = document.querySelector("select#audioOutput");
    
    var videoSource = document.querySelector("select#videoSource");
    
    //filter
    
    var filtersSelect = document.querySelector("select#filter");
    
    
    
    
    
    
    
    
    
    //picture
    
    var snapshot = document.querySelector('button#snapshot');
    
    var picture = document.querySelector('canvas#picture');
    
    picture.width = 320;
    
    picture.height = 240;
    
    
    
    
    
    
    
    
    
    
    
    
    
    //首先获取到在html中定义的vedio标签
    
    var videoplay = document.querySelector('video#player');
    
    
    
    
    
    
    
    
    
    //获取设备信息，参数是设备信息的数组
    
    function gotDevices(deviceInfos) {
    
        //遍历设备信息数组
    
        deviceInfos.forEach(
    
            //拿到每一项的deviceInfo作为参数
    
           function (deviceinfo) {
    
               //select 中的每一项是一个option，根据不同的种类添加到不同的select中去
    
               var option = document.createElement('option');
    
               option.text = deviceinfo.label;  //设备名称
    
               option.value = deviceinfo.deviceId //值是deviceid
    
               console.log("deviceinfo.kind:",deviceinfo.kind);
    
               if(deviceinfo.kind === 'audioinput'){
    
                   audioSource.appendChild(option);
    
               }else if(deviceinfo.kind === 'audiooutput'){
    
                   audioOutput.appendChild(option);
    
               }else if(deviceinfo.kind === 'videoinput'){
    
                   videoSource.appendChild(option);
    
               }
    
           }
    
        )
    
    }
    
    
    
    
    
    
    
    
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        videoplay.srcObject = stream;
    
        //拿到流之后，说明用户已经同意访问音视频设备了，此时可以返回一个promise，获取
    
        //所有的音视频设备
    
        return navigator.mediaDevices.enumerateDevices();
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    function start() {
    
    
    
    
    
    //如果这个方法不存在，则打印
    
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    
            console.log('getUserMedia is not supported！')
    
            return;
    
        } else {
    
    
    
    
    
            var deviceId = videoSource.value;
    
    
    
    
    
            //设置参数，采集音视频，并设置视频参数和音频参数
    
            var constraints = {
    
                video: {
    
                    width: 320,
    
                    height: 240,
    
                    frameRate: 30,
    
                    facingMode: 'enviroment',
    
                    //判断deviceId的值是否为空，如果不为空就设置它的值为deviceId，如果为空就设置为undefined
    
                    deviceId: deviceId ? deviceId: undefined
    
                },
    
                audio: {
    
                    noiseSuppression: true,
    
                    echoCancellation: true
    
                },
    
    
    
    
    
            }
    
    
    
    
    
            //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
            //成功之后，由于promise是可以串联的，then之后可以继续then
    
            navigator.mediaDevices.getUserMedia(constraints)
    
                .then(gotMediaStream)
    
                .then(gotDevices)
    
                .catch(handleError);
    
        }
    
    }
    
    
    
    
    
    start();
    
    
    
    
    
    
    
    
    
    //增加事件，选择摄像头的时候重新调用start函数,实现设备切换
    
    videoSource.onchange = start;
    
    //增加事件处理，当我们选择其中的某一项变化的时候，进行处理
    
    //onchange 事件会在域的内容改变时发生
    
    filtersSelect.onchange = function () {
    
        //获取视频的模式的名字
    
        videoplay.className = filtersSelect.value;
    
    
    
    
    
    }
    
    
    
    
    
    //给snapshot添加onclick事件，当我们点击button的时候，触发这个事件
    
    snapshot.onclick =  function () {
    
        //设置滤镜
    
        picture.className = filtersSelect.value;
    
        //得到picture的上下文,将videoplay当成源，从这里截取一帧数据，写成一张图片
    
        picture.getContext('2d').drawImage(videoplay,
    
                                             0,0,
    
                                             picture.width,
    
                                             picture.height);
    
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 22][]

6-8 webrtc只采集音频数据 实战

index.html
    
    
    
    
    
    
    
    
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
           <style>
    
                  .none {
    
                          -webkit-filter: none;
    
                  }
    
    
    
    
    
                  .blur {
    
                          -webkit-filter: blur(3px);
    
                  }
    
    
    
    
    
                  .grayscale {
    
                          -webkit-filter: grayscale(1);
    
                  }
    
    
    
    
    
                  .invert {
    
                          -webkit-filter: invert(1);
    
                  }
    
    
    
    
    
                  .sepia {
    
                          -webkit-filter: sepia(1);
    
                  }
    
    
    
    
    
           </style>
    
    
    
    
    
    </head>
    
    <body>
    
           
    
    
    
    
    
           <div>
    
           <label>audio Source:</label>
    
           <select id = "audioSource"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>audio Output:</label>
    
           <select id = "audioOutput"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>video Source</label>
    
           <select id = "videoSource"></select>
    
           </div>
    
    
    
    
    
    
    
    
    
           <div>
    
                   <label>Filter: </label>
    
                  <select id="filter">
    
                         <option value="none">None</option>
    
                         <option value="blur">blur</option>
    
                         <option value="grayscale">Grayscale</option>
    
                         <option value="invert">Invert</option>
    
                         <option value="sepia">sepia</option>
    
                  </select>
    
           </div>
    
    
    
    
    
           
    
           <audio  autoplay     controls id="audioplayer"></audio>
    
           
    
           
    
           
    
           <div>
    
               <button id="snapshot">Take snapshot</button>
    
           </div>
    
           <div>
    
               <canvas id="picture"></canvas>
    
           </div>
    
    
    
    
    
    
    
    
    
           
    
           <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    
    
    
    
    </body>
    
    
    
    
    
    </html>
    
    client.js
    
    
    
    
    
    'use strict'
    
    
    
    
    
    //获取select这个元素中id为audioSource的元素
    
    var audioSource = document.querySelector("select#audioSource");
    
    var audioOutput = document.querySelector("select#audioOutput");
    
    var videoSource = document.querySelector("select#videoSource");
    
    //filter
    
    var filtersSelect = document.querySelector("select#filter");
    
    
    
    
    
    
    
    
    
    //picture
    
    var snapshot = document.querySelector('button#snapshot');
    
    var picture = document.querySelector('canvas#picture');
    
    picture.width = 320;
    
    picture.height = 240;
    
    
    
    
    
    
    
    
    
    //获取音频
    
    var audioplay = document.querySelector('audio#audioplayer')
    
    
    
    
    
    
    
    
    
    //首先获取到在html中定义的vedio标签，从而获取视频
    
    // var videoplay = document.querySelector('video#player');
    
    
    
    
    
    
    
    
    
    //获取设备信息，参数是设备信息的数组
    
    function gotDevices(deviceInfos) {
    
        //遍历设备信息数组
    
        deviceInfos.forEach(
    
            //拿到每一项的deviceInfo作为参数
    
           function (deviceinfo) {
    
               //select 中的每一项是一个option，根据不同的种类添加到不同的select中去
    
               var option = document.createElement('option');
    
               option.text = deviceinfo.label;  //设备名称
    
               option.value = deviceinfo.deviceId //值是deviceid
    
               console.log("deviceinfo.kind:",deviceinfo.kind);
    
               if(deviceinfo.kind === 'audioinput'){
    
                   audioSource.appendChild(option);
    
               }else if(deviceinfo.kind === 'audiooutput'){
    
                   audioOutput.appendChild(option);
    
               }else if(deviceinfo.kind === 'videoinput'){
    
                   videoSource.appendChild(option);
    
               }
    
           }
    
        )
    
    }
    
    
    
    
    
    
    
    
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        // videoplay.srcObject = stream;
    
        audioplay.srcObject = stream;
    
    
    
    
    
        //拿到流之后，说明用户已经同意访问音视频设备了，此时可以返回一个promise，获取
    
        //所有的音视频设备
    
        return navigator.mediaDevices.enumerateDevices();
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    function start() {
    
    
    
    
    
    //如果这个方法不存在，则打印
    
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    
            console.log('getUserMedia is not supported！')
    
            return;
    
        } else {
    
    
    
    
    
            var deviceId = videoSource.value;
    
    
    
    
    
            //设置参数，采集音视频，并设置视频参数和音频参数
    
            var constraints = {
    
                // video: {
    
                //     width: 320,
    
                //     height: 240,
    
                //     frameRate: 30,
    
                //     facingMode: 'enviroment',
    
                //     //判断deviceId的值是否为空，如果不为空就设置它的值为deviceId，如果为空就设置为undefined
    
                //     deviceId: deviceId ? deviceId: undefined
    
                // },
    
                vedio:false,
    
                audio: {
    
                    noiseSuppression: true,
    
                    echoCancellation: true
    
                },
    
    
    
    
    
            }
    
    
    
    
    
            //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
            //成功之后，由于promise是可以串联的，then之后可以继续then
    
            navigator.mediaDevices.getUserMedia(constraints)
    
                .then(gotMediaStream)
    
                .then(gotDevices)
    
                .catch(handleError);
    
        }
    
    }
    
    
    
    
    
    start();
    
    
    
    
    
    
    
    
    
    //增加事件，选择摄像头的时候重新调用start函数,实现设备切换
    
    videoSource.onchange = start;
    
    //增加事件处理，当我们选择其中的某一项变化的时候，进行处理
    
    //onchange 事件会在域的内容改变时发生
    
    filtersSelect.onchange = function () {
    
        //获取视频的模式的名字
    
        videoplay.className = filtersSelect.value;
    
    
    
    
    
    }
    
    
    
    
    
    //给snapshot添加onclick事件，当我们点击button的时候，触发这个事件
    
    snapshot.onclick =  function () {
    
        //设置滤镜
    
        picture.className = filtersSelect.value;
    
        //得到picture的上下文,将videoplay当成源，从这里截取一帧数据，写成一张图片
    
        picture.getContext('2d').drawImage(videoplay,
    
                                             0,0,
    
                                             picture.width,
    
                                             picture.height);
    
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 23][]

6-9 MediaStreamAPI及获取视频约束

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 24][]

![20191014192804660.png][]：向媒体流中加入不同的轨

![20191014192804711.png][]：从媒体流中将不想要的轨移除

![20191014192804699.png][]：拿到所有视频的轨

![20191014192804749.png][]：拿到媒体流中所有音频的track

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 25][]

![20191014192804746.png][]：添加一个媒体轨到媒体流的时候会触发这个事件

![20191014192804742.png][]：移除一个媒体轨到媒体流的时候会触发这个事件

![20191014192804746.png][]:当一个流结束的时候，会收到流结束的事件

实战：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 26][]

index.html
    
    
    
    
    
    
    
    
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>WebRTC caoture video and audio</title>
    
           <style>
    
                  .none {
    
                          -webkit-filter: none;
    
                  }
    
    
    
    
    
                  .blur {
    
                          -webkit-filter: blur(3px);
    
                  }
    
    
    
    
    
                  .grayscale {
    
                          -webkit-filter: grayscale(1);
    
                  }
    
    
    
    
    
                  .invert {
    
                          -webkit-filter: invert(1);
    
                  }
    
    
    
    
    
                  .sepia {
    
                          -webkit-filter: sepia(1);
    
                  }
    
    
    
    
    
           </style>
    
    
    
    
    
    </head>
    
    <body>
    
           
    
    
    
    
    
           <div>
    
           <label>audio Source:</label>
    
           <select id = "audioSource"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>audio Output:</label>
    
           <select id = "audioOutput"></select>
    
           </div>
    
    
    
    
    
           <div>
    
           <label>video Source</label>
    
           <select id = "videoSource"></select>
    
           </div>
    
    
    
    
    
    
    
    
    
           <div>
    
                   <label>Filter: </label>
    
                  <select id="filter">
    
                         <option value="none">None</option>
    
                         <option value="blur">blur</option>
    
                         <option value="grayscale">Grayscale</option>
    
                         <option value="invert">Invert</option>
    
                         <option value="sepia">sepia</option>
    
                  </select>
    
           </div>
    
    
    
    
    
           
    
    
    
    
    
    
    
           <section>
    
           <table>
    
                  <tr>
    
           
    
           
    
           
    
               <td> <video  autoplay playsinline  id="player"></video></td>
    
               <td><div id="constraints" class="output"></div></td>
    
                  </tr>
    
           </table>
    
           </section>
    
           <div>
    
                  <button id="snapshot">Take snapshot</button>
    
               <canvas id="picture"></canvas>
    
           </div>
    
    
    
    
    
    
    
    
    
           
    
           <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
           
    
           <script  src = './js/client.js'  ></script>
    
    
    
    
    
    </body>
    
    
    
    
    
    </html>
    
    client.js
    
    
    
    
    
    'use strict'
    
    
    
    
    
    //获取select这个元素中id为audioSource的元素
    
    var audioSource = document.querySelector("select#audioSource");
    
    var audioOutput = document.querySelector("select#audioOutput");
    
    var videoSource = document.querySelector("select#videoSource");
    
    //filter
    
    var filtersSelect = document.querySelector("select#filter");
    
    
    
    
    
    
    
    
    
    //picture
    
    var snapshot = document.querySelector('button#snapshot');
    
    var picture = document.querySelector('canvas#picture');
    
    picture.width = 320;
    
    picture.height = 240;
    
    
    
    
    
    
    
    
    
    //获取音频
    
    //var audioplay = document.querySelector('audio#audioplayer')
    
    
    
    
    
    
    
    
    
    //首先获取到在html中定义的vedio标签，从而获取视频
    
    var videoplay = document.querySelector('video#player');
    
    
    
    
    
    //获取到 divConstraints
    
    var divConstraints = document.querySelector('div#constraints');
    
    
    
    
    
    //获取设备信息，参数是设备信息的数组
    
    function gotDevices(deviceInfos) {
    
        //遍历设备信息数组
    
        deviceInfos.forEach(
    
            //拿到每一项的deviceInfo作为参数
    
           function (deviceinfo) {
    
               //select 中的每一项是一个option，根据不同的种类添加到不同的select中去
    
               var option = document.createElement('option');
    
               option.text = deviceinfo.label;  //设备名称
    
               option.value = deviceinfo.deviceId //值是deviceid
    
               console.log("deviceinfo.kind:",deviceinfo.kind);
    
               if(deviceinfo.kind === 'audioinput'){
    
                   audioSource.appendChild(option);
    
               }else if(deviceinfo.kind === 'audiooutput'){
    
                   audioOutput.appendChild(option);
    
               }else if(deviceinfo.kind === 'videoinput'){
    
                   videoSource.appendChild(option);
    
               }
    
           }
    
        )
    
    }
    
    
    
    
    
    
    
    
    
    //实现获取流之后的方法,将获取到的流赋值给我们在html中定义的vedio标签
    
    function gotMediaStream(stream) {
    
        //指定标签获取视频流的数据源
    
        videoplay.srcObject = stream;
    
        //通过media stream 拿到视频的track，视频轨,只取第一个
    
        var videoTrack = stream.getVideoTracks()[0];
    
        //拿到vedio的所有约束
    
        var videoConstraints = videoTrack.getSettings();
    
        //将其转成json格式，作为内容赋值给divConstraints,在页面展示出来
    
        divConstraints.textContent =   JSON.stringify(videoConstraints,null,2);
    
    
    
    
    
        //audioplay.srcObject = stream;
    
    
    
    
    
        //拿到流之后，说明用户已经同意访问音视频设备了，此时可以返回一个promise，获取
    
        //所有的音视频设备
    
        return navigator.mediaDevices.enumerateDevices();
    
    }
    
    
    
    
    
    //获取失败 打印出错信息
    
    function handleError(err) {
    
        console.log('getUserMedia error:', err);
    
    }
    
    
    
    
    
    function start() {
    
    
    
    
    
    //如果这个方法不存在，则打印
    
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    
            console.log('getUserMedia is not supported！')
    
            return;
    
        } else {
    
    
    
    
    
            var deviceId = videoSource.value;
    
    
    
    
    
            //设置参数，采集音视频，并设置视频参数和音频参数
    
            var constraints = {
    
                video: {
    
                    width: 320,
    
                    height: 240,
    
                    frameRate: 30,
    
                    facingMode: 'enviroment',
    
                    //判断deviceId的值是否为空，如果不为空就设置它的值为deviceId，如果为空就设置为undefined
    
                    deviceId: deviceId ? deviceId: undefined
    
                },
    
                // vedio:false,
    
                audio: {
    
                    noiseSuppression: true,
    
                    echoCancellation: true
    
                },
    
    
    
    
    
            }
    
    
    
    
    
            //如果存在，就调用这个方法，成功进入成功方法，失败进入失败方法
    
            //成功之后，由于promise是可以串联的，then之后可以继续then
    
            navigator.mediaDevices.getUserMedia(constraints)
    
                .then(gotMediaStream)
    
                .then(gotDevices)
    
                .catch(handleError);
    
        }
    
    }
    
    
    
    
    
    start();
    
    
    
    
    
    
    
    
    
    //增加事件，选择摄像头的时候重新调用start函数,实现设备切换
    
    videoSource.onchange = start;
    
    //增加事件处理，当我们选择其中的某一项变化的时候，进行处理
    
    //onchange 事件会在域的内容改变时发生
    
    filtersSelect.onchange = function () {
    
        //获取视频的模式的名字
    
        videoplay.className = filtersSelect.value;
    
    
    
    
    
    }
    
    
    
    
    
    //给snapshot添加onclick事件，当我们点击button的时候，触发这个事件
    
    snapshot.onclick =  function () {
    
        //设置滤镜
    
        picture.className = filtersSelect.value;
    
        //得到picture的上下文,将videoplay当成源，从这里截取一帧数据，写成一张图片
    
        picture.getContext('2d').drawImage(videoplay,
    
                                             0,0,
    
                                             picture.width,
    
                                             picture.height);
    
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 27][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70]: /images/20230601/0c2a7dd352a740aeb61b15ac0c766b96.png
[20191014192803706.png]: https://img-blog.csdnimg.cn/20191014192803706.png
[20191014192803711.png]: /images/20230601/dc3b3dd0160649ed9135a4e67542e453.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 1]: /images/20230601/f151a503bfbe4db08aa94b36cc75c470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 2]: /images/20230601/3979894145ae4a96ab3907d1c4554ba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 3]: /images/20230601/c19f819930944e1ba98825037a8db9a6.png
[20191014192803903.png]: https://img-blog.csdnimg.cn/20191014192803903.png
[20191014192803943.png]: /images/20230601/9cbb7c7f7cad48ce8d73c61072666416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 4]: /images/20230601/b5233bb29cd543f08a6cc6c24d0663b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 5]: /images/20230601/82b536c2cc9f4cea8c745f51dcdb2031.png
[20191014192804518.png]: /images/20230601/192ee78a04d5446db82e4cedb81f0595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 6]: /images/20230601/3a6ef4d522374073bba6523f7e7d325f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 7]: /images/20230601/0465dba6ff2c4f83bafb4644966b8647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 8]: /images/20230601/5bcffaa508e641858f7dd712e60fedab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 9]: /images/20230601/bd336f58e0164aadbfddf13d9d3a2dc2.png
[20191014192804259.png]: /images/20230601/9d0e1143313f43a68f1910adab9dc9f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 10]: /images/20230601/84bbdd085f1b4480a832aeb0a0b59e44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 11]: /images/20230601/e9bcb5bd8296495094a470e20af84d99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 12]: /images/20230601/4a4c37a8dd0a4c78b826fe1addcf9127.png
[20191014192804326.png]: /images/20230601/8f33a390b2124eb0bd3e787b5e727ce6.png
[20191014192804386.png]: /images/20230601/617157dbdff5452fb310fd5fb7f8d364.png
[20191014192804411.png]: /images/20230601/6633b51770c34e4cb72fbbe2c2fe42b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 13]: /images/20230601/b5b64c3f7a8f4aa3a5440889699a2514.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 14]: /images/20230601/404b816c6bd34303b447ed50c174c1ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 15]: /images/20230601/0053817f33c147f3a5a3883919d29cff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 16]: /images/20230601/7237f00b97ae4ee3908612d71f600f38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 17]: /images/20230601/e406623ea5d6436e97ffd53b07b92c67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 18]: /images/20230601/01e28bd29c4845559fd9587c4b333db8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 19]: /images/20230601/810554df08d24bc1a86b39dbffe8763b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 20]: /images/20230601/d914c1ef100f454892438a774c1b8cb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 21]: /images/20230601/2efc4225a9164d098e5eb651bff6b332.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 22]: /images/20230601/be2a27a2ea4446c2b1823505be043bc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 23]: /images/20230601/e5df8f0cfbc143d79fb034269cf3c59a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 24]: /images/20230601/aac04b370bf947a389f6e02e502c1c0b.png
[20191014192804660.png]: /images/20230601/5a321956d98946428b4ca3067ddc225e.png
[20191014192804711.png]: /images/20230601/dfe645bafa804a268946f58357abd7fc.png
[20191014192804699.png]: /images/20230601/8ed725a13cbf4ce096091a36cbe2a4f4.png
[20191014192804749.png]: /images/20230601/256b1951cc3f471498ee3b3678f0ad99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 25]: /images/20230601/9374542cbca1450ab4b24547f02b6848.png
[20191014192804746.png]: /images/20230601/f1d3761daafc4dcd82929d82c478d8c1.png
[20191014192804742.png]: /images/20230601/51a8597a92744adab678d1b5fb09fcd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 26]: /images/20230601/5c215cbbd880469f9886db16e8de7ab3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHk3MTA2NjA1NDE_size_16_color_FFFFFF_t_70 27]: /images/20230601/3ac8909da2e94788bdc7e241f2b89b29.png