import OSS from 'ali-oss'
data() {
 return {
 name: '录视频',
 mediaRecorder: '', // mediarecorder对象
 recorderFile: '', // 视频blob文件
 stopRecordCallback: '',
 mediaStream: '', // 媒体流
 aliyunConfig: {
 region: '',
 accessKeyId: '',
 accessKeySecret: '',
 bucket: ''
      } // 阿里云参数
    }
  }
mounted: function() {
    this.getMedia()
 }
getMedia() {
      const that = this
      const videosContainer = this.$refs.videosContainer
      const video = document.createElement('video') // 创建video标签
      const videoWidth = 700 // 视频宽度
      const videoHeight = 450 // 视频高度
      let chunks = []
      let startTime = 0

      // controls自带控件 muted  false不静音
      video.controls = true
      video.muted = false
      video.width = videoWidth
      video.height = videoHeight
      that.getUserMedia(true, true, function(err, stream) {
        if (err) {
          alert('请检查设备后再试' + err)
          that.$router.push('/')
          console.log('录制失败', err)
        } else {
          console.log('录制开始')
          // 通过 MediaRecorder 记录获取到的媒体流
          that.mediaRecorder = new MediaRecorder(stream)
          // 媒体流
          that.mediaStream = stream
          // 播放媒体流 添加到div里面
          video.srcObject = stream
          video.play()
          videosContainer.appendChild(video)
          // 定义blobs
          that.mediaRecorder.blobs = []
          // 当MediaRecorder将媒体数据传送到您的应用程序以供使用时，将触发该事件。
          that.mediaRecorder.ondataavailable = function(e) {
            console.log('你是e是什么1', e)
            that.mediaRecorder.blobs.push(e.data)
            chunks.push(e.data)
          }
          // 捕获的媒体流结束事件
          that.mediaRecorder.onstop = function(e) {
            console.log('你是e是什么2', e)
            // 返回一个新创建的 Blob 对象
            that.recorderFile = new Blob(chunks, {
              type: that.mediaRecorder.mimeType
            })
            // 置空chunks
            chunks = []
            // sessionStorage.setItem('video_val', that.recorderFile)
            // 关闭媒体流
            // MediaUtils.closeStream(that.mediaStream)
          }
        }
      })
    }
    start() {
      let that = this
      that.mediaRecorder.start()
    },
    stop() {
      let that = this
      that.mediaRecorder.stop()
    },
    get_video() {
      let that = this
      
      // 在这里实现上传操作 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
      let reader = new FileReader()
      // 用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件
      reader.readAsArrayBuffer(that.recorderFile)
      // 获得arraybuffer对象
      reader.onload = function(VideoArrayBuffer) {
        // 实例化阿里云oss
        const client = new OSS(that.aliyunConfig)
        let buffer = new OSS.Buffer(VideoArrayBuffer.target.result)
        // 上传到阿里云
        client
          .put('a.mp4', buffer)
          .then(result => {
            if (result.url) {
              // 获得图片地址
              that.src = result.url
              console.log('阿里云上传成功', result.url)
            }
          })
          .catch(err => {
            console.log('阿里云上传失败', err)
            // alert('上传失败, 请重新上传')
          })
      }
    getUserMedia(videoEnable, audioEnable, callback) {
      /**
       * 获取用户媒体设备(处理兼容的问题)
       * @param videoEnable {boolean} - 是否启用摄像头
       * @param audioEnable {boolean} - 是否启用麦克风
       * @param callback {Function} - 处理回调
       */
      navigator.getUserMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia ||
        window.getUserMedia
      let callbacktype = false
      var constraints = { video: videoEnable, audio: audioEnable }
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            callback(callbacktype, stream)
          })
          ['catch'](function(err) {
            callback(err)
          })
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(
          constraints,
          function(stream) {
            callback(callbacktype, stream)
          },
          function(err) {
            callback(err)
          }
        )
      } else {
        callback(new Error('Not support userMedia'))
      }
    }
   closeStream(stream) {
      /**
       * 关闭媒体流
       * @param stream {that.MediaStream} - 需要关闭的流
       */
      if (typeof stream.stop === 'function') {
        stream.stop()
      } else {
        let trackList = [stream.getAudioTracks(), stream.getVideoTracks()]

        for (let i = 0; i < trackList.length; i++) {
          let tracks = trackList[i]
          if (tracks && tracks.length > 0) {
            for (let j = 0; j < tracks.length; j++) {
              let track = tracks[j]
              if (typeof track.stop === 'function') {
                track.stop()
              }
            }
          }
        }
      }
    }

搜索