# 视频拍照下载

// 获取视频当前帧作为封面
const video = document.getElementById(element.userId) as HTMLVideoElement;
video.setAttribute('crossorigin', 'anonymous');
const canvas = document.createElement('canvas');
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
video.poster = canvas.toDataURL('image/jpeg');

1
2
3
4
5
6
7
8
9

// 下载当前视频帧
function downs(userd: string) {
  const video = document.getElementById(userd) as HTMLVideoElement;
  video.setAttribute('crossorigin', 'anonymous');
  const canvas = document.createElement('canvas');
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = canvas.toDataURL('image/png');
  link.setAttribute('download', 'aaa.png'); // 文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link); // 下载完成移除元素
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 示例全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      #myVideo {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <div class="video-info">
        <video id="myVideo" autoplay playsinline webkit-playsinline></video>
      </div>
      <button onclick="openMedia()">打开摄像头</button>
      <button onclick="takePhoto()">拍照</button>
    </div>
    <script>
      async function openMedia() {
        const localStream = await getMediaStream();
        const myVideo = document.getElementById('myVideo');
        myVideo.srcObject = localStream;
        setTimeout(() => {
          console.log(myVideo.videoWidth, myVideo.videoHeight);
        }, 1000);
      }
      /**
       * 创建媒体流
       * @param isDisplay 是否共享屏幕
       * @returns 视频流
       */
      function getMediaStream(isDisplay) {
        const setConstraints = {
          video: { width: 1280, height: 720 },
          audio: false,
        };
        if (isDisplay) {
          setConstraints.video = true;
        }
        const mediaStream = isDisplay
          ? navigator.mediaDevices.getDisplayMedia(setConstraints)
          : navigator.mediaDevices.getUserMedia(setConstraints);
        return mediaStream;
      }

      //竖向像素反转
      function imageS(sourceData, newData) {
        for (var i = 0, h = sourceData.height; i < h; i++) {
          for (var j = 0, w = sourceData.width; j < w; j++) {
            newData.data[i * w * 4 + j * 4 + 0] =
              sourceData.data[(h - i) * w * 4 + j * 4 + 0];
            newData.data[i * w * 4 + j * 4 + 1] =
              sourceData.data[(h - i) * w * 4 + j * 4 + 1];
            newData.data[i * w * 4 + j * 4 + 2] =
              sourceData.data[(h - i) * w * 4 + j * 4 + 2];
            newData.data[i * w * 4 + j * 4 + 3] =
              sourceData.data[(h - i) * w * 4 + j * 4 + 3];
          }
        }
        return newData;
      }

      //横向像素反转
      function imageH(sourceData, newData) {
        for (var i = 0, h = sourceData.height; i < h; i++) {
          for (j = 0, w = sourceData.width; j < w; j++) {
            newData.data[i * w * 4 + j * 4 + 0] =
              sourceData.data[i * w * 4 + (w - j) * 4 + 0];
            newData.data[i * w * 4 + j * 4 + 1] =
              sourceData.data[i * w * 4 + (w - j) * 4 + 1];
            newData.data[i * w * 4 + j * 4 + 2] =
              sourceData.data[i * w * 4 + (w - j) * 4 + 2];
            newData.data[i * w * 4 + j * 4 + 3] =
              sourceData.data[i * w * 4 + (w - j) * 4 + 3];
          }
        }
        return newData;
      }

      function takePhoto() {
        const video = document.getElementById('myVideo');
        video.setAttribute('crossorigin', 'anonymous');
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        var img1 = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var img2 = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // ctx.putImageData(imageS(img2, img1), 0, 0);  //上下翻转
        ctx.putImageData(imageH(img2, img1), 0, 0); //左右翻转

        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = canvas.toDataURL('image/png');
        link.setAttribute('download', '照片.png'); // 文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 下载完成移除元素
      }
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

← 视频参数设置