2. 程式人生 > >HTML5呼叫攝像頭+視訊特效+錄製視訊+錄音+截圖+變聲+濾波+音訊視覺化

HTML5呼叫攝像頭+視訊特效+錄製視訊+錄音+截圖+變聲+濾波+音訊視覺化

阿新 • • 發佈：2018-12-09

1.寫在前面

根據最近的學習，寫了一個demo, 可以通過navigator.mediaDevices.getUserMedia()方法呼叫電腦攝像頭，並實現了錄製音訊，錄製視訊，對攝像頭的內容進行截圖下載；通過AudioContext使用web audio api處理音訊資訊，實現濾波以及簡單變聲處理。錄製使用的api是MediaRecorder。整個demo沒有使用其他的庫，全部是原生api. 本專案程式碼我會上傳。

2.實現過程

(1)呼叫攝像頭 pc端大部分瀏覽器支援getUserMedia()方法，安卓端除了chrome for android支援的很少；同時，要注意，在本地呼叫這個方法被禁止，只能在線上網頁使用，我的測試使用了nodejs方法，寫一個簡單的後臺，構建一個http伺服器，localhost方式訪問。使用navigator.mediaDevices.getUserMedia()獲取視訊，返回值是一個promise型別；呼叫程式碼如下：

var video = document.querySelector('video');
var option = {audio:false,video:{width:640,height:480}};
var media = navigator.mediaDevices.getUserMedia(option);
  media.then(show).catch((error)=>{console.log(error)});
  functionshow(mediaStream){
    video.src = window.URL.createObjectURL(mediaStream)
 
;
    //將meida流轉為urlvideo.onloadedmetadata = function(e) {
        video.play();
  };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

這段程式碼是呼叫核心，會請求使用者是否開啟攝像頭。方法引數是設定，具體參見MDN網站介面指導。其中，URL.createObjectURL(blob)這個方法會把blob格式資料轉為url，然後通過提供給audio,video等標籤就可以顯示，這個方法在我們的應用中很常用。 (2)視訊特效 實現了簡單的特效，grayscale/sepia/blur 分別是灰色畫面/黃色畫面特效/模糊效果等等，核心是使用css的filter去完成，<filter屬性不止可以使用在圖片上，也可以用在video標籤上！>

filter特效有很多.參考MDN.

css:
video{
      background: rgba(255,255,255,0.5);
    }
    .grayscale{
      filter: grayscale(1);
    }
    .sepia{
      filter:sepia(1);
    }
    .blur{
      filter: blur(3px);
    }
//js:
video.onclick = ()=>{
      count++;
      switch(count){
        case 1:video.className = 'grayscale';break;
        case 2:video.className = 'sepia';break;
        case 3:video.className = 'blur';break;
        case 4:video.className = '';count=0;break;
      }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

然後設定每次點選讓video具有上面其中一個className，就可以具有不同特效了，很簡單。同時要明白這只是css特效，視訊本身並沒有改變。截圖等得到的畫面不會有這些css特效，如果需要視訊本身就有特效，可以被截圖捕捉，可以使用canvas播放視訊並處理：（我的簡單嘗試）

  //    var canvas = document.querySelector('canvas');
  //    var ctx = canvas.getContext('2d');
  //    setInterval(function(){
  //        ctx.drawImage(video,0,0,640,480);
  //        var imgdata = ctx.getImageData(0,0,640,480);
  //        //反相處理
  //        for(var i = 0; i < imgdata.height; ++i){
  //     for(var j = 0; j < imgdata.width; ++j){
  //       var x = i*4*imgdata.width + 4*j, 
  //        //每個畫素需要佔用4位資料，分別是r,g,b,alpha透明通道
  //       r = imgdata.data[x],
  //       g = imgdata.data[x+1],
  //       b = imgdata.data[x+2];
  //       imgdata.data[x+3] = 150; 
  //       //圖片反相：
  //       imgdata.data[x] = 255-r;
  //       imgdata.data[x+1] = 255-g;
  //       imgdata.data[x+2] = 255-b; 
  //     }
  //   }
  //        ctx.putImageData(imgdata,0,0);
  //    },100);
  // }
  //以上程式碼實現了反轉效果，視訊變成負片樣式，顯示在canvas上，但是canvas顯示視訊自然效能比<video>差很多。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

(3)截圖+下載 截圖的思路是構建一個canvas標籤，使用drawImage()把視訊一幀繪製在canvas上，再使用canvas.toBlob()方法得到blob資料，這時就可以顯示在頁面或者儲存了(這裡是用了URL.createObjectURL(blob))，下載的思路是構建一個a標籤，href賦值上面的url，download設定名稱，然後a.click()就ok了。類似於<a href="xxx" download="aaa">點我下載</a>

function shoot(){
      var canvas = document.createElement('canvas');
      canvas.width = 640;
      canvas.height = 480;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(video,0,0);
      canvas.toBlob((myblob)=>{
        download(myblob);
      });
  }
  functiondownload(blob){
     vara = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = Math.random().toString(36).substr(2,14);
        a.click();
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Math.random().toString(36).substr(2,14) 這句程式碼可以得到14位隨機字串，這樣就可以讓檔名是一個隨機字串而不會重複。 (4)使用web audio api—AudioContext （音訊視覺化+濾波+變聲） 這個api很強大，使用也是相當複雜，方法極多。建議先去查一下詳細介紹，這裡我只談關鍵點。 這裡寫圖片描述 這裡是音訊視覺化部分，可以實時隨著音調變化數字大小以及黃色條帶的長度，實現一個簡單的音訊視覺化，如果需要做華麗的視覺化也就不難了。

html:
<p id="volume"></p>
<div class="box"></div>
<br>
高通濾波:<input type="range" min='20' max='15000' step='40' value='20' id="high">
<p id='level'>0</p>
<p>只有高於此頻率的才能通過，濾掉低頻率內容</p>
js:
  var audio = document.querySelector('audio'); 
   var audioctx = new (window.AudioContext || window.webkitAudioContext);
   var filter_high = audioctx.createBiquadFilter();
   var analyser = audioctx.createAnalyser();
   var dataArray = new Uint8Array(analyser.frequencyBinCount);
   var media1 = navigator.mediaDevices.getUserMedia({audio:true});
   media1.then(getdata).catch((error)=>{alert(error)});
   function getdata(mediaStream){
    var mic = audioctx.createMediaStreamSource(mediaStream);
    audio.src = window.URL.createObjectURL(mediaStream);
    mic.connect(analyser);
    filter_high.type = 'highpass';
    filter_high.frequency.value = 20;
    analyser.connect(filter_high);
    //filter_high.connect(audioctx.destination);
    //analyser.connect(audioctx.destination);
   }
   elVolume = document.getElementById('volume');
   var box = document.querySelector('.box');
  function draw(){
    var x = Math.floor(getByteFrequencyDataAverage());
    elVolume.innerHTML = x;
    box.style.width = 2+x*3+'px';
  };
  setInterval(draw,100);

   function getByteFrequencyDataAverage(){
    analyser.getByteFrequencyData(dataArray);
    return dataArray.reduce(function(previous, current) {
        return previous + current;
    }) / analyser.frequencyBinCount;
    };
    //以下是簡單的高頻濾波部分
    var high = document.querySelector('#high');
    high.onchange = function(){
      filter_high.frequency.value = high.value;
      document.querySelector('#level').innerText = high.value;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

首先建立AudioContext，建立圖形化需要的Analyser,濾波需要的BiquadFilter; 通過audioctx.createMediaStreamSource(mediaStream) 把麥克風的聲音處理一下，connect連線到analyser, filter_high.type = ‘highpass’; filter_high.frequency.value = 20;設定濾波器是高通濾波器，界限為20HZ，高於20HZ才能輸出。 var dataArray = new Uint8Array(analyser.frequencyBinCount);這句是建立一個無符號陣列，用於analyser.getByteFrequencyData(dataArray);方法獲取analyser得到的音調資訊，並存在dataArray裡面，通過求一個實際段內音調的均值得到此瞬間的音調是多少，然後draw()執行，改變 <p id="volume"></p> <div class="box"></div> 的表現，實現音訊視覺化，具體參見MDN； 那麼變聲怎麼做呢，使用ScriptProcessor這個node，就可以對音訊內容做處理然後再輸出，也就能讓我們去做變聲處理了。 這裡寫圖片描述

      //通過ScriptProcessorNode處理音訊
      //變聲音  播放速度減小 聲音變粗 速度增大 聲音變細
      //反應在程式碼就是取樣點減少。。
      var style = document.querySelector('#audio_style');
      style.onchange = function(){
        audio_style = parseInt(style.value);
      }
      var audio_style = 0;
  var scriptNode = audioctx.createScriptProcessor(4096, 1, 1);
      scriptNode.onaudioprocess = function(audioProcessingEvent) {
      var inputBuffer = audioProcessingEvent.inputBuffer;
      var outputBuffer = audioProcessingEvent.outputBuffer;
     for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
        var inputData = inputBuffer.getChannelData(channel);
        var outputData = outputBuffer.getChannelData(channel);
        // Loop through the 4096 samples
        for (var sample = 0; sample < inputBuffer.length; sample++) {
          // outputData[sample] = inputData[sample]*1; 
          //這裡做處理即可 
          switch(audio_style){
            case 0:outputData[sample] = inputData[sample];break;
            case 1:if(sample%2==0){
                       outputData[sample] = inputData[sample/2];}
                   else{
                       outputData[sample] = inputData[(sample-1)/2];
                    };break;
          }
        }
      }
    }
    filter_high.connect(scriptNode);
    scriptNode.connect(audioctx.destination);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

這裡的style就是html上的一個select，我設定了兩個value，一個正常一個是聲音加粗變聲特效，實現方式就是 if(sample%2==0){outputData[sample]=inputData[sample/2];} else{outputData[sample] = inputData[(sample-1)/2]; 只把每個取樣區間的前一半資料輸出，這樣就可以基本實現取樣速度減小一半，播放起來的效果是就是聲音很粗，很低沉。我只簡單做了一個聲音變粗的處理，還沒有想出複雜的變聲技巧，但是肯定是在上面這個地方做處理的，按照一定的演算法修改輸出buffer資料，知道了核心處理方法剩下的就是演算法層面了。

filter_high.connect(scriptNode);
    scriptNode.connect(audioctx.destination);
  • 1
  • 2

這兩句程式碼意思是把之前那個濾波器連線到處理模組再把處理模組連線到輸出裝置上。我們就可以聽到處理後的聲音了。 (5)錄製視訊+錄製音訊 錄製視訊與音訊的核心是MediaRecorder這樣一個api，可以把stream流轉為blob，然後根據我們的設定儲存，使用的方法有start,stop等方法，ondataavailable等事件。先上程式碼： 這裡寫圖片描述 錄製音訊：

<button id="record_audio">錄音頻</button>
<button id="stop_audio">stop</button>
<audio controls="controls" id="record_play"></audio>
js:
 var record_audio = document.querySelector('#record_audio');
    var stop_audio = document.querySelector('#stop_audio');
    var record_play = document.querySelector('#record_play');
    var audio_stream;
     var media1 = navigator.mediaDevices.getUserMedia({audio:true});
    media1.then((stream)=>{
      audio_stream = stream;
    }).catch((error)=>{alert(error)});
    record_audio.onclick = function(){
         record_audio.disabled = 'true';
         varmediaRecorder = newMediaRecorder(audio_stream);
         mediaRecorder.ondataavailable = function(e) {
           // blob_audio = newBlob([e.data], {type:e.data.type});
           blob_audio = newBlob([e.data], {type:'audio/mp3'});
           //可以存為mp3格式但是本地無法播放，只有網頁可以播放
        }
         mediaRecorder.start();
        mediaRecorder.onstop = function(){
           record_play.src = URL.createObjectURL(blob_audio);
           record_play.play();
           //download(blob_audio);
        }
        stop_audio.onclick = function(){
          record_audio.disabled = '';
          mediaRecorder.stop();
        }
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

錄製過程就是new MediaRecorder(audio_stream)建立一個mediaRecorder , ondataavailable方法下，將e.data資料轉為blob格式：new Blob([e.data], {type:’audio/mp3’}); 其實這裡可以使用原本格式，e,data.type,看了一下返回的是video/webm, 很迷，改成mp3之後，在網頁端依舊可以播放，但是儲存到本地就無法播放（未解決），然後的流程和上面知識點差不多。 錄製視訊：視訊錄製與音訊錄製差別不大，

<button id="record">錄視訊</button>
<button id="stop">stop</button>
js:
  var record = document.querySelector('#record');
  var stop_record = document.querySelector('#stop');
  var video2 = document.querySelector('#video2');
  var video_stream;
  //var media = navigator.mediaDevices.getUserMedia(option);
  //這個media就是上面那個
      media.then((stream)=>{
        video_stream = stream;
      }).catch((error)=>{alert(error)});
      record.onclick = function(){
         record.disabled = 'true';
         varmediaRecorder = newMediaRecorder(video_stream);
         mediaRecorder.ondataavailable = function(e) {
            myblob = newBlob([e.data], {type:e.data.type});
        }
         mediaRecorder.start();
        mediaRecorder.onstop = function(){
          //download(myblob);
          //播放器不能播放webm格式視訊，只能網頁播放
          //可能需要使用庫轉碼
           video2.src = URL.createObjectURL(myblob);
           video2.play();
        }
        stop_record.onclick = function(){
          record.disabled = '';
          mediaRecorder.stop();
        }
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

這裡的視訊就是video/webm格式，還不能轉為其他格式，否則無法播放，webm格式我的本地播放器不支援，所以就沒有下載，直接在網頁端播放了，網上查到貌似不能音訊視訊一起儲存；如果需要其他格式的視訊，可以使用庫轉碼，或者參考網上js轉碼過程。

3.總結

本次demo我研究了一兩天，也邁過了很多坑，找到了合適的實現方式，目前pc端支援情況還不錯，之前找這方面的東西，找了很久都沒有找到很全面的，所以我自己實現了一遍，雖然很多地方還沒有完美解決，但是核心的問題都一一解決了。繼續努力，希望幫到大家。

相關推薦

HTML5呼叫攝像頭+視訊特效+錄製視訊+錄音+截圖+變聲+濾波+音訊視覺化

1.寫在前面 根據最近的學習，寫了一個demo, 可以通過navigator.mediaDevices.getUserMedia()方法呼叫電腦攝像頭，並實現了錄製音訊，錄製視訊，對攝像頭的內容進行截圖下載；通過AudioContext使用web audio

iphone ios 視訊特效，視訊合成

如果對av foundation 不熟悉得話，建議先看看wwdc 2010 關於av foundation得講座。http://blog.csdn.net/linzhiji/article/details/6752722 好的軟體 CinemaFX for Video

web/html5呼叫攝像頭實現二維碼掃描

閒話不說，直接上程式碼，本人測試通過！ html/js <!DOCTYPE html> <html><head> <title>HTML5 code Reader</title> <meta http-

java使用ffmpeg擷取視訊某個時間點的截圖

1.軟體安裝   mac brew install ffmpeg 安裝後路徑："/usr/local/Cellar/ffmpeg/4.0.1/bin ffmpeg –version 檢視版本   linux 暫缺，後補

java-FFmpeg（一） 實現視訊的轉碼和截圖功能

FFmpeg是一個開源免費跨平臺的視訊和音訊流方案，屬於自由軟體，採用LGPL或GPL許可證（依據你選擇的元件）。它提供了錄製、轉換以及流化音視訊的完整解決方案。它包含了非常先進的音訊/視訊編解碼庫libavcodec，為了保證高可移植性和編解碼質量，libavcodec裡很多codec都是從頭開發

[前端]利用WebAudioAPI獲取音訊頻譜（html5音訊視覺化）

專案希望可以把音訊視覺化，有條隨聲音波動的曲線或者是像唱吧那種。開始是搜到了騰訊大腿（TGideas）寫的audio視覺化元件，想著直接用，後來各種原因還是打算自己重新寫一個……雖然明顯寫得low了很多。 騰訊大腿的audio元件地址http://www.3fwork.com/b403/001620

OpenCV 呼叫攝像頭錄製指定解析度視訊----（解決儲存的視訊僅有6Kb的問題）

1.環境資訊 win10 系統，VS2012,openCV 2.4.9，支援UVC協議的免驅動720p攝像頭 2.問題描述 攝像頭最大支援1280x960解析度，但OpenCV呼叫的時候預設的解析度是640x480。 需要呼叫攝像頭錄製1280x72

c# 呼叫攝像頭進行視訊錄製和壓縮等

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Drawing; using System.Runtim

Qt使用opencv呼叫攝像頭錄製視訊並儲存檔案

首先需要說的是我的筆記本攝像頭是WebCam SCB-0355N，因為按照網上的方法錄製的視訊一直無法開啟，後來想到可能跟攝像頭錄製格式有關，於是用系統自帶的錄製軟體錄製並儲存，發現儲存的是.wmv檔案

OpenCV學習筆記_呼叫攝像頭錄製視訊(無聲音)

#include <cv.h> #include <highgui.h> using namespace std; int main(void){ cvNamedWind

Android 前置攝像頭的預設是180度，導致應用拍照和錄製視訊是倒立的問題修改

出問題的平板使用的是mediatek平臺晶片,所以修改檔案路徑如下: vendor/mediatek/proprietary/custom/hq8735_6ttb_b2b_m/hal/imgsensor_metadata/common/config_static_metadata_common.

“毛星雲OpenCV3程式設計入門之python實現”第三篇讀取視訊+呼叫攝像頭

1.6.1讀取視訊+呼叫攝像頭 # -*- coding: gbk -*- __author__ = 'sunzhilong' import cv2 #讀取視訊，以幀顯示 cap = cv2.VideoCapture("E:/Study/python/Open

JS web 呼叫攝像頭 擷取視訊畫面

Html <p> <button onclick="openMedia()">開啟</button> <button onclick="closeMedia()">關閉</button> <butto

H5呼叫手機攝像頭，圖片，視訊等

限制只能選擇圖片<input type="file" accept="image/*">限制只能選擇視訊<input type="file" accept="video/*">限

用python呼叫呼叫攝像頭並儲存視訊

今天需要寫一段程式碼，呼叫攝像頭並儲存視訊。首先是說一下環境配置Below Python packages are to be downloaded and installed to their default locations.1.2. Numpy.1.3. Matplo

解決微信企業號和公眾號無法呼叫攝像頭拍視訊的問題

一直以來在微信裡面始終無法用<input id="videofile" name="videofile" type="file"  accept="video/*" multiple="" onchange="uploadFile(this,3)">實現呼叫攝像頭

C#呼叫攝像頭拍攝，截圖，視訊

using System.Runtime.InteropServices; using System.Drawing.Imaging; namespace WindowsFormsApplication2 { class Pick { private const int W

Python+Opencv呼叫攝像頭實現人臉識別並儲存視訊及儲存空檔案問題解決

前言 本文介紹了利用Python+Opencv實現呼叫攝像頭、進行人臉識別、並儲存為avi格式視訊的程式方法。至於python+opencv測試環境的搭建，回頭再開一個帖子進行介紹。 前期配置 Python2.7+Opencv2.4.13 實現過程 先貼程式碼：

C#呼叫FFMPEG實現桌面錄製（視訊+音訊+生成本地檔案）【筆記】

不得不說FFMPEG真是個神奇的玩意，所接觸的部分不過萬一。網上有個很火的例子是c++方面的，當然這個功能還是用c++來實現比較妥當。 然而我不會c++ 因為我的功能需求比較簡單，只要實現基本的錄製就可以了，其實就是一句命令的事 先來程式碼：RecordHelper類 u

javaCV開發詳解之2：推流器實現，推本地攝像頭視訊到流媒體伺服器以及攝像頭錄製視訊功能實現(基於javaCV-FFMPEG、javaCV-openCV)

javaCV系列文章： 補充篇： 歡迎大家積極開心的加入討論群 javacpp-ffmpeg: 前言： 本章將在上一章的基礎上，增加視訊推流到流媒體伺服器和視訊錄製的功能； 功能：實現邊播放邊錄製/推流，停止預覽即停止錄製/推流 提示：