yanjinhui
7 天以前 b9c76ce85e533250cd36de670146530f970859e7
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
// deviceManager.js
let cachedVideoDevices = null;
 
export const getVideoDevices = async (forceRefresh = false) => {
  if (cachedVideoDevices && !forceRefresh) {
    return cachedVideoDevices;
  }
 
  try {
    if (!navigator.mediaDevices?.enumerateDevices) {
      throw new Error('MediaDevices API not supported');
    }
 
    const devices = await navigator.mediaDevices.enumerateDevices();
    cachedVideoDevices = devices
      .filter(device => device.kind === "videoinput")
      .map(device => ({
        label: device.label,
        id: device.deviceId,
        groupId: device.groupId // 添加更多有用信息
      }));
    
    return cachedVideoDevices;
  } catch (err) {
    console.error('Error enumerating devices:', err);
    throw err;
  }
};
 
// 监听设备变化
if (navigator.mediaDevices?.addEventListener) {
  navigator.mediaDevices.addEventListener('devicechange', () => {
    cachedVideoDevices = null; // 清除缓存
    // 可以在这里触发自定义事件或回调
  });
}
 
export const stopCamera = async(video) => {
  if(video == null) return;
  let stream = video.srcObject;
  if(stream==null) return;
  setTimeout(()=>{
    if (stream) {
      let tracks = stream.getTracks();
      tracks.forEach((x) => {
        x.stop();
      });
      video.srcObject = null;
    }
  },500);
};
 
export const stopStream = async(stream) => {
  if (stream) {
    let tracks = stream.getTracks();
    tracks.forEach((x) => {
      x.stop();
    });
  }
};
 
export const drawVideoToCanvas = (video,canvas) =>{
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
 
  // 绘制缩放后的视频帧
  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
 
export const clearCanvas = (canvas) => {
    if(canvas == null) {
        console.error("Canvas element is null");
        return;
    }
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
}
 
export const captureImageFromVideo = (video) => {
    // 创建一个画布元素,设置画布尺寸为视频流的尺寸
  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);
  // 将画布内容转为 Base64 数据
  const imageDataUrl = canvas.toDataURL("image/jpeg",0.8);
  return imageDataUrl;
}
 
export const captureBlobFromVideo = async (video) => {
    // 创建一个画布元素,设置画布尺寸为视频流的尺寸
  const canvas = document.createElement("canvas");
  // 设置画布大小与摄像大小一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // 获取画布上下文对象
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  // 绘制当前视频帧到画布上
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  const imageData = await new Promise(resolve => {
    canvas.toBlob(resolve, 'image/jpeg', 0.9);
  });
  return imageData;
}
 
export const createCanvasFromVideo = (video) => {
    // 创建一个画布元素,设置画布尺寸为视频流的尺寸
  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);
  return ctx;
}