记录h5使用navigator.mediaDevices.getUserMedia录制音视频

原创

已于 2024-12-13 10:16:15 修改

· 1.2k 阅读

20 ·

版权

文章标签：

#音视频 #js #javascript #前端 #vue

于 2024-12-13 10:08:51 首次发布

！！！要在https环境下才行！！！

let stream
   let mediaRecorder
   let startTime
   let recordSize = 0
   let recordedChunks = []

mounted() {
           this.init();
       },
       beforeDestroy() {
           recordedChunks = []
           if (stream) {
           stream.getTracks().forEach(function (track) {
           track.stop()
           })
           }
           this.$refs.recordRef.srcObject = null
       },

async init(){
               this.$nextTick(async () => {
               stream = await navigator.mediaDevices.getUserMedia({
               video: {
               // width:720,
               // height:1280,
               facingMode: 'user',
               },
                   // video:true,
               audio: true,
               })
               this.$refs.recordRef.srcObject = stream
               mediaRecorder = new MediaRecorder(stream)
               mediaRecorder.onstart = () => {
               recordedChunks = []
               recordSize = 0
               startTime = new Date().getTime()
               }

               mediaRecorder.ondataavailable = (event) =>