RecordRTC的视频录制，回放，截图，下载
生活随笔
收集整理的這篇文章主要介紹了
RecordRTC的视频录制，回放，截图，下载
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
RecordRTC的視頻錄制及播放
recordRTC是前端的一個視頻錄制的工具，用于音頻+視頻+屏幕+畫布（2D+3D動畫）錄制的WebRTC JavaScript庫。
最下面會貼出所有相關代碼。
1.引入recordRTC
進入recordRTC的javascript庫 庫地址 選擇使用 recordRTC的引入方式。
2.寫好頁面的結構
<video id="myVideo" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"controlslist="nofullscreen" width="500" height="500"> </video> <canvas id="canvas"></canvas> <img id="img"></img> <video id="myVideo1" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"controlslist="nofullscreen" width="500" height="500"> </video> <button onclick="openRecord()">開啟錄制</button> <button onclick="play()">視頻播放</button> <button onclick="videoDown()">視頻下載</button> <button onclick="screenshot()">截圖</button>3.實時視頻播放
3.1開啟錄制首先拿到video的視頻流
通過 navigator.mediaDevices.getUserMedia()去拿到視頻流，想了解拿到視頻流的更詳細講解點這里
3.2獲取視頻流
獲取到視頻流之后拿到video的id,然后通過 srcObject實現視頻的錄制和實時播放,然后立馬開始播放視頻流。
4.開啟視頻錄制和關閉視頻錄制
5.播放視頻
6.視頻下載
7.視頻截圖
上面就是RecordRTC視頻錄制的播放，錄制，回放，截圖等功能 了解更多功能 可以參考官方文檔
下面回展示所有相關代碼 希望可以幫助你。
<!DOCTYPE html> <img 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>Document</title><script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script><!-- <script script src=" https://unpkg.com/@vueuse/shared "> </script><script src="https://unpkg.com/@vueuse/core"></script> --> </head> <video id="myVideo" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"controlslist="nofullscreen" width="500" height="500"> </video> <canvas id="canvas"></canvas> <img id="img"></img> <video id="myVideo1" playsinline controls preload="auto" playsinline autoplay poster controlslist="nodownload"controlslist="nofullscreen" width="500" height="500"> </video> <button onclick="openRecord()">開啟錄制</button> <button onclick="play()">視頻播放</button> <button onclick="videoDown()">視頻下載</button> <button onclick="screenshot()">截圖</button><body><script>/*string數據庫名稱,number版本號不傳默認為1*/// console.log(useUserMedia)var myVideo = document.getElementById('myVideo')var canvas = document.getElementById('canvas')var img = document.getElementById('img')let recorder = new Object();var videoStearm = new Object();function openRecord() {console.log(123)navigator.mediaDevices.getUserMedia({video: {width: 1280,height: 720,frameRate: 24},audio: true,elementClass: 'multi-streams-mixer'}).then(async function (stearm) {videoStearm = stearm//把流賦值給video 實現實時錄制myVideo.srcObject = stearm;console.log(myVideo.srcObject, 'srcobject')//立馬開始播放視頻流myVideo.play();recorder = RecordRTC(stearm, {type: 'video',//視頻類型mimeType: 'video/mp4',timeSlice: 1000,//該回調函數必須和上面的timeSlice分片時間配合使用ondataavailable: function (blob) {// blob為每一秒的視頻片段console.log(blob, '00000000')},// 獲取時間片段的時間戳onTimeStamp: function (timestamp) {console.log(timestamp)},bitsPerSecond: 128000,})console.log(stearm, '視頻流');//開啟錄制recorder.startRecording()const sleep = m => new Promise(r => setTimeout(r, m));await sleep(10000);//十秒后結束視頻錄制recorder.stopRecording(function (audioURL) {// window.open(audioURL)close()})}).catch((err) => { console.log('用戶未開啟視頻權限') })}//視頻下載function videoDown() {let blob = recorder.getBlob();console.log(blob, '0000000')//視頻下載 invokeSaveAsDialog（參數1為視頻流blob,參數2為視頻類型）invokeSaveAsDialog(blob, 'video.mp4');}//視頻播放function play() {let url = recorder.toURL();myVideo1.src = url}//關閉瀏覽器視頻音頻function close() {console.log(1234)console.log(videoStearm, '0000')console.log(videoStearm.getTracks(), '0000');videoStearm.getTracks()[0].stop()videoStearm.getTracks()[1].stop()}//截圖function screenshot() {//截屏錄制頁面的第一個截圖canvas.width = myVideo.widthcanvas.height = myVideo.heightcanvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height)let url = canvas.toDataURL('image/jpeg')console.log(url, '0909')}</script> </body></html>總結
以上是生活随笔為你收集整理的RecordRTC的视频录制，回放，截图，下载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿雁召开智能家居新品发布会，智能面板等多
- 下一篇： ios MultipeerConnect