开发ASP.NET MVC 在线录音录像（音视频录制并上传）

最近有个在线招聘录音的开发需求，需要在招聘网站上让招聘者上传录音和视频。

找到两个不错的javascript开源，可以在除了IE以外的浏览器运行。

https://github.com/mattdiamond/Recorderjs

https://github.com/muaz-khan/RecordRTC

核心算法如下：

Bit rate = (sampling rate) × (bit depth) × (number of channels)

举例说明，CD音质的Bit rate就是：

sampling rate =44.1 kHz

bit depth =16bit

通道（左声道+右声道） = 2

44100 × 16 × 2 = 1411200 bits per second = 1411.2 kbit/s

注意，以上单位是位！不是字节！ 

开发中有一个坑点，就是音频的采样率比较高，造成音频的比特率较大，文件随之很大，找了一些资料，只能减少一半：

http://stackoverflow.com/questions/16296645/decrease-bitrate-on-wav-file-created-with-recorderjs/26245260#26245260

 

Webrtc的音频编解码采用iLIBC/iSAC/G722/PCM16/RED/AVT编解码技术

在iSAC编码下，采样率是16khz，24khz，32khz；（默认为16khz）
在iLBC编码（Internet Low Bitrate Codec）下，采样频率：8khz；20ms帧比特率为15.2kbps

在iLBC下能最大化的减少比特率.但在这两个js库中查不到使用了什么编码。

 

尝试1：

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var audioContext = new AudioContext();

audioContext.sampleRate = 16000;

//发现是无法设置AudioContext 的采样率，这是一个操作系统指定的不可改属性
console.log(audioContext.sampleRate);

 

尝试2：成功。方法是通过将wav转为mp3:

https://github.com/remusnegrota/Recorderjs/tree/Recorder.js-For-Mp3 

 

使用Recorderjs的例子在：examples/example_simple_exportwav

MVC工程是使用RecordRTC。

 

一些预备知识：

码率：Bit Rate，指视频或音频文件在单位时间内使用的数据流量，该参数的单位通常是Kbps，也就是千比特每秒。通常2000kbps~3000kbps就已经足以将画质效果表现到极致了。码率参数与视频文件最终体积大小有直接性的关系。 (编码码率---软件)

　　混合码率：Overall Bit Rate，指视频文件中视频和音频混合后的整体平均码率。一般描述一个视频文件的码率都是指OBR，如新浪播客允许的OBR上限为523Kbps。 

　　固定码率：Constant Bit Rate，指的是编码器的输出码率（或者解码器的输入码率）应该是固定制（常数）。CBR不适合高清晰度视频的编码，因为CBR将导致没有足够的码率应对复杂多变内容部分进行编码(从而导致画质下降)，同时在简单的内容部分会浪费一些码率。 

　　可变码率：Variable Bit Rate，编码器的输出码率(或者解码器的输入码率)可以根据编码器的输入源信号的负责度自适应的调整，目的是达到保持输出质量保持不变而不是保持输出码率保持不变。VBR编码会消耗较多的计算时间，但可以更好的利用有限的存储空间：用比较多的码率对复杂度高的段进行编码，用比较少的码率对复杂度低的段进行编码。总之需要清晰度高且体积小的视频，选择VBR是明智的选择。 

　　平均码率：Average Bit Rate，指音频或视频的平均码率，可以简单的认为等于文件大小除以播放时间。在音频编码方面与CBR基本相同，会按照设定的目标码率进行编码。但当编码器认为“适当”的时候，会使用高于目标码率的数值来进行编码以保证更好的质量。 

　　帧率：Frame Rate，是用于测量画面显示帧数的量度。所谓的测量单位为每秒显示帧数（Frames per Second，缩写：FPS）。如电影的帧率一般是25fps和29.97fps，而第一人称射击游戏等要求画面极为顺畅的特殊场合，则需要30fps以上的效果，高于60fps就没有必要了。 

　　采样率：每秒从连续信号中提取并组成离散信号的采样个数，它用赫兹（Hz）来表示。一般音乐CD的采样率是44100Hz，所以视频编码中的音频采样率保持在这个级别就完全足够了，通常视频转换器也将这个采样率作为默认设置。（芯片采样次数---硬件，得到的是原始波形文件pcm） 

　　Single Pass:在编码的时候只进行一次运算，直接生成经过编码的视频文件。 

　　Two Pass:需要运算两次，可以理解为先进行一次全局的计算，收集画面信息，并将这些信息记录到信息文件。第二次才根据采集的信息，正式进行压缩，生成压缩文件。 

　　Single pass模式编码较简单，编码速度较快，但是最终质量不如Two pass模式好，对于视频源本身画质就不佳的编码过程可以采用。Two pass通过第一次运算的信息采集，可以让需要高码率的运动画面可以分配更的码率来保证画面质量。而对于不包含太多运动信息的静态画面，则可以消减分配的码率。Twopass模式可以在影片容量与画面质量之间找到最佳平衡点。所以要求画面清晰的视频，肯定要选择Two Pass，只是编码速度惨不忍睹。

　　封装格式：多媒体封装格式也称多媒体容器 (Multimedia Container)，它不同于H.264、 AAC这类编码格式，它只是为多媒体编码提供了一个“外壳”，也就是所谓的视频格式。如MP4、AVI、MKV、FLV、WMA等。 

　　画面比例：Aspect Ratio，指视频画面宽和高的比例。常见的比例有16：9和4：3。电视媒体有严格的视频制式要求，视频比例和帧数都是固定的，而网络传播的视频比例则较为自由。一般DVD和BD电影的视频比例大多是宽屏或者超宽屏。在视频编码过程中一定要注意画面比例是否正确，不然就会出现画面拉伸变形。 

　　分辨率：指视频宽高的像素数值，单位为Px。通常视频分辨率的数值宽高比要等于画面比例，不然视频文件就会产生黑边。标准1080P的分辨率为1920×1080，帧率为60fps，也就是真高清。而最常见的网络传播的1080P高清片帧率通常为23.976 fps。

 

 

什么是 采样率 和 比特率？ 16bit/44.1kHz、24bit/48kHz、24bit/192kHz 分别代表什么？

简单来讲，采样率和比特率就像是坐标轴上的横纵坐标。 横坐标的采样率表示了每秒钟的采样次数。而声音的位数就表示每个取样的数据量，数据量越大，回放的声音越准确。   简单来讲，采样率和比特率就像是坐标轴上的横纵坐标。      横坐标的采样率表示了每秒钟的采样次数。      纵坐标的比特率表示了用数字量来量化模拟量的时候的精度,即当前的模拟量用多少位的2进制数对其编码表示。 以电话为例，每秒3000次取样，每个取样是7比特，那么电话的比特率是21000。而CD是每秒44100次取样，两个声道，每个取样是13位PCM编码，所以CD的比特率是44100*2*13=1146600。   1G容量用480Mbps传有多快，一想，这还不简单，480Mbps多快，用1024M除下不就得了，后来发现这么做不对，我将"480Mbps"误解为480兆/秒。事实上"480MBPS"应为480兆比特/秒或480兆位/秒，它等于60兆/秒.要是传1G容量应该是1024M/60=17秒。     一张700M的光盘容量为700MB = 1024*700KB = 716800KB     立体声16位44.1KHZ声音的比特率为 44100*16*2=1411200bps     1411200/8/1024=172.26KB/s     716800/172.26=4161.15s     4151.15/60=69.3525min   采样率 采样率实际上是指当将声音储存至计算机中，必须经过一个录音转换的过程，转换些什么呢？就是把声音这种模拟信号转成计算机可以辨识的数字信号，在转换过程中将声波的波形以微分方式切开成许多单位，再把每个切开的声波以一个数值来代表该单位的一个量，以此方式完成采样的工作，而在单位时间内切开的数量便是所谓的采样频率，说明白些，就是模拟转数字时每秒对声波采样的数量，像是CD音乐的标准采样频率为44.1KHz，这也是目前声卡与计算机作业间最常用的采样频率。 另外，在单位时间内采样的数量越多就会越接近原始的模拟信号，在将数字信号还原成模拟信号时也就越能接近真实的原始声音；相对的越高的采样率，资料的大小就越大，反之则越小，当然也就越不真实了。数字数据量的大小与声道数、采样率、音质分辨率有着密不可分的关系。 前面提到CD音乐的采样率为44.1KHz，而在计算机上的DVD音效则为48KHz (经声卡转换) ，一般的电台FM广播为32KHz，其它的音效则因不同的应用有不同的采样率，像是以网络会议之类的应用就不要使用高的采样率，否则在传递这些声音数据时会是一件十分痛苦的事。 当然，目前比较盛行的高清碟的采样率就相当的高，达到了192kHz。而目前的声卡，绝大多数都可以支持44.1kHz、48kHz、96kHz，高端产品可支持192kHz甚至更高。   上图中 16bits 对应 2^16 = 65536个电平， 20*log10(65536)  = 96.3296dB   比特率 声波在转为数字的过程中不是只有采样率会影响原始声音的完整性，另一个亦具有举足轻重的参数——量化精度（比特率），也是相当的重要。一般来说，音质分辨率就是大家常说的bit数。目前，绝大多数的声卡都已经可以支持24bit的量化精度。 那么，什么是量化精度呢？前面曾说明采样频率，它是针对每秒钟所采样的数量，而量化精度则是对于声波的“振幅”进行切割，形成类似阶梯的度量单位。所以，如果说采样频率是对声波水平进行的X轴切割，那么量化精度则是对Y轴的切割，切割的数量是以最大振幅切成2的n次方计算，n就是bit数。 举个例子，如果是8bit，那么在振幅方面的采样就有256阶，若是16bit，则振幅的计量单位便会成为65536阶，越多的阶数就越能精确描述每个采样的振幅高度。如此，也就越接近原始声波的“能量”，在还原的过程序也就越接近原始的声音了。 另外，bit的数目还决定了声波振幅的范围（即动态范围，最大音量与最小音量的差距）。如果这个位数越大，则能够表示的数值越大，描述波形更精确。每一个Bit的数据可以记录约等于6dB动态的信号。一般来说，16Bit可以提供最大96dB的动态范围（加高频颤动后只有92dB）。每增加一个Bit的量化精度，这个值就增加6dB。因此，我们可以推断出20Bit可以达到120dB的动态范围，而24Bit则可以提供高达144dB的动态范围。 那么，动态范围大了，会有什么好处呢？动态范围是指系统的输出噪音功率和最大不失真音量功率的比值，这个值越大，则系统可以承受很高的动态。比如1812序曲中的炮声，如果系统动态过小，高于动态范围的信号将被削波（Clipping, 高于0dB的溢出信号将被砍掉，会导致噼里啪啦的声音）。

视图代码：

@{
    ViewBag.Title = "Index";
    Layout = null;
}


"en">
    
        
        "Content-Type" content="text/html; charset=UTF-8">
        "utf-8">
        "viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        "X-UA-Compatible" content="IE=edge,chrome=1">
        "stylesheet" href="/css/style.css">

        
        
        
        
        
    

    
        
          
        
            
class="experiment">  
             
                
"text-align:center;">
                     
                
                


                "record">录像
                "stop" disabled>停止并上传
                "delete" disabled>从服务器删除录像

                
"container" style="padding:1em 2em;">
            
            
            
            
            
            
            
 
        

    
        
        

            

 
            
        
    
        
        
    

 

控制器：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebTalk.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult PostRecordedAudioVideo()
        {
            foreach (string upload in Request.Files)
            {
                var path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
                var file = Request.Files[upload];
                if (file == null) continue;

                file.SaveAs(Path.Combine(path, Request.Form[0]));
            }
            return Json(Request.Form[0]);
        }

        [HttpPost]
        public ActionResult DeleteFile()
        {
            var fileUrl = AppDomain.CurrentDomain.BaseDirectory + "uploads/" + Request.Form["delete-file"];
            new FileInfo(fileUrl + ".wav").Delete();
            new FileInfo(fileUrl + ".webm").Delete();
            return Json(true);
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

 

一个优化文件大小的做法：

http://www.cnblogs.com/blqw/p/3782420.html

 

修改后js

//兼容
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var Storage = {};

if (typeof AudioContext !== 'undefined') {
    Storage.AudioContext = AudioContext;
} else if (typeof webkitAudioContext !== 'undefined') {
    Storage.AudioContext = webkitAudioContext;
}

function HZRecorder(stream, config) {
    config = config || {};
    config.sampleBits = config.sampleBits || 8;
    config.sampleRate = config.sampleRate || (44100 / 6);
    var channelCount = 1;//单声道
    var self = this;

    if (!Storage.AudioContextConstructor) {
        Storage.AudioContextConstructor = new Storage.AudioContext();
    }

    var context = Storage.AudioContextConstructor;
    var audioInput = context.createMediaStreamSource(stream);
    var recorder;
    if (context.createJavaScriptNode) {
        recorder = context.createJavaScriptNode(4096, channelCount, channelCount);
    } else if (context.createScriptProcessor) {
        recorder = context.createScriptProcessor(4096, channelCount, channelCount);
    } else {
        throw 'WebAudio API has no support on this browser.';
    }

    recorder.onaudioprocess = function (e) {
        audioData.input(e.inputBuffer.getChannelData(0));
    }

    var audioData = {
        size: 0,
        buffer: [],
        inputSampleRate: context.sampleRate,
        inputSampleBit: 16,
        outputSampleRate: config.sampleRate,
        outputSampleBit: config.sampleBits,
        input: function (data) {
            this.buffer.push(new Float32Array(data));
            this.size += data.length;
        },
        compress: function () {
            var data = new Float32Array(this.size);
            var offset = 0;
            for (var i = 0; i < this.buffer.length; i++) {
                data.set(this.buffer[i], offset);
                offset += this.buffer[i].length;
            }

            //压缩
            var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
            var length = data.length / compression;
            var result = new Float32Array(length);
            var index = 0, j = 0;
            while (index < length) {
                result[index] = data[j];
                j += compression;
                index++;
            }
            console.log(this.inputSampleRate);
            console.log(this.outputSampleRate);
            console.log(this.compression);

            return result;
        },
        encodeWAV: function () {
            var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
            var sampleBits = Math.min(this.inputSampleBit, this.outputSampleBit);
            var bytes = this.compress();
            var dataLength = bytes.length * (sampleBits / 8);
            var buffer = new ArrayBuffer(44 + dataLength);
            var data = new DataView(buffer);

            var writeString = function (offset, str) {
                for (var i = 0; i < str.length; i++) {
                    data.setUint8(offset + i, str.charCodeAt(i));
                }
            }

                //资源交换文件标识符
                writeString(0, 'RIFF');
                //下个地址开始到文件尾总字节数
                data.setUint32(4, 36 + dataLength, true);
                //WAV文件标识
                writeString(8, 'WAVE');
                //波形格式标识
                writeString(12, 'fmt ');
                //过滤字节，一般为0x10=16
                data.setUint32(16, 16, true);
                //格式类别(PCM形式采样数据)
                data.setUint16(20, 1, true);
                //通道数
                data.setUint16(22, channelCount, true);
                //采样率,每秒样本数，表示每个通达奥的播放速度
                data.setUint32(24, sampleRate, true);
                //波形数据传输率(每秒平均字节数)
                data.setUint32(28, channelCount * sampleRate * (sampleBits / 8), true);
                //快数据调整数 采样一次占用字节数
                data.setUint16(32, channelCount * (sampleBits / 8), true);
                //每样本数据位数
                data.setUint16(34, sampleBits, true);
                //数据标识符
                writeString(36, 'data');
                //采样数据总数
                data.setUint32(40, dataLength, true);
            var offset = 44;
            if (sampleBits === 8) {
                for (var i = 0; i < bytes.length; i++, offset++) {
                    var s = Math.max(-1, Math.min(1, bytes[i]));
                    var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
                    val = parseInt(255 / (65535 / (val + 32768)));
                    data.setInt8(offset, val, true);
                }
            } else {
                for (var i = 0; i < bytes.length; i++, offset += 2) {
                    var s = Math.max(-1, Math.min(1, bytes[i]));
                    data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
                }
            }

            return new Blob([data], { type: 'audio/wavv' });
        }
    };

    this.start = function () {
        audioInput.connect(recorder);
        recorder.connect(context.destination);
    }

    this.stop = function () {
        recorder.disconnect();
    }

    this.getBlob = function () {
        this.stop();
        return audioData.encodeWAV();
    }

    var returnObject = {
        start: start,
        stop: stop,
        getBlob: getBlob,
        blob: null,
        bufferSize: 0,
        sampleRate: 0,
        buffer: null,
        view: null
    };

    return returnObject;
}

View Code

 

 

完成代码下载： source code download