7-1 【基础铺垫，学前有概念】WebRTC录制基本知识

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

7-2 【来点实战】录制音视频实战

录制完后开始播放。
图片.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><video playsinline id="recplayer"></video></td>
  66.                 <td><div id='constraints' class='output'></div></td>
  67.             </tr>
  69.             <tr>
  70.                 <td><button id="record">Start Record</button></td>
  71.                 <td><button id="recplay" disabled>Play</button></td>
  72.                 <td><button id="download" disabled>Download</button></td>
  73.             </tr>
  74.         </table>
  75.     </section>
  77.     <section>
  78.         <div>
  79.             <button id="snapshot">Take snapshot</button>
  80.         </div>
  81.         <div>
  82.             <canvas id="picture"></canvas>
  83.         </div>
  85.     </section>
  88.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  89.     <script src="./js/client.js"></script>
  90.     </body>
  91. </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. //record
  25. var recvideo = document.querySelector('video#recplayer');
  26. var btnRecord = document.querySelector('button#record');
  27. var btnPlay = document.querySelector('button#recplay');
  28. var btnDownload = document.querySelector('button#download');
  30. var buffer;
  31. var mediaRecorder;
  34. function gotDevices(deviceInfos){
  36.     deviceInfos.forEach(function(deviceinfo){
  38.         var option = document.createElement('option');
  39.         option.text = deviceinfo.label;
  40.         option.value = deviceinfo.deviceId;
  42.         if(deviceinfo.kind === 'audioinput'){
  43.             audioSource.appendChild(option);
  44.         }else if(deviceinfo.kind === 'audiooutput'){
  45.             audioOutput.appendChild(option);
  46.         }else if(deviceinfo.kind === 'videoinput'){
  47.             videoSource.appendChild(option);
  48.         }
  49.     })
  50. }
  52. function gotMediaStream(stream){
  53.     var videoTrack = stream.getVideoTracks()[0];
  54.     var videoConstraints = videoTrack.getSettings();
  56.     divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);
  58.     window.stream = stream;
  59.     videoplay.srcObject = stream;
  61.     //audioplay.srcObject = stream;
  62.     return navigator.mediaDevices.enumerateDevices();
  63. }
  65. function handleError(err){
  66.     console.log('getUserMedia error:', err);
  67. }
  69. //匹配视频设备切换
  70. function start() {
  71. if(!navigator.mediaDevices ||
  72.         !navigator.mediaDevices.getUserMedia){
  74.         console.log('getUserMedia is not supported!');
  76.     }else{
  78.         var deviceId = videoSource.value; 
  79.  var constraints = {
  80.             video : {
  81.                 width: 640,
  82.                 height: 480,
  83.                 frameRate: 15,
  84.                 facingMode: 'environment' ,
  85.                 deviceId : deviceId ? {exact:deviceId} : undefined 
  86.             },
  87.             audio : false
  88.             //{
  89.                 //noiseSuppression: true,
  90.                 //echoCancellation: true
  91.             //}
  93.         } 
  95.         navigator.mediaDevices.getUserMedia(constraints)
  96.             .then(gotMediaStream)
  97.             .then(gotDevices)
  98.             .catch(handleError);
  99.     }
  101. }
  103. start();
  105. videoSource.onchange = start;
  107. filtersSelect.onchange = function(){
  108.     videoplay.className = filtersSelect.value;
  109. }
  111. snapshot.onclick = function() {
  112.     picture.className = filtersSelect.value; //如果先前使用了滤镜，则在截图后，也会使用滤镜
  113.     picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
  114. }
  116. function handleDataAvailable(e){
  117.     if(e && e.data && e.data.size > 0){
  118.          buffer.push(e.data);            
  119.     }
  120. }
  122. function startRecord(){
  124.     buffer = [];
  126.     var options = {
  127.         mimeType: 'video/webm;codecs=vp8'
  128.     }
  130.     if(!MediaRecorder.isTypeSupported(options.mimeType)){
  131.         console.error(`${options.mimeType} is not supported!`);
  132.         return;
  133.     }
  135.     try{
  136.         mediaRecorder = new MediaRecorder(window.stream, options);
  137.     }catch(e){
  138.         console.error('Failed to create MediaRecorder:', e);
  139.         return;    
  140.     }
  142.     mediaRecorder.ondataavailable = handleDataAvailable;
  143.     mediaRecorder.start(10);
  145. }
  147. function stopRecord(){
  148.     mediaRecorder.stop();
  149. }
  152. btnRecord.onclick = ()=>{
  154.     if(btnRecord.textContent === 'Start Record'){
  155.         startRecord();    
  156.         btnRecord.textContent = 'Stop Record';
  157.         btnPlay.disabled = true;
  158.         btnDownload.disabled = true;
  159.     }else{
  161.         stopRecord();
  162.         btnRecord.textContent = 'Start Record';
  163.         btnPlay.disabled = false;
  164.         btnDownload.disabled = false;
  165.     }
  166. }
  168. btnPlay.onclick = ()=> {
  169.     var blob = new Blob(buffer, {type: 'video/webm'});
  170.     recvideo.src = window.URL.createObjectURL(blob);
  171.     recvideo.srcObject = null;
  172.     recvideo.controls = true; //控制标签
  173.     recvideo.play();
  174. }
  176. btnDownload.onclick = ()=> {
  177.     var blob = new Blob(buffer, {type: 'video/webm'});
  178.     var url = window.URL.createObjectURL(blob);
  179.     var a = document.createElement('a');
  181.     a.href = url;
  182.     a.style.display = 'none';
  183.     a.download = 'aaa.webm';
  184.     a.click();
  185. }

7-3 【来点实战】WebRTC采集屏幕数据

图片.png
打开谷歌浏览器，输入 chrome://flags 查看支持的选项
打开下面链接，启动某个功能。
chrome://flags/#enable-experimental-web-platform-features
图片.png
代码实现，主要将上一节的
getUserMedia修改为getDisplayMedia。
图片.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><video playsinline id="recplayer"></video></td>
  66.                 <td><div id='constraints' class='output'></div></td>
  67.             </tr>
  69.             <tr>
  70.                 <td><button id="record">Start Record</button></td>
  71.                 <td><button id="recplay" disabled>Play</button></td>
  72.                 <td><button id="download" disabled>Download</button></td>
  73.             </tr>
  74.         </table>
  75.     </section>
  77.     <section>
  78.         <div>
  79.             <button id="snapshot">Take snapshot</button>
  80.         </div>
  81.         <div>
  82.             <canvas id="picture"></canvas>
  83.         </div>
  85.     </section>
  88.     <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
  89.     <script src="./js/client.js"></script>
  90.     </body>
  91. </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. //record
  25. var recvideo = document.querySelector('video#recplayer');
  26. var btnRecord = document.querySelector('button#record');
  27. var btnPlay = document.querySelector('button#recplay');
  28. var btnDownload = document.querySelector('button#download');
  30. var buffer;
  31. var mediaRecorder;
  34. function gotDevices(deviceInfos){
  36.     deviceInfos.forEach(function(deviceinfo){
  38.         var option = document.createElement('option');
  39.         option.text = deviceinfo.label;
  40.         option.value = deviceinfo.deviceId;
  42.         if(deviceinfo.kind === 'audioinput'){
  43.             audioSource.appendChild(option);
  44.         }else if(deviceinfo.kind === 'audiooutput'){
  45.             audioOutput.appendChild(option);
  46.         }else if(deviceinfo.kind === 'videoinput'){
  47.             videoSource.appendChild(option);
  48.         }
  49.     })
  50. }
  52. function gotMediaStream(stream){
  53.     var videoTrack = stream.getVideoTracks()[0];
  54.     var videoConstraints = videoTrack.getSettings();
  56.     divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);
  58.     window.stream = stream;
  59.     videoplay.srcObject = stream;
  61.     //audioplay.srcObject = stream;
  62.     return navigator.mediaDevices.enumerateDevices();
  63. }
  65. function handleError(err){
  66.     console.log('getDisplayMedia error:', err);
  67. }
  69. //匹配视频设备切换
  70. function start() {
  71. if(!navigator.mediaDevices ||
  72.         !navigator.mediaDevices.getDisplayMedia){
  74.         console.log('getDisplayMedia is not supported!');
  76.     }else{
  78.         var deviceId = videoSource.value; 
  79.  var constraints = {
  80.             // video : {
  81.                 // width: 640,
  82.                 // height: 480,
  83.                 // frameRate: 15,
  84.                 // facingMode: 'environment' ,
  85.                 // deviceId : deviceId ? {exact:deviceId} : undefined 
  86.             // },
  87.             video :true,
  88.             audio : false
  89.             //{
  90.                 //noiseSuppression: true,
  91.                 //echoCancellation: true
  92.             //}
  94.         } 
  96.         navigator.mediaDevices.getDisplayMedia(constraints)
  97.             .then(gotMediaStream)
  98.             .then(gotDevices)
  99.             .catch(handleError);
  100.     }
  102. }
  104. start();
  106. videoSource.onchange = start;
  108. filtersSelect.onchange = function(){
  109.     videoplay.className = filtersSelect.value;
  110. }
  112. snapshot.onclick = function() {
  113.     picture.className = filtersSelect.value; //如果先前使用了滤镜，则在截图后，也会使用滤镜
  114.     picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
  115. }
  117. function handleDataAvailable(e){
  118.     if(e && e.data && e.data.size > 0){
  119.          buffer.push(e.data);            
  120.     }
  121. }
  123. function startRecord(){
  125.     buffer = [];
  127.     var options = {
  128.         mimeType: 'video/webm;codecs=vp8'
  129.     }
  131.     if(!MediaRecorder.isTypeSupported(options.mimeType)){
  132.         console.error(`${options.mimeType} is not supported!`);
  133.         return;
  134.     }
  136.     try{
  137.         mediaRecorder = new MediaRecorder(window.stream, options);
  138.     }catch(e){
  139.         console.error('Failed to create MediaRecorder:', e);
  140.         return;    
  141.     }
  143.     mediaRecorder.ondataavailable = handleDataAvailable;
  144.     mediaRecorder.start(10);
  146. }
  148. function stopRecord(){
  149.     mediaRecorder.stop();
  150. }
  153. btnRecord.onclick = ()=>{
  155.     if(btnRecord.textContent === 'Start Record'){
  156.         startRecord();    
  157.         btnRecord.textContent = 'Stop Record';
  158.         btnPlay.disabled = true;
  159.         btnDownload.disabled = true;
  160.     }else{
  162.         stopRecord();
  163.         btnRecord.textContent = 'Start Record';
  164.         btnPlay.disabled = false;
  165.         btnDownload.disabled = false;
  166.     }
  167. }
  169. btnPlay.onclick = ()=> {
  170.     var blob = new Blob(buffer, {type: 'video/webm'});
  171.     recvideo.src = window.URL.createObjectURL(blob);
  172.     recvideo.srcObject = null;
  173.     recvideo.controls = true; //控制标签
  174.     recvideo.play();
  175. }
  177. btnDownload.onclick = ()=> {
  178.     var blob = new Blob(buffer, {type: 'video/webm'});
  179.     var url = window.URL.createObjectURL(blob);
  180.     var a = document.createElement('a');
  182.     a.href = url;
  183.     a.style.display = 'none';
  184.     a.download = 'aaa.webm';
  185.     a.click();
  186. }

代码手写.zip06_07chapter.zip