本章讲解WebRTC如何实现音视频数据采集，其中包括
1.通过 WebCam 获取视频流，
2.采集音频流，
3.设置Camera分辨率
4.视频渲染。

6-1 【基础铺垫，学前有概念】WebRTC音视频数据采集

图片.png

正确是
var constraints = {
video : true,
audio : true
}

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  5.   </head>
  6.   <body>
  8.     <video autoplay playsinline id="player"></video>
  9.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  10.     <script src="./js/client.js"></script>
  11.     </body>
  12. </html>
  1. 'use strict'
  3. var videoplay = document.querySelector('video#player');
  5. function gotMediaStream(stream){
  6.     videoplay.srcObject = stream;
  7.     return navigator.mediaDevices.enumerateDevices();
  8. }
  10. function handleError(err){
  11.     console.log('getUserMedia error:', err);
  12. }
  15. if(!navigator.mediaDevices ||
  16.         !navigator.mediaDevices.getUserMedia){
  18.         console.log('getUserMedia is not supported!');
  20.     }else{
  22. var constraints = {
  23.             video : true,
  24.             audio : true 
  25.         }
  27.         navigator.mediaDevices.getUserMedia(constraints)
  28.             .then(gotMediaStream)
  29.             .catch(handleError);
  30.     }

6-2 【浏览器适配方法】WebRTCAPI适配

图片.png
图片.png
图片.png

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  5.   </head>
  6.   <body>
  8.     <video autoplay playsinline id="player"></video>
  10.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  11.     <script src="./js/client.js"></script>
  12.     </body>
  13. </html>

6-3 【安全管理】获取音视频设备的访问权限

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  5.   </head>
  6.   <body>
  7.     <div>
  8.         <label>audio input device:</label>
  9.         <select id="audioSource"></select>
  10.     </div>
  12.     <div>
  13.         <label>audio output device:</label>
  14.         <select id="audioOutput"></select>
  15.     </div>
  17.     <div>
  18.         <label>video input device:</label>
  19.         <select id="videoSource"></select>
  20.     </div>
  22.     <video autoplay playsinline id="player"></video>
  23.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  24.     <script src="./js/client.js"></script>
  25.     </body>
  26. </html>
  1. 'use strict'
  3. //devices
  4. var audioSource = document.querySelector('select#audioSource');
  5. var audioOutput = document.querySelector('select#audioOutput');
  6. var videoSource = document.querySelector('select#videoSource');
  8. var videoplay = document.querySelector('video#player');
  10. function gotDevices(deviceInfos){
  12.     deviceInfos.forEach(function(deviceinfo){
  14.         var option = document.createElement('option');
  15.         option.text = deviceinfo.label;
  16.         option.value = deviceinfo.deviceId;
  18.         if(deviceinfo.kind === 'audioinput'){
  19.             audioSource.appendChild(option);
  20.         }else if(deviceinfo.kind === 'audiooutput'){
  21.             audioOutput.appendChild(option);
  22.         }else if(deviceinfo.kind === 'videoinput'){
  23.             videoSource.appendChild(option);
  24.         }
  25.     })
  26. }
  28. function gotMediaStream(stream){
  29.     videoplay.srcObject = stream;
  30.     return navigator.mediaDevices.enumerateDevices();
  31. }
  33. function handleError(err){
  34.     console.log('getUserMedia error:', err);
  35. }
  38. if(!navigator.mediaDevices ||
  39.         !navigator.mediaDevices.getUserMedia){
  41.         console.log('getUserMedia is not supported!');
  43.     }else{
  45. var constraints = {
  46.             video : true,
  47.             audio : false 
  48.         }
  50.         navigator.mediaDevices.getUserMedia(constraints)
  51.             .then(gotMediaStream)
  52.             .then(gotDevices)
  53.             .catch(handleError);
  54.     }

放在服务器运行使用https访问。
图片.png
本地双击index.html运行访问
图片.png
最后使用vscode，本地服务器运行
图片.png

6-4 【视频参数调整】视频约束

图片.png
aspectRatio一般不设置
图片.png
图片.png

  1. var constraints = {
  2.             video : {
  3.                 width:640,
  4.                 height:480,
  5.                 frameRate:30,
  6.                 facingMode:'environment'
  7.             },
  8.             audio : false 
  9.         }

6-5 【音频参数调整】音频约束

图片.png
图片.png
图片.png
图片.png
图片.png

  1. var constraints = {
  2.             video : {
  3.                 width: 640,
  4.                 height: 480,
  5.                 frameRate: 30,
  6.                 facingMode: 'environment' ,
  7.                 deviceId : deviceId ? {exact:deviceId} : undefined 
  8.             },
  9.             audio : {
  10.                 noiseSuppression: true,
  11.                 echoCancellation: true
  12.             }
  14.         }

6-6 【来点实战】视频特效

图片.png
图片.png
https://www.runoob.com/cssref/css3-pr-filter.html

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  6.     <style>
  7.         .none {
  8.             -webkit-filter: none;    
  9.         }
  11.         .blur {
  12.             -webkit-filter: blur(3px);    
  13.         }
  15.         .grayscale {
  16.             -webkit-filter: grayscale(1);     
  17.         }
  19.         .invert {
  20.             -webkit-filter: invert(1);    
  21.         }
  23.         .sepia {
  24.             -webkit-filter: sepia(1);
  25.         }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div>
  31.         <label>audio input device:</label>
  32.         <select id="audioSource"></select>
  33.     </div>
  35.     <div>
  36.         <label>audio output device:</label>
  37.         <select id="audioOutput"></select>
  38.     </div>
  40.     <div>
  41.         <label>video input device:</label>
  42.         <select id="videoSource"></select>
  43.     </div>
  45.     <div>
  46.         <label>Filter:</label>
  47.         <select id="filter">
  48.             <option value="none">None</option>
  49.             <option value="blur">blur</option>
  50.             <option value="grayscale">Grayscale</option>
  51.             <option value="invert">Invert</option>
  52.             <option value="sepia">sepia</option>
  53.         </select>
  54.     </div>
  56.     <div>
  57.         <video autoplay playsinline id="player"></video>
  58.     </div>
  60.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  61.     <script src="./js/client.js"></script>
  62.     </body>
  63. </html>

client.js

  1. 'use strict'
  3. //devices
  4. var audioSource = document.querySelector('select#audioSource');
  5. var audioOutput = document.querySelector('select#audioOutput');
  6. var videoSource = document.querySelector('select#videoSource');
  8. //filter
  9. var filtersSelect = document.querySelector('select#filter');
  11. var videoplay = document.querySelector('video#player');
  13. function gotDevices(deviceInfos){
  15.     deviceInfos.forEach(function(deviceinfo){
  17.         var option = document.createElement('option');
  18.         option.text = deviceinfo.label;
  19.         option.value = deviceinfo.deviceId;
  21.         if(deviceinfo.kind === 'audioinput'){
  22.             audioSource.appendChild(option);
  23.         }else if(deviceinfo.kind === 'audiooutput'){
  24.             audioOutput.appendChild(option);
  25.         }else if(deviceinfo.kind === 'videoinput'){
  26.             videoSource.appendChild(option);
  27.         }
  28.     })
  29. }
  31. function gotMediaStream(stream){
  32.     videoplay.srcObject = stream;
  33.     return navigator.mediaDevices.enumerateDevices();
  34. }
  36. function handleError(err){
  37.     console.log('getUserMedia error:', err);
  38. }
  40. //匹配视频设备切换
  41. function start() {
  42. if(!navigator.mediaDevices ||
  43.         !navigator.mediaDevices.getUserMedia){
  45.         console.log('getUserMedia is not supported!');
  47.     }else{
  49.         var deviceId = videoSource.value; 
  50. var constraints = {
  51.             video : {
  52.                 width: 640,
  53.                 height: 480,
  54.                 frameRate: 30,
  55.                 facingMode: 'environment' ,
  56.                 deviceId : deviceId ? {exact:deviceId} : undefined 
  57.             },
  58.             audio : {
  59.                 noiseSuppression: true,
  60.                 echoCancellation: true
  61.             }
  63.         }
  65.         navigator.mediaDevices.getUserMedia(constraints)
  66.             .then(gotMediaStream)
  67.             .then(gotDevices)
  68.             .catch(handleError);
  69.     }
  71. }
  73. start();
  75. videoSource.onchange = start;
  77. filtersSelect.onchange = function(){
  78.     videoplay.className = filtersSelect.value;
  79. }

https://coding.imooc.com/learn/questiondetail/pylDvPyrvK2YkBNm.html

6-7 【来点实战】从视频中获取图片

1、先要获取视频流
2、增加摄像按钮，和Canvas显示采集到的图片
效果如下：
图片.png

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  6.     <style>
  7.         .none {
  8.             -webkit-filter: none;    
  9.         }
  11.         .blur {
  12.             -webkit-filter: blur(3px);    
  13.         }
  15.         .grayscale {
  16.             -webkit-filter: grayscale(1);     
  17.         }
  19.         .invert {
  20.             -webkit-filter: invert(1);    
  21.         }
  23.         .sepia {
  24.             -webkit-filter: sepia(1);
  25.         }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div>
  31.         <label>audio input device:</label>
  32.         <select id="audioSource"></select>
  33.     </div>
  35.     <div>
  36.         <label>audio output device:</label>
  37.         <select id="audioOutput"></select>
  38.     </div>
  40.     <div>
  41.         <label>video input device:</label>
  42.         <select id="videoSource"></select>
  43.     </div>
  45.     <div>
  46.         <label>Filter:</label>
  47.         <select id="filter">
  48.             <option value="none">None</option>
  49.             <option value="blur">blur</option>
  50.             <option value="grayscale">Grayscale</option>
  51.             <option value="invert">Invert</option>
  52.             <option value="sepia">sepia</option>
  53.         </select>
  54.     </div>
  56.     <div>
  57.         <video autoplay playsinline id="player"></video>
  58.     </div>
  60.     <div>
  61.         <button id="snapshot">Take snapshot</button>
  62.     </div>
  63.     <div>
  64.         <canvas id="picture"></canvas>
  65.     </div>
  68.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  69.     <script src="./js/client.js"></script>
  70.     </body>
  71. </html>
  1. 'use strict'
  3. //devices
  4. var audioSource = document.querySelector('select#audioSource');
  5. var audioOutput = document.querySelector('select#audioOutput');
  6. var videoSource = document.querySelector('select#videoSource');
  8. //filter
  9. var filtersSelect = document.querySelector('select#filter');
  11. //picture
  12. var snapshot = document.querySelector('button#snapshot');
  13. var picture = document.querySelector('canvas#picture');
  14. picture.width = 640;
  15. picture.height = 480;
  17. //videoplay
  18. var videoplay = document.querySelector('video#player');
  20. function gotDevices(deviceInfos){
  22.     deviceInfos.forEach(function(deviceinfo){
  24.         var option = document.createElement('option');
  25.         option.text = deviceinfo.label;
  26.         option.value = deviceinfo.deviceId;
  28.         if(deviceinfo.kind === 'audioinput'){
  29.             audioSource.appendChild(option);
  30.         }else if(deviceinfo.kind === 'audiooutput'){
  31.             audioOutput.appendChild(option);
  32.         }else if(deviceinfo.kind === 'videoinput'){
  33.             videoSource.appendChild(option);
  34.         }
  35.     })
  36. }
  38. function gotMediaStream(stream){
  39.     videoplay.srcObject = stream;
  40.     return navigator.mediaDevices.enumerateDevices();
  41. }
  43. function handleError(err){
  44.     console.log('getUserMedia error:', err);
  45. }
  48. //匹配视频设备切换
  49. function start() {
  50. if(!navigator.mediaDevices ||
  51.         !navigator.mediaDevices.getUserMedia){
  53.         console.log('getUserMedia is not supported!');
  55.     }else{
  57.         var deviceId = videoSource.value; 
  58. var constraints = {
  59.             video : {
  60.                 width: 640,
  61.                 height: 480,
  62.                 frameRate: 30,
  63.                 facingMode: 'environment' ,
  64.                 deviceId : deviceId ? {exact:deviceId} : undefined 
  65.             },
  66.             audio : {
  67.                 noiseSuppression: true,
  68.                 echoCancellation: true
  69.             }
  71.         }
  73.         navigator.mediaDevices.getUserMedia(constraints)
  74.             .then(gotMediaStream)
  75.             .then(gotDevices)
  76.             .catch(handleError);
  77.     }
  79. }
  81. start();
  83. videoSource.onchange = start;
  85.     filtersSelect.onchange = function(){
  86.         videoplay.className = filtersSelect.value;
  87.     }
  89.     snapshot.onclick = function() {
  90.         picture.className = filtersSelect.value; //如果先前使用了滤镜，则在截图后，也会使用滤镜
  91.         picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
  92.     }

注意，这时候的图片，保存的是原始截图的图片。

6-8 【来点实战】WebRTC只采集音频数据

图片.png

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  6.     <style>
  7.         .none {
  8.             -webkit-filter: none;    
  9.         }
  11.         .blur {
  12.             -webkit-filter: blur(3px);    
  13.         }
  15.         .grayscale {
  16.             -webkit-filter: grayscale(1);     
  17.         }
  19.         .invert {
  20.             -webkit-filter: invert(1);    
  21.         }
  23.         .sepia {
  24.             -webkit-filter: sepia(1);
  25.         }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div>
  31.         <label>audio input device:</label>
  32.         <select id="audioSource"></select>
  33.     </div>
  35.     <div>
  36.         <label>audio output device:</label>
  37.         <select id="audioOutput"></select>
  38.     </div>
  40.     <div>
  41.         <label>video input device:</label>
  42.         <select id="videoSource"></select>
  43.     </div>
  45.     <div>
  46.         <label>Filter:</label>
  47.         <select id="filter">
  48.             <option value="none">None</option>
  49.             <option value="blur">blur</option>
  50.             <option value="grayscale">Grayscale</option>
  51.             <option value="invert">Invert</option>
  52.             <option value="sepia">sepia</option>
  53.         </select>
  54.     </div>
  56.     <div>
  57.         <audio autoplay controls id="audioplayer"></audio>
  58.         <!-- <video autoplay playsinline id="player"></video> -->
  59.     </div>
  61.     <div>
  62.         <button id="snapshot">Take snapshot</button>
  63.     </div>
  64.     <div>
  65.         <canvas id="picture"></canvas>
  66.     </div>
  69.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  70.     <script src="./js/client.js"></script>
  71.     </body>
  72. </html>
  1. 'use strict'
  3. //devices
  4. var audioSource = document.querySelector('select#audioSource');
  5. var audioOutput = document.querySelector('select#audioOutput');
  6. var videoSource = document.querySelector('select#videoSource');
  8. //filter
  9. var filtersSelect = document.querySelector('select#filter');
  11. //picture
  12. var snapshot = document.querySelector('button#snapshot');
  13. var picture = document.querySelector('canvas#picture');
  14. picture.width = 640;
  15. picture.height = 480;
  17. //videoplay
  18. //var videoplay = document.querySelector('video#player');
  19. var audioplay = document.querySelector('audio#audioplayer');
  21. function gotDevices(deviceInfos){
  23.     deviceInfos.forEach(function(deviceinfo){
  25.         var option = document.createElement('option');
  26.         option.text = deviceinfo.label;
  27.         option.value = deviceinfo.deviceId;
  29.         if(deviceinfo.kind === 'audioinput'){
  30.             audioSource.appendChild(option);
  31.         }else if(deviceinfo.kind === 'audiooutput'){
  32.             audioOutput.appendChild(option);
  33.         }else if(deviceinfo.kind === 'videoinput'){
  34.             videoSource.appendChild(option);
  35.         }
  36.     })
  37. }
  39. function gotMediaStream(stream){
  40.     //videoplay.srcObject = stream;
  41.     audioplay.srcObject = stream;
  42.     return navigator.mediaDevices.enumerateDevices();
  43. }
  45. function handleError(err){
  46.     console.log('getUserMedia error:', err);
  47. }
  49. //匹配视频设备切换
  50. function start() {
  51. if(!navigator.mediaDevices ||
  52.         !navigator.mediaDevices.getUserMedia){
  54.         console.log('getUserMedia is not supported!');
  56.     }else{
  58.         var deviceId = videoSource.value; 
  59. /* var constraints = {
  60.             video : {
  61.                 width: 640,
  62.                 height: 480,
  63.                 frameRate: 30,
  64.                 facingMode: 'environment' ,
  65.                 deviceId : deviceId ? {exact:deviceId} : undefined 
  66.             },
  67.             audio : {
  68.                 noiseSuppression: true,
  69.                 echoCancellation: true
  70.             }
  72.         } */
  74.         var constraints = {
  75.             video : false,
  76.             audio : true
  77.         }
  79.         navigator.mediaDevices.getUserMedia(constraints)
  80.             .then(gotMediaStream)
  81.             .then(gotDevices)
  82.             .catch(handleError);
  83.     }
  85. }
  87. start();
  89. videoSource.onchange = start;
  91.     filtersSelect.onchange = function(){
  92.         videoplay.className = filtersSelect.value;
  93.     }
  95.     snapshot.onclick = function() {
  96.         picture.className = filtersSelect.value; //如果先前使用了滤镜，则在截图后，也会使用滤镜
  97.         picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
  98.     }

6-9 【来点实战】MediaStreamAPI及获取视频约束

图片.png
图片.png
图片.png

  1. <html>
  2. <meta charset="utf-8">
  3.   <head>
  4.     <title>WebRTC 获取视频和音频</title>
  6.     <style>
  7.         .none {
  8.             -webkit-filter: none;    
  9.         }
  11.         .blur {
  12.             -webkit-filter: blur(3px);    
  13.         }
  15.         .grayscale {
  16.             -webkit-filter: grayscale(1);     
  17.         }
  19.         .invert {
  20.             -webkit-filter: invert(1);    
  21.         }
  23.         .sepia {
  24.             -webkit-filter: sepia(1);
  25.         }
  27.     </style>
  28.   </head>
  29.   <body>
  30.    <section>
  31.     <div>
  32.         <label>audio input device:</label>
  33.         <select id="audioSource"></select>
  34.     </div>
  36.     <div>
  37.         <label>audio output device:</label>
  38.         <select id="audioOutput"></select>
  39.     </div>
  41.     <div>
  42.         <label>video input device:</label>
  43.         <select id="videoSource"></select>
  44.     </div>
  45. </section>
  47. <section>
  48.     <div>
  49.         <label>Filter:</label>
  50.         <select id="filter">
  51.             <option value="none">None</option>
  52.             <option value="blur">blur</option>
  53.             <option value="grayscale">Grayscale</option>
  54.             <option value="invert">Invert</option>
  55.             <option value="sepia">sepia</option>
  56.         </select>
  57.     </div>
  58. </section>
  60.     <section>
  61.         <table>
  62.             <!-- <audio autoplay controls id="audioplayer"></audio> -->
  63.             <tr>
  64.                 <td><video autoplay playsinline id="player"></video> </td>
  65.                <td><div id='constraints' class='output'></div></td>
  66.             </tr>
  67.         </table>
  68.     </section>
  70.     <section>
  71.         <div>
  72.             <button id="snapshot">Take snapshot</button>
  73.         </div>
  74.         <div>
  75.             <canvas id="picture"></canvas>
  76.         </div>
  78.     </section>
  81.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  82.     <script src="./js/client.js"></script>
  83.     </body>
  84. </html>
  1. 'use strict'
  3. //devices
  4. var audioSource = document.querySelector('select#audioSource');
  5. var audioOutput = document.querySelector('select#audioOutput');
  6. var videoSource = document.querySelector('select#videoSource');
  8. //filter
  9. var filtersSelect = document.querySelector('select#filter');
  11. //picture
  12. var snapshot = document.querySelector('button#snapshot');
  13. var picture = document.querySelector('canvas#picture');
  14. picture.width = 640;
  15. picture.height = 480;
  17. //videoplay
  18. var videoplay = document.querySelector('video#player');
  19. //var audioplay = document.querySelector('audio#audioplayer');
  21. //div
  22. var divConstraints = document.querySelector('div#constraints');
  24. function gotDevices(deviceInfos){
  26.     deviceInfos.forEach(function(deviceinfo){
  28.         var option = document.createElement('option');
  29.         option.text = deviceinfo.label;
  30.         option.value = deviceinfo.deviceId;
  32.         if(deviceinfo.kind === 'audioinput'){
  33.             audioSource.appendChild(option);
  34.         }else if(deviceinfo.kind === 'audiooutput'){
  35.             audioOutput.appendChild(option);
  36.         }else if(deviceinfo.kind === 'videoinput'){
  37.             videoSource.appendChild(option);
  38.         }
  39.     })
  40. }
  42. function gotMediaStream(stream){
  43.     var videoTrack = stream.getVideoTracks()[0];
  44.     var videoConstraints = videoTrack.getSettings();
  46.     divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);
  48.     window.stream = stream;
  49.     videoplay.srcObject = stream;
  51.     //audioplay.srcObject = stream;
  52.     return navigator.mediaDevices.enumerateDevices();
  53. }
  55. function handleError(err){
  56.     console.log('getUserMedia error:', err);
  57. }
  59. //匹配视频设备切换
  60. function start() {
  61. if(!navigator.mediaDevices ||
  62.         !navigator.mediaDevices.getUserMedia){
  64.         console.log('getUserMedia is not supported!');
  66.     }else{
  68.         var deviceId = videoSource.value; 
  69.  var constraints = {
  70.             video : {
  71.                 width: 640,
  72.                 height: 480,
  73.                 frameRate: 15,
  74.                 facingMode: 'environment' ,
  75.                 deviceId : deviceId ? {exact:deviceId} : undefined 
  76.             },
  77.             audio : false
  78.             //{
  79.                 //noiseSuppression: true,
  80.                 //echoCancellation: true
  81.             //}
  83.         } 
  85.         navigator.mediaDevices.getUserMedia(constraints)
  86.             .then(gotMediaStream)
  87.             .then(gotDevices)
  88.             .catch(handleError);
  89.     }
  91. }
  93. start();
  95. videoSource.onchange = start;
  97.     filtersSelect.onchange = function(){
  98.         videoplay.className = filtersSelect.value;
  99.     }
  101.     snapshot.onclick = function() {
  102.         picture.className = filtersSelect.value; //如果先前使用了滤镜，则在截图后，也会使用滤镜
  103.         picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
  104.     }

6-10 相关资料

代码手写.zip