关于前端:如何实现前端录屏

38次阅读

共计 8053 个字符，预计需要花费 21 分钟才能阅读完成。

最近实现了基于 WebRTC 视频流实现录屏性能，实质还是间接应用原生的 MediaRecorder API。

对于 MediaRecorder 能够看看文档：MediaRecorder

<!–more–>

遇到的一些问题解决

webm 格局视频第一次播放无奈加载出进度条，只有播放完第二次才有进度条（视频时长）显示

Chrome 官网标记 Won’t Fix 了，对此猜想 Chrome 不认为这是 bug。视频长度这个如果没有在文件头部给出的话，就须要读取整个文件了，起因可能对较大 size 的视频加载不利

解决方案 ：

手动计算视频长度，调配给 blob。

应用 fix-webm-duration 库，用来补全 duration 字段，须要本人记录 duration，不是很精确，仍有误差，误差在 1s 多以内，但侵入性较低解决起来简略

webm 视频补全进度条后仍无奈主动聚焦后应用键盘左右键加加速

失常视频应用原生 video 标签的 focus 办法就能够应用键盘的左右键对视频加加速，但因为 webm 视频天生的不反对，即便赋了进度条仍然不行

解决方案 ：

通过 JS 设置 currentTime，间接把以后播放进度设到结尾，再把以后播放进度设到结尾，模仿播放实现的状况，就修复了键盘左右快进后退了 

// 修复 webm 视频键盘事件聚焦及播放速度管制

  useEffect(() => {

    const videoEle = document.querySelector('#video-homework-popup',) as HTMLVideoElement

    const duration = videoEle?.duration

    if (typeof duration === 'number' && !isNaN(duration)) {

      videoEle.currentTime = duration

 videoEle.currentTime = 0

    }

    videoEle?.focus()

    videoEle?.play()}, [homeworkVideoUrl])

抽离 useVideoRecorder

这里的录屏并不是调用电脑摄像头，也不是应用屏幕分享的 API，而是基于近程视频，应用 canvas 一直的对视频进行绘制，将 canvas 绘制的流传入到 MediaRecorder 办法外面。

以下精简了除了业务之外的代码，纯属实现前端录屏的代码，当然代码很多优化的空间，仅做参考：

import React, {useEffect, useRef} from 'react'
import throttle from 'lodash/throttle'
import ysFixWebmDuration from 'fix-webm-duration'

const TimeInterval = 16
const DefaultMaxRecordMinutes = 15 // 默认最大录制时长约 15 分钟
const WatermarkParams = {
  width: 118,
  height: 42,
  marginRight: 25,
  marginTop: 17,
}
enum BitsPerSecond {
  '360P' = 1000000,
  '480P' = 2500000,
  '720P' = 5000000,
  '1080P' = 8000000,
}

interface RecorderOptions {
  videoRef: React.MutableRefObject<HTMLVideoElement | null> // 视频 video 标签
  videoContainerRef: React.MutableRefObject<HTMLDivElement | null> // video 标签外层的 div
  watermark?: string
  maxRecordMinutes?: number // 视频最大录制时长（分）debug?: boolean
  getResolution: () => { width: number; height: number}
}

interface StartRecorderOptions {bitrate?: number}

type CanvasCaptureMediaStreamTrack = MediaStreamTrack & {requestFrame: () => void
}

// 录屏以后的状态
enum RecordingState {
  INACTIVE = 'inactive', // 没有进行录制，起因可能是录制没有开始或曾经进行
  PAUSED = 'paused', // 录制已开始，以后处于暂停状态
  RECORDING = 'recording', // 录制正在进行
}

const useVideoRecorder = ({
  videoRef,
  videoContainerRef,
  watermark,
  maxRecordMinutes = DefaultMaxRecordMinutes,
  debug,
  getResolution,
}: RecorderOptions) => {const recorder = useRef<MediaRecorder>()
  const recorderCanvas = useRef<HTMLCanvasElement>()
  const recorderChunks = useRef<Blob[]>([])
  const recorderStream = useRef<MediaStream | null>(null)
  const recorderVideoTrack = useRef<CanvasCaptureMediaStreamTrack>()
  const recorderContext = useRef<CanvasRenderingContext2D>()

  const watermarkImage = useRef<HTMLImageElement>()
  const cursorImage = useRef<HTMLImageElement>()
  const cursorContainer = useRef<HTMLDivElement>()
  const mousePosition = useRef<{x: number; y: number}>({x: 0, y: 0})

  const refreshTimer = useRef<number>()
  const refreshTicks = useRef<number>(0)
  // 录制最大时长计算
  const recordTimer = useRef<number>()
  const durationTicks = useRef<number>(0)
  // 录制时长计算
  const startRecordTime = useRef<number>(0)
  const durationTime = useRef<number>(0)

  const isRecording = useRef<boolean>(false)

  // 初始化创立 canvas
  useEffect(() => {recorderCanvas.current = document.createElement('canvas')
    const $recorderCanvas = recorderCanvas.current
    $recorderCanvas.setAttribute('style', 'display: none')
    $recorderCanvas.id = 'video-recorder-canvas'
    recorderContext.current = ($recorderCanvas.getContext('2d',) as unknown) as CanvasRenderingContext2D
    // debug canvas
    debug &&
      recorderCanvas.current.setAttribute(
        'style',
        'display: block; position: fixed; bottom: 0; left: 0; height: 350px; background: #fff; z-index: 10; border: 1px solid #fff',
      )

    document.body.appendChild(recorderCanvas.current)
    // 水印
    watermarkImage.current = document.createElement('img')
    watermark && watermarkImage.current.setAttribute('src', watermark)
    // 鼠标光标
    cursorImage.current = document.createElement('img')
    cursorContainer.current = document.createElement('div')
    cursorContainer.current.setAttribute(
      'style',
      'pointer-events: none; z-index: 100; display: inline-block; position: absolute;',
    )
    cursorContainer.current.appendChild(cursorImage.current)
  }, [])

  useEffect(() => {videoContainerRef.current?.addEventListener('mousemove', handleMousemove)

    return () => {
      videoContainerRef.current?.removeEventListener(
        'mousemove',
        handleMousemove,
      )
    }
  }, [])

  // 监听是否断网
  useEffect(() => {window.addEventListener('offline', resetVideoRecord)

    return () => {window.removeEventListener('offline', resetVideoRecord)
    }
  }, [])

  const handleMousemove = throttle((e: MouseEvent) => {
    mousePosition.current.x = e.offsetX
    mousePosition.current.y = e.offsetY
  }, 16)

  const onRefreshTimer = () => {
    refreshTicks.current++
    // 录屏
    if (
      isRecording.current &&
      refreshTicks.current % Math.round(64 / TimeInterval) === 0
    ) {recorderVideoTrack.current?.requestFrame()
      recorderDrawFrame()}
  }

  // 记录录屏时长
  const onRecordTimer = () => {
    durationTicks.current++
    if (durationTicks.current >= maxRecordMinutes * 60) {pauseRecord()
    }
  }

  const recorderDrawFrame = () => {
    const $recorderCanvas = recorderCanvas.current!
    const $player = videoRef.current!
    const ctx = recorderContext.current!
    const {width, height} = getResolution() // 获取视频实时宽高的办法
    $recorderCanvas.width = width // $player.videoWidth
    $recorderCanvas.height = height // $player.videoHeight

    ctx.drawImage(
      $player,
      0,
      0,
      $player.videoWidth,
      $player.videoHeight,
      0,
      0,
      $recorderCanvas.width,
      $recorderCanvas.height,
    )
    drawWatermark(ctx, width)
  }

  // 增加水印，图片水印需为 base64 格局
  const drawWatermark = (
    ctx: CanvasRenderingContext2D,
    canvasWidth: number,
  ) => {if (watermark) {
      ctx.drawImage(
        watermarkImage.current!,
        canvasWidth - WatermarkParams.width - WatermarkParams.marginRight,
        WatermarkParams.marginTop,
      )
    }
  }

  // 开始录屏
  const startRecord = (options: StartRecorderOptions = {}) => {
    if (
      recorder.current?.state === RecordingState.RECORDING ||
      recorder.current?.state === RecordingState.PAUSED
    ) {return}

    console.log('start record')
    recorderStream.current = recorderCanvas.current!.captureStream(0)
    recorderVideoTrack.current = recorderStream.current!.getVideoTracks()[0] as CanvasCaptureMediaStreamTrack
    const audioTrack = videoRef.current?.srcObject?.getAudioTracks()[0]
    if (audioTrack) {recorderStream.current!.addTrack(audioTrack) // 录入声音
    }

    if (!window.MediaRecorder) {return false}

    const mimeType = 'video/webm;codecs=vp8'
    recorder.current = new MediaRecorder(recorderStream.current, {
      mimeType,
      // 指定音频和视频的比特率
      bitsPerSecond: options.bitrate || BitsPerSecond['360P'],
    })
    isRecording.current = true
    refreshTimer.current = window.setInterval(onRefreshTimer, 16)
    recordTimer.current = window.setInterval(onRecordTimer, 1000)
    recorder.current.ondataavailable = handleRecordData // 进行录像当前的回调函数，返回一个存储 Blob 内容的录制数据
    recorder.current.start(10000) // 开始录制媒体
    startRecordTime.current = Date.now()}

  // 暂停录屏 - 实用于录屏超过录制最大时长
  const pauseRecord = () => {
    if (
      recorder.current &&
      recorder.current?.state === RecordingState.RECORDING
    ) {recorder.current.pause()
      isRecording.current = false
      clearInterval(recordTimer.current)
      clearInterval(refreshTimer.current)
      durationTime.current = Date.now() - startRecordTime.current}
  }

  // 进行录屏
  const stopRecord = () => {return new Promise((resolve, reject) => {
      if (
        recorder.current?.state === RecordingState.RECORDING ||
        recorder.current?.state === RecordingState.PAUSED
      ) {console.log('stop record')
        if (!window.MediaRecorder) {reject(new Error('Your Browser are not support MediaRecorder API'))
        }

        recorder.current?.stop()
        recorderVideoTrack.current!.stop()
        clearInterval(refreshTimer.current)
        clearInterval(recordTimer.current)
        isRecording.current = false
        recorder.current.onstop = () => {if (!durationTime.current) {durationTime.current = Date.now() - startRecordTime.current
          }

          // 修复 webm 视频录制无时长，赋值时长给 blob
          ysFixWebmDuration(new Blob(recorderChunks.current, { type: 'video/webm'}),
            durationTime.current,
            function (fixedBlob: Blob) {resolve(fixedBlob)
              recorderChunks.current = []
              durationTime.current = 0
            },
          )
        }
      } else {reject(new Error('Recorder is not started'))
      }
    })
  }

  const resetVideoRecord = () => {
    if (
      recorder.current?.state === RecordingState.RECORDING ||
      recorder.current?.state === RecordingState.PAUSED
    ) {recorder.current?.stop()
      recorderVideoTrack.current!.stop()
      recorder.current.onstop = () => {recorderChunks.current = []
        recorderStream.current = null
      }
    }
    isRecording.current = false
    clearInterval(refreshTimer.current)
    clearInterval(recordTimer.current)
  }

  // 解决录屏视频流数据
  const handleRecordData = (e: BlobEvent) => {if (e.data.size > 0 && recorderChunks.current) {recorderChunks.current.push(e.data)
    }
  }

  // 下载视频
  const download = (blob: Blob) => {if (recorder.current && blob.size > 0) {const name = new Date().getTime()
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      a.download = `${name}.webm`
      document.body.appendChild(a)
      a.click()}
  }

  return {
    startRecord,
    stopRecord,
    resetVideoRecord,
    download,
  }
}

export default useVideoRecorder

兼容性

如果要做前端录屏，须要思考兼容性的问题

MediaRecorder API

  • 对 Safari 低版本的兼容（次要思考到 Mac 微信浏览器）

Webm 格局

正文完
前端
发表至： 前端
2021-07-31
 0
关于前端:京东微前端框架MicroApp开源了🎉
关于前端:Fabricjs-橡皮擦的用法包含恢复功能
关于前端:前端是性能优化图文并茂通俗易懂
关于前端:页面加载性能之Web-Vitals