5.2 案例实战

下面结合案例演示HTML5访问多媒体设备的基本方法。

5.2.1 拍照和摄像

本例将使用HTML5的WebRTC技术，借助video标签实现网页视频，同时利用Canvas实现照片拍摄。本例不能直接用浏览器打开文件，需要将文件部署在Web服务器上，如Apache和IIS等。示例主要代码如下。

在Chrome中打开页面，根据浏览器界面提示，允许用户使用摄像头。浏览器将启动摄像头，左侧video标签内出现摄像头捕捉的画面，单击“快照”按钮，截取左侧视频显示在右侧画布，单击“保存”按钮，画布图片将被保存为“照片.png”以供下载，演示效果如图5.3所示。

图5.3 拍照和摄像

5.2.2 录音并压缩

本例使用getUserMedia获取用户设备的媒体访问权，然后获取麦克风的音频信息，并把它传递给audio标签进行播放，再把Blob数据发送给服务器端，保存为mp3格式的音频文件，演示效果如图5.4所示。

图5.4 录音并保存到服务器端

第1步，使用getUserMedia获取用户多媒体的访问权，具体代码如下。

第2步，利用Ajax技术，使用HTML5的FormData对象把Blob数据传递给服务器端，具体代码如下。

     var fd = new FormData();
     fd.append("audioData", blob);
     var xhr = new XMLHttpRequest();
     xhr.open("POST", url);
     xhr.send(fd);

第3步，使用HTML5的AudioContext对象获取音频数据流。如果直接录音，保存后基本上2秒就需要400K，一段20秒的录音就达到了4M。这样的数据根本无法使用，必须想办法压缩数据。具体方法和代码如下。

把双声道变为单声道。

缩减采样位数，默认是16位，现在改成8位，可以减少一半。