webrtc 入门第二章 音视频录制
webrtc 入門第二章 音視頻錄制
一、介紹
1、媒體錄制原理
? 在很多場景中回放音視頻資源的需求是非常重要的例如會議，直播授課等。任何媒體形式的表情都可進行錄制，如 ,,等。其中內容更加自由用戶的任何2d,3d操作都可以進行錄制和傳播。
? MediaRecoder 是控制媒體錄制的api，使用它可以進行錄制音視頻，使得web可以脫離服務器，獨立進行視頻錄制。同時W3C也制定了相應的web標準。錄制出來的是經過轉碼的標準媒體流數據。
二、實踐
1、錄制對象 MediaRecoder
var mediarecode=new MediaRecoder(stream,options)1.stream：為通過getUserMedia方法獲取到的視頻流。同樣可已直接用 ,, 標簽直接獲取，這樣可以實現本地播放視頻錄制，繪畫板同步等。
2.options:為限制參數，具體如下
| mimeType | 指定錄制的媒體類型（音頻、視頻）、編碼方式（audio/mpeg,audio/ogg,video/mp4）等 |
| audioBitsPerSecond | 指定音頻比特率 |
| videoBitsPerSecond | 指定視頻比特率 |
| bitsPerSecond | 指定音視頻比特率,包含上面兩項 |
3.mediaRecoder的常用api方法和事件
| MediaRecoder.start() | 開始錄制事件，timeslice為觸發ondataavailable事件 | 方法 |
| MediaRecoder.pause() | 停止錄制 | 方法 |
| MediaRecoder.resume() | 恢復錄制 | 方法 |
| MediaRecoder.isTypeSupported() | 判斷是否支持某個格式（有需求可以使用） | 方法 |
| MediaRecoder.ondataavailable() | 當有錄制有有效數據是觸發該事件，在次方法里可以處理數據例如下載等 | 事件 |
| MediaRecoder.onerror() | 錄制出錯時觸發該事件，此時會停止錄制 | 事件 |
2、錄制音頻
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head><meta charset="UTF-8"><title>webrtc錄制聲音</title> </head> <body> <div class="app"><h1>聲音錄制<h1/><audio class="audio" controls autoplay></audio><hr/><input type="button" title="打開麥克風" value="打開麥克風" v-on:click="openAudio"/><input type="button" title="開始錄制" value="開始錄制" v-on:click="startRecode"/><input type="button" title="停止錄制" value="停止錄制" v-on:click="stopRecode"/><input type="button" title="播放" value="播放" v-on:click="play"/>{{/* <input type="button" title="下載" value="下載" v-on:click="download"/>*/}}<a :href="downloadUrl" download="test1.ogg" v-on:click="download"/>下載</a> </div> </body> <script src="/static/js/Vue.2.5.3.js"></script> <script type="text/javascript">let vm = new Vue({el: ".app",delimiters: ['{[', ']}'],data: {status: "",stream: null,mediaRecorder: null,recordedBlobs: [],audio: null,downloadUrl: ""},methods: {// 下載download: function () {const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})this.downloadUrl = window.URL.createObjectURL(blob)//setTimeout(() => {// window.URL.revokeObjectURL(this.downloadUrl)// }, 100)// // 必須創建一個a標簽下載const a = document.createElement("a")a.style.display = "none"a.href = this.downloadUrla.download = "test.ogg"document.body.appendChild(a)a.click()// 移除a標簽setTimeout(() => {document.body.removeChild(a)}, 100)},// 開始錄制startRecode: function () {let that = this;if (that.status == "startRecode") {return}if (that.stream == null) {alert("請打開麥克風")return;}that.status = "startRecode"// 開始錄制let options = {"mineType": "audio/ogg;"}try {that.mediaRecorder = new MediaRecorder(that.stream, options)console.log(that.mediaRecorder)// 退出回調事件that.mediaRecorder.onstop = (event) => {console.log("錄制已停止")console.log(event)console.log(that.recordedBlobs)}// 錄制數據回調時間that.mediaRecorder.ondataavailable = that.ondataavailable// 錄制10sthat.mediaRecorder.start(10)} catch (e) {alert("錄制失敗", e)}},// 播放play: function () {const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})this.audio = document.querySelector('audio');this.audio.src = window.URL.createObjectURL(blob)this.audio.play()},stopRecode: function () {this.mediaRecorder.stop()alert("停止錄制")},ondataavailable: function (event) {let that = this;if (event.data && event.data.size > 0) {console.log("recode data", event.data)// 收到數據后，導入本都錄制緩存that.recordedBlobs.push(event.data)}},openAudio: function () {if (navigator.getUserMedia) {window.audioContext = new AudioContext()navigator.getUserMedia({'audio': true}, this.onVoice, this.errorFunc); //success是獲取成功的回調函數} else {alert('Native device media streaming (getUserMedia) not supported in this browser.');}},errorFunc: function (e) {alert("tive device media streaming (getUserMedia) not supported in this browser")},onVoice: function (stream) {let that = this;console.log(stream)that.status = "start"that.stream = stream}},}) </script> </html>音頻錄制的流程如下
1.打開麥克風：同樣使用getUserMedia()方法 約束條件’audio’: true ， 即可請求麥克風。獲取到音頻流stream
2.錄制：使用MediaRecorder 接口開始錄制。在錄制過程中ondataavailable 回調方法將錄制到的音頻數據存入緩存中
3.播放：將音頻緩存的數據創建Blob 對象，然后使用audio標簽播放
4.下載：將音頻緩存的數據創建Blob 對象，然后window.URL.createObjectURL創建下載地址，使用a標簽進行下載
3、錄制視頻
錄制視頻的方式及流程和錄制音頻的過程時一樣的，唯一的區別就是在媒體流的格式
1.getUserMedia 約束項 constraints={video:{width:400,height:300}}
2.使用Blob創建視頻對象 options = {“mineType”: “video/webm”}
其余流程都一樣，本次不展示視頻錄制代碼
三、總結
本章介紹了關于包括音頻，視頻等媒體資源錄制，其流程其實很簡單，使用到的api也不多，直接看代碼都就可以操作，需要注意的如下
1.關于媒體設備的支持性和兼容性，不同瀏覽器版本對api的支持上可能不同
2.需要注意在錄制過程中的使用參數，不同的應用場景對使用的參數可能會有差別
3.錄制canvas 需要查看如何獲取canvas的流媒體可以查看 canvas.captureStream api，該方法可以獲得canvas的流媒體，然后可以做一些同步播放或者錄制等功能，和音視頻操作一樣。
四、感謝
感謝作者 亢少軍老師的 《WebRTC音視頻開發 》 課本 第七章 媒體錄制 的指導
總結
以上是生活随笔為你收集整理的webrtc 入门第二章 音视频录制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2019杭电多校 Snowy Smil
- 下一篇： 阿里云大数据三次技术突围：Greenpl