前端实现视频录制功能

小小小少年_

已于 2024-11-07 15:55:44 修改

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 前端文章标签：前端音视频 javascript

于 2022-05-27 17:27:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49293345/article/details/125007001

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

javascript

14 篇文章

订阅专栏

一、功能代码

封装

// 请在以下环境调试使用媒体流功能：
// localhost域 ||  HTTPS协议域名 ||  file:///协议本地文件
// 其他情况，navigator.mediaDevices 的值或为 undefined。
// chrome调试参考 https://blog.youkuaiyun.com/weixin_49293345/article/details/112600213?spm=1001.2014.3001.5501

import fixWebmDuration from "webm-duration-fix";

declare global {
  interface Navigator {
    webkitGetUserMedia: any;
    mozGetUserMedia: any;
  }
}

class NewNavigator extends Navigator {
  mediaDevices: any;
}

export enum ErrorCode {
  INIT_ERROR = 100, // 初始化失败
  START_RECORD_ERROR = 101, // 开始录制错误
  STOP_RECORD_ERROR = 102, // 结束录制错误
}

export interface RecordConfig {
  front?: boolean; // 控制前后摄像头
  audio?: boolean; // 是否录制音频
  width?: number; // 获取一个最接近 width*height 的相机分辨率
  height?: number;
}

export interface ErrorData {
  code: ErrorCode;
  message: string;
}

export type ErrorCallback = (error: ErrorData) => void;

export interface GetUserMediaConfig {
  audio: boolean;
  video: {
    width?: { min?: number; ideal?: number; max?: number };
    height?: { min?: number; ideal?: number; max?: number };
    facingMode: "user" | { exact: "environment" };
  };
}

export type StopRecordCallback = (data: {
  videoBlob: Blob;
  imageUrl: string;
}) => void;

function createVideoEl(): HTMLVideoElement {
  const videoEl = document.createElement("video");
  videoEl.style.width = "100%";
  videoEl.style.height = "100%";
  videoEl.style.objectFit = "cover";
  videoEl.style.position = "absolute";
  videoEl.style.left = "0";
  videoEl.style.top = "0";
  videoEl.setAttribute("webkit-playsinline", "true");
  videoEl.setAttribute("x-webkit-airplay", "allow");
  videoEl.setAttribute("playsinline", "true");
  videoEl.setAttribute("x5-playsinline", "true");
  videoEl.setAttribute("x5-video-player-type", "h5");
  videoEl.setAttribute("x5-video-orientation", "h5");
  videoEl.setAttribute("x5-video-player-fullscreen", "true");
  return videoEl;
}

const navigator: NewNavigator = window.navigator;

// 初始化媒体流方法
(function initMediaDevices() {
  // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
  if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }
  // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
  // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
  if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function (
      constraints: GetUserMediaConfig
    ) {
      // 首先，如果有getUserMedia的话，就获得它
      const getUserMedia =
        navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

      // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
      if (!getUserMedia) {
        return Promise.reject(
          new Error("getUserMedia is not implemented in this browser")
        );
      }

      // 否则，为老的navigator.getUserMedia方法包裹一个Promise
      return new Promise(function (resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    };
  }
})();

let video_timer: any = null;
const debounce = (fun: () => void, time: number) => {
  if (video_timer) {
    clearTimeout(video_timer);
  }
  video_timer = setTimeout(() => {
    fun();
    video_timer = null;
  }, time);
};

class RecordJs {
  private readonly container: HTMLElement;
  private readonly videoEl: HTMLVideoElement;
  private recording: boolean; // 是否正在录制
  private mediaStream: MediaStream | null; // 记录媒体流
  private mediaRecorder: MediaRecorder | null; // 记录媒体录制流
  private recorderBlob: Blob; // 录制到的文件
  private imageUrl: string; // 截取到的图片
  private stopRecordCallback?: StopRecordCallback; // 录制完回调
  private errorCallback?: ErrorCallback; // 错误回调

  constructor(container: HTMLElement, errorCallback?: ErrorCallback) {
    this.container = container;
    this.recording = false;
    this.mediaStream = null;
    this.mediaRecorder = null;
    this.recorderBlob = new Blob();
    this.imageUrl = "";
    this.videoEl = createVideoEl();
    this.stopRecordCallback = undefined;
    this.errorCallback = errorCallback;
    this.container.style.position = "relative";
    this.container.appendChild(this.videoEl);
  }
  // 截取最后一帧显示
  public cropImage(): string {
    const canvas = document.createElement("canvas");
    canvas.width = this.container.clientWidth;
    canvas.height = this.container.clientHeight;
    canvas
      .getContext("2d")
      ?.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
    const dataUrl = canvas.toDataURL("image/png") || "";
    this.imageUrl = dataUrl;
    return dataUrl;
  }
  // 调用Api打开媒体流
  private async getUserMedia(recordConfig?: RecordConfig) {
    const { front = true, width, height, audio = false } = recordConfig || {};
    const constraints = {
      video: {
        facingMode: front ? "user" : { exact: "environment" },
        width: { ideal: width },
        height: { ideal: height },
      },
      audio,
    };

    try {
      // 先清除存在的媒体流
      this.closeRecord();
      const stream = await navigator.mediaDevices.getUserMedia(constraints);

      // 初始化媒体流文件录制 ---start
      let chunks: Blob[] = [];
      this.mediaStream = stream;
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (e: BlobEvent) => {
        chunks.push(e.data);
      };
      this.mediaRecorder.onstop = async () => {
        if (this.recording && this.stopRecordCallback) {
          const mimeType = this.mediaRecorder?.mimeType || "video/mp4";
          this.recorderBlob = new Blob(chunks, { type: mimeType });
          // 处理录制视频播放获取时长问题
          try {
            const fixBlob = await fixWebmDuration(this.recorderBlob);
            this.recorderBlob = fixBlob;
          } catch (error) {
            console.log(error);
          }
          try {
            this.stopRecordCallback({
              videoBlob: this.recorderBlob,
              imageUrl: this.imageUrl,
            });
          } catch (error) {
            console.log("录制完业务回调出错了：" + error);
          }
        }
        chunks = [];
        this.recording = false;
      };
      this.mediaRecorder.onerror = () => {};
      // 初始化媒体流文件录制 ---end

      // 初始化video播放内容 ---start
      const videoEl = this.videoEl;
      // 前置摄像头左右视觉效果对调
      videoEl.style.transform = front ? "rotateY(180deg)" : "";
      // 旧的浏览器可能没有srcObject
      if ("srcObject" in videoEl) {
        videoEl.srcObject = stream;
      } else {
        // 防止在新的浏览器里使用它，应为它已经不再支持了
        (videoEl as HTMLVideoElement).src = window.URL.createObjectURL(
          stream as any
        );
      }
      // 这里处理了一点关于ios video.play()播放NotAllowedError问题
      videoEl.onloadedmetadata = () => {
        const playPromise = videoEl.play();
        if (playPromise !== undefined) {
          playPromise
            .then(() => {
              videoEl.muted = true;
              setTimeout(() => {
                videoEl.play();
              }, 10);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      };
      // 初始化video播放内容 ---end
    } catch (error: any) {
      let message = error.message;
      if (error.name === "OverconstrainedError") {
        message = `The resolution ${constraints.video.width.ideal}x${constraints.video.height.ideal} px is not supported by your device.`;
      } else if (error.name === "NotAllowedError") {
        message =
          "You need to grant this page permission to access your camera and microphone.";
      } else if (error.name === "PermissionDeniedError") {
        message =
          "Permissions have not been granted to use your camera and " +
          "microphone, you need to allow the page access to your devices in " +
          "order for the demo to work.";
      } else {
        message = `getUserMedia error: ${error.name}`;
      }

      this.errorCallback &&
        this.errorCallback({
          code: ErrorCode.INIT_ERROR,
          message,
        });
      console.log(message, error);
    }
  }

  // 打开媒体流
  public openRecord(recordConfig?: RecordConfig) {
    // 打开媒体流方法为异步 防止频繁切换前后摄像头调用媒体流非正常显示问题
    debounce(() => this.getUserMedia(recordConfig), 300);
  }

  // 开始录制
  public startRecord(callback: () => void) {
    if (!this.recording && this.mediaRecorder) {
      try {
        this.mediaRecorder.start();
        this.recording = true;
        callback && callback()
      } catch (error) {
        this.errorCallback &&
          this.errorCallback({
            code: ErrorCode.START_RECORD_ERROR,
            message: "开始录制出错了！",
          });
        console.log("开始录制出错了：" + error);
      }
    }
  }

  // 停止录制
  public stopRecord(callback?: StopRecordCallback) {
    if (
      this.recording &&
      this.mediaRecorder &&
      this.mediaRecorder.state !== "inactive"
    ) {
      try {
        this.stopRecordCallback = callback;
        this.cropImage();
        // 终止录制器
        this.mediaRecorder.stop();
      } catch (error) {
        this.errorCallback &&
          this.errorCallback({
            code: ErrorCode.STOP_RECORD_ERROR,
            message: "结束录制出错了！",
          });
        console.log("结束录制出错了：" + error);
      }
    }
  }

  // 关闭媒体流
  public closeRecord() {
    if (this.mediaStream) {
      try {
        const tracks = this.mediaStream.getTracks();
        tracks.forEach((track) => {
          track.stop();
        });
        this.mediaStream = null;
        this.mediaRecorder = null;
        this.recording = false;
      } catch (error) {
        console.log("error:", error);
      }
    }
  }
}

export default RecordJs;

使用

import RecordJs from './RecordJs' // 引入 RecordJs 
const recordJs = new RecordJs(Dom元素, 错误回调函数) // 初始化 给定一个dom作为容器
recordJs.openRecord({ front: true }) // 开启前摄像头
recordJs.startRecord(); // 开始录制
recordJs.stopRecord((data)=>{
	// 传入结束录制回调
	// data对象返回视频blob和截取的最后一帧图片url
	// do something...
})

二、关于录制后播放问题

1.如何播放

recordJs.stopRecord((data)=>{
	// 传入结束录制回调
	// data对象返回视频blob和截取的最后一帧图片url
	// do something...
	const { videoBlob } = data;
	const videoFile = new File([videoBlob], 'filename.mp4', { type: 'video/mp4' });
	const videoUrl = URL.createObjectURL(videoFile)
	// 将 videoUrl 给到播放组件 video的src或者其他
	
	// 如果使用的是video.js第三方播放器播放，
	// videojs.src()调用时需指定type,
	videojs.src({ src: videoUrl, type: 'video/mp4' }) 
})