调用摄像机播放画面，并且实现录制GIF动图预览和下载-阿里云开发者社区

调用摄像机播放画面，并且实现录制GIF动图预览和下载

2023-10-30 105

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 调用摄像机播放画面，并且实现录制GIF动图预览和下载

在线运行可以看这里

最近遇到个开发需求：在显示器显示监控摄像头的实时画面，要求可以录制GIF动图，然后现在它，这里只是个基本的先行demo

准备工作

本文主要是借助navigator.mediaDevices对象下的getUserMedia方法实现的，他会返回MediaStream数据流，将它接入video标签就可以展示实时监控的画面了。

不过如果你需要授予浏览器相机权限，尤其windows，仅仅在这个标签页授予权限是没有用的

定义`MediaStream`函数

import { useState, useEffect } from "react";
export const useMediaStream = (options: MediaStreamConstraints) => {
  const [mediaStream, setMediaStream] = useState<MediaStream>();
  const [error, setError] = useState<any>();
  useEffect(() => {
    navigator.mediaDevices
      .getUserMedia(
        options ?? {
          audio: false,
          video: { width: 600, height: 300 }
        }
      )
      .then(function (mediaStream) {
        setMediaStream(mediaStream);
      })
      .catch(function (err) {
        setError(err);
      });
  }, []);
  return {
    mediaStream,
    error
  };
};

接入`Video`中

我试过多种写法，这种是最稳妥的，如果你的video标签一直闪烁，那可能是一直被初始化导致的，这样写就可以避免这种问题。

export const App = () => {
  const [dom, setDom] = useState<HTMLVideoElement>();
  const { mediaStream } = useMediaStream({
    audio: false,
    video: {
      width: 1920,
      height: 1080
    }
  });
  // 初始化播放器
  useEffect(() => {
    if (!dom) return;
    dom.srcObject = mediaStream;
    dom.onloadeddata = function () {
      dom.play();
    };
  }, [mediaStream, dom]);
  // 初始化dom
  useEffect(() => {
    if (document.querySelector("video")) {
      setDom(document.querySelector("video"));
    }
  }, []);
  return <video width={400} height={300} />
}

实现播放和暂停

这是HTMLVideoElement的方法，直接调用就好了

return (
    <>
      <video poster={posterUrl} width={400} height={300} />
      <br />
      <button onClick={() => dom.pause()}>暂停</button>
      <button onClick={() => dom.play()}>播放</button>
     </>
)

此时如下

实现截图和预览截图功能

截图的功能是通过获取当前帧的数据，然后创建img，生成base64 URL。接着，展示它就可以预览了

  const [cuttImgRUL, setCurrentRUL] = useState<string>(posterUrl);
  // 获取当前帧画面的dataURL
  const getCurrenScreen = () => {
    const canvas = document.createElement("canvas");
    canvas.width = dom.videoWidth;
    canvas.height = dom.videoHeight;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(dom, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL("image/png");
    return dataURL;
  };
  // 设置当前帧
  const getPic = () => {
    setCurrentRUL(getCurrenScreen());
    return getCurrenScreen();
  };
  // 展示截图
  const showPic = () => {
    const dom = document.querySelector("img");
    if (!dom) return;
    dom.src = cuttImgRUL as string;
  };
  // 每当当前帧的地址发生变化就展示它
  useEffect(() => showPic(), [cuttImgRUL]);
  <button onClick={() => downPic()}>下载截图</button>
  <img width="500px" alt="img" />

实现下载截图

基础的下载操作，就不多说了。

  // 下载截图
  const downPic = () => {
    const a = document.createElement("a");
    a.href = getCurrenScreen();
    a.download = "img";
    a.click();
    a.remove();
  };
  <button onClick={() => downPic()}>下载截图</button>

下载如下

录制GIF

每过一段时间获取当前帧的数据，并创建成img对象，将它们的base64 URL缓存起来。

  / 录制标记
  const [flag, setFlag] = useState<boolean>(false);
  // GIF的缓存
  const [imgs, setImgs] = useState([]);
  // 录制GIF
  const getGif = () => {
    setFlag(true);
    setImgs([]);
    const id = setInterval(() => {
      const img = getPic();
      setImgs((curr) => [...curr, img]);
    }, 16.67);
    setTimeout(() => {
      setFlag(false);
      clearInterval(id);
    }, 5000);
  };
  <button onClick={() => getGif()}>{flag ? "录制中..." : "录制GIF"}</button>

预览GIF

将缓存的图片快照在图片容器中依次播放，所以这里是个障眼法

   // 预览GIF
  const preViewGif = () => {
    const newImage = document.querySelector("img");
    let idx = 0;
    const id = setInterval(() => {
      newImage.src = imgs[idx];
      idx++;
      if (idx === imgs.length - 1) clearInterval(id);
    }, 200);
  };
  <button onClick={() => preViewGif()}>预览GIF</button>

预览如下

下载GIF

下载GIF的原理是将多个png的图片放入Canvas里，然后在合并成Gif文件并下载，这里用到了工具库gifshot

  // 下载GIF
  const downGif = () => {
    const config = {
      fps: 10,
      width: 1920,
      height: 1080,
      images: imgs
    };
    gifshot.createGIF(config, function (obj) {
      if (!obj.error) {
        const url = obj.image;
        // 下载GIF
        const a = document.createElement("a");
        a.href = url;
        a.download = "img";
        a.click();
        a.remove();
      }
    });
  };
  <button onClick={() => downGif()}>下载GIF</button>

下面是下载的其中一个GIF

好了，这就是个简单的demo，比较简陋，希望能给大家一点思路。最后附上完整的代码

完整代码如下

import { useEffect, useState } from "react";
import { useMediaStream } from "./useMediaStream";
import gifshot from "gifshot";
const posterUrl =
  "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebdfb2583e3f4a33a72bc6ffd44b42f2~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?";
export default () => {
  const [dom, setDom] = useState<HTMLVideoElement>();
  // 录制标记
  const [flag, setFlag] = useState<boolean>(false);
  const [cuttImgRUL, setCurrentRUL] = useState<string>(posterUrl);
  // GIF的缓存
  const [imgs, setImgs] = useState([]);
  // 获取数据流
  const { mediaStream } = useMediaStream({
    audio: false,
    video: {
      width: 1920,
      height: 1080
    }
  });
  // 获取当前帧画面的dataURL
  const getCurrenScreen = () => {
    const canvas = document.createElement("canvas");
    canvas.width = dom.videoWidth;
    canvas.height = dom.videoHeight;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(dom, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL("image/png");
    return dataURL;
  };
  // 设置当前帧
  const getPic = () => {
    setCurrentRUL(getCurrenScreen());
    return getCurrenScreen();
  };
  // 下载截图
  const downPic = () => {
    const a = document.createElement("a");
    a.href = getCurrenScreen();
    a.download = "img";
    a.click();
    a.remove();
  };
  // 下载GIF
  const downGif = () => {
    const config = {
      fps: 10,
      width: 1920,
      height: 1080,
      images: imgs
    };
    gifshot.createGIF(config, function (obj) {
      if (!obj.error) {
        const url = obj.image;
        // 下载GIF
        const a = document.createElement("a");
        a.href = url;
        a.download = "img";
        a.click();
        a.remove();
      }
    });
  };
  // 展示截图
  const showPic = () => {
    const dom = document.querySelector("img");
    if (!dom) return;
    dom.src = cuttImgRUL as string;
  };
  // 录制GIF
  const getGif = () => {
    setFlag(true);
    setImgs([]);
    const id = setInterval(() => {
      const img = getPic();
      setImgs((curr) => [...curr, img]);
    }, 16.67);
    setTimeout(() => {
      setFlag(false);
      clearInterval(id);
    }, 5000);
  };
  // 预览GIF
  const preViewGif = () => {
    const newImage = document.querySelector("img");
    let idx = 0;
    const id = setInterval(() => {
      newImage.src = imgs[idx];
      idx++;
      if (idx === imgs.length - 1) clearInterval(id);
    }, 200);
  };
  // 初始化播放器
  useEffect(() => {
    if (!dom) return;
    dom.srcObject = mediaStream;
    dom.onloadeddata = function () {
      dom.play();
    };
  }, [mediaStream, dom]);
  // 初始化dom
  useEffect(() => {
    if (document.querySelector("video")) {
      setDom(document.querySelector("video"));
    }
  }, []);
  // 每当当前帧的地址发生变化就展示它
  useEffect(() => showPic(), [cuttImgRUL]);
  return (
    <>
      <video poster={posterUrl} width={400} height={300} />
      <br />
      <button onClick={() => dom.pause()}>暂停</button>
      <button onClick={() => dom.play()}>播放</button>
      <button onClick={() => getPic()}>截屏</button>
      <button onClick={() => downPic()}>下载截图</button>
      <button onClick={() => getGif()}>{flag ? "录制中..." : "录制GIF"}</button>
      {imgs.length && !flag ? (
        <>
          <button onClick={() => preViewGif()}>预览GIF</button>
          <button onClick={() => downGif()}>下载GIF</button>
        </>
      ) : (
        ""
      )}
      <br />
      <br />
      <img width="500px" alt="img" />
      <canvas width="500px" height="300px" />
    </>
  );
};

调用摄像机播放画面，并且实现录制GIF动图预览和下载

准备工作

定义`MediaStream`函数

接入`Video`中

实现播放和暂停

实现截图和预览截图功能

实现下载截图

录制GIF

预览GIF

下载GIF

完整代码如下

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

调用摄像机播放画面，并且实现录制GIF动图预览和下载

准备工作

定义MediaStream函数

接入Video中

实现播放和暂停

实现截图和预览截图功能

实现下载截图

录制GIF

预览GIF

下载GIF

完整代码如下

热门文章

最新文章

相关电子书

相关实验场景

定义`MediaStream`函数

接入`Video`中