vue3实现浏览器屏幕录制

最新推荐文章于 2024-07-31 17:03:01 发布

QueenSpider

最新推荐文章于 2024-07-31 17:03:01 发布

阅读量420

点赞数 5

文章标签：前端 vue

本文链接：https://blog.csdn.net/QueenSpider/article/details/138972724

版权

let timer
const videoChunks = ref([])
const mediaRecorder = ref(null)
const recordingBtn = async () => {
  if (!navigator.mediaDevices.getUserMedia){
    console.log('浏览器不支持录制')
    return
  }
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
        const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=h264') ? 'video/webm;codecs=h264' : ''
        if (!mimeType) return
        mediaRecorder.value = new MediaRecorder(stream, { mimeType })
        mediaRecorder.value.addEventListener('dataavailable', (e) => {videoChunks.value.push(e.data)}) 
        mediaRecorder.value.addEventListener('stop', () => {
            blobToFileSave(videoChunks.value)
            mediaRecorder.value = null
            videoChunks.value.length = 0
        })
        // 暂停录制
        mediaRecorder.value.addEventListener('pause', () => {console.log('暂停录制')}) 
        // 恢复录制
        mediaRecorder.value.addEventListener('resume', () => {console.log('恢复录制')})
        // 录制错误
        mediaRecorder.value.addEventListener('error', (err) => {console.log(err)})
        // 开始录制
          mediaRecorder.value.start()
          if(timer) clearTimeout(timer)
            timer = setTimeout(() => {
               mediaRecorder.value.stop()
            }, 10000)
        console.log('开始录制?');
        var element = document.documentElement;
         //录制时开启全屏
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
    } catch (error) {console.log('选择和授权error', error)}
}
const blobToFileSave = async (blobData, type = 'video/mp4') => {
      console.log('======================');
    proxy.$modal.loading("视频上传中，请稍候...");
    const date = new Date()
    const upName = date.getTime()
    const nowTime = date.toLocaleString().replace(/\//g, '-')
    const params = useDictStore().upVedioData
    params.time = nowTime
    params.type = "0"
    const blob = new Blob(blobData, { type })
    //实现上传和下载都可以
    let formate = new FormData()
    formate.append('file',blob,'video.map4')
    formate.append('bucketName',upName)
    const res = await vedioUploadAPI(formate)
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    params.url = res.data
    const res1 = await vedioUploadIdAPI(params)
    if(res1.code == 200){
      ElMessage({ message:'上传成功',grouping: true,type: 'success'})
    }else{
      ElMessage.error('上传失败')
    }
    proxy.$modal.closeLoading()