生活随笔
收集整理的這篇文章主要介紹了
3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🚀 優質資源分享 🚀
學習路線指引（點擊解鎖）知識定位人群定位
| 🧡 Python實戰微信訂餐小程序 🧡 | 進階級 | 本課程是python flask+微信小程序的完美結合，從項目搭建到騰訊云部署上線，打造一個全棧訂餐系統。 |
| 💛Python量化交易實戰💛 | 入門級 | 手把手帶你打造一個易擴展、更安全、效率更高的量化交易系統 |
一、錄制分類
- 在音視頻會議、在線教育等系統中，錄制是一個特別重要的功能
- 錄制一般分為服務端錄制和客戶端錄制
- **服務端錄制：**優點是不用擔心客戶因自身電腦問題造成錄制失敗（如磁盤空間不足），也不會因錄制時搶占資源（CPU 占用率過高）而導致其他應用出現問題等；缺點是實現的復雜度很高。
- **客戶端錄制：**優點是方便錄制方（如老師）操控，并且所錄制的視頻清晰度高，實現相對簡單。但是它對內存、硬盤的要求 比較高
- 它們各有優劣，因此大系統一般會同時支持客戶端錄制與服務端錄制。
二、錄制思考
- **第一：**錄制后音視頻流的存儲格式是什么呢？是直接錄制原始數據，還是錄制成某種多媒體格式（如 MP4 ）
- **第二：**錄制下來的音視頻流如何播放？是使用普通的播放器播放，還是使用私有播放器，如果你的業務是多人互動類型，且回放時也要和直播時一樣，那么你就必須使用私有播放器，因為普通播放器是不支持同時播放多路視頻的
- **第三：**啟動錄制后多久可以回放呢？錄制完立即回放？邊錄邊看？錄完后過一段時間可觀看？
- 錄制完立即回放當然體驗性最好，但是清晰度卻不行，在平時的直播中應該有所體驗；錄完一段時間再觀看，可以對視頻進行轉碼獲得更好的清晰度，但是對用戶的體驗卻不好，不能實時觀看。
三、錄制音視頻
- WebRTC 錄制音視頻流之后，最終是通過 Blob 對象將數據保存成多媒體文件的
- Blob（Binary Large Object）是 JavaScript 的大型二進制對象類型 var aBlob = new Blob(array, options);
- WebRTC 中提供了 MediaRecorder 類去錄制本地音視頻 var mediaRecorder = new MediaRecorder(stream[, options]);
- **stream：**通過 getUserMedia 獲取的本地視頻流或通過 RTCPeerConnection 獲取的遠程視頻流
- **options：**可選項，指定視頻格式、編解碼器、碼率等相關信息，如 mimeType: 'video/webm;codecs=vp8'
- MediaRecorder 對象還有一個特別重要的事件，即 ondataavailable 事件。當 MediaRecoder 捕獲到數據時就會觸發該事件。通過它，我們才能將音視頻數據錄制下來
html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>video of WebRTCtitle>
head><body><button onclick="startRecord()">Start Recordbutton>
body>
<script>var buffer;function startRecord() {buffer = [];// 設置錄制下來的多媒體格式var options = {mimeType: 'video/webm;codecs=vp8'}// 判斷瀏覽器是否支持錄制if (!MediaRecorder.isTypeSupported(options.mimeType)) {console.error(`${options.mimeType} is not supported!`);return;}try {// 創建錄制對象mediaRecorder = new MediaRecorder(window.stream, options);} catch (e) {console.error('Failed to create MediaRecorder:', e);return;}// 當有音視頻數據來了之后觸發該事件mediaRecorder.ondataavailable = handleDataAvailable;// 開始錄制// 在開啟錄制時，可以設置一個毫秒級的時間片，這樣錄制的媒體數據會按照你設置的// 值分割成一個個單獨的區塊，否則默認的方式是錄制一個非常大的整塊內容。// 分成一塊一塊的區塊會提高效率和可靠性，如果是一整塊數據，隨著時間的推移，數據塊越來越大// 讀寫效率就會變差，而且增加了寫入文件的失敗率mediaRecorder.start(10);}// 當該函數被觸發后，將數據壓入到 blob 中function handleDataAvailable(e) {if (e && e.data && e.data.size > 0) {buffer.push(e.data);}}
script>html>
四、回放錄制視頻
- 通過上面的方法錄制好內容 壓入到 blob 以后
- 首先根據 buffer 生成 Blob 對象
- 然后，根據 Blob 對象生成 URL，并通過 標簽將錄制的內容播放出來了
html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>video of WebRTCtitle>
head><body><video id="recvideo">video><button onclick="recplay()" disabled>Playbutton>
body>
<script>var buffer;function recplay() {var blob = new Blob(buffer, {type: 'video/webm'});recvideo.src = window.URL.createObjectURL(blob);recvideo.srcObject = null;recvideo.controls = true;recvideo.play();}
script>html>
五、下載錄制視頻
- 也是先創建一個 Blob 對象，并根據 Blob 對象創建 URL；
- 然后再創建一個 標簽，設置 a 標簽的 href 和 download 屬性
- 這樣當用戶點擊該標簽之后，錄制好的文件就下載下來了
html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>video of WebRTCtitle>
head><body><button onclick="download()" disabled>Downloadbutton>
body>
<script>var buffer;function download() {var blob = new Blob(buffer, {type: 'video/webm'});var url = window.URL.createObjectURL(blob);var a = document.createElement('a');a.href = url;a.style.display = 'none';a.download = '下載的視頻.webm';a.click();}
script>html>
總結
以上是生活随笔為你收集整理的3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
