视频分辨率设置

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

分辨率相关术语：

术语	分辨率
QVGA/VGA	320240/640480	QVGA 常见于带键盘的功能机上，VGA则使用在智能机初期的设备上。VGA相对于QVGA提供了更多的像素来展示更多的内容。
高清 720P	1280*720	表示水平方向 1280 个像素，垂直方向 720 个像素， 目前作为视频网站的标准高清分辨率，也就是只有达到 720P 才称得上高清视频。
超清 1080P	1920*1080	表示水平方向 1920 个像素，垂直方向 1080 个像素，常说的超清分辨率代指 1080P。
2K分辨率	水平方向 2000+像素	主流 2K 分辨率有 256014400、20481080，其他的 20481536、25601600 等分辨率也属于 2K 分辨率的一种。
4K 分辨率	水平方向约 4096 像素	多数 4K 指 40902160，其他衍生版本如 Full Aperture 4K 40963112、Academy 4K 36562664、UHDTV 38402160。
8K 分辨率	7680*4320 为 8K 标准	12 年国际电讯联盟通过 NHK 所建议的 7680*4320 解像度作为攻击 8K超高画质电视标准。

分辨率设置：

          在设置视频分辨率的时候需要注意要销毁掉已经存在的媒体流后重新使用新的约束的获取媒体流数据：

1. 我们可以将媒体流中的轨道属性遍历并以此调用 stop 函数来停止：

if (stream) {
  stream.value?.getTracks().forEach((track) => {
    track.stop();
  });
}

2. 依旧使用 getUserMedia 来得到媒体流：

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(inputStream)
  .catch((error) => {
    message.error(`获取用户媒体数据错误：${error.name}`);
  });

3. 通过设置 inputStream 输入流函数来封装渲染媒体流的部分：

const inputStream = (_stream: MediaStream) => {
  stream.value = _stream;
  video.value!.srcObject = stream.value;
  const track = stream.value.getVideoTracks()[0];
  console.log(JSON.stringify(track.getConstraints()));
};

4. 定义几个不同分辨率的选项：

// VGA
const vgaConstraints: MediaStreamConstraints = {
  video: {
    width: { exact: 640 },
    height: { exact: 480 },
  },
};
 
// 高清约束
const hdConstraints: MediaStreamConstraints = {
  video: {
    width: { exact: 1280 },
    height: { exact: 720 },
  },
};
 
// 超清约束
const fullHdConstraints: MediaStreamConstraints = {
  video: {
    width: { exact: 1920 },
    height: { exact: 1080 },
  },
};
 
// 下拉组件
<a-select
    v-model:value="resolution"
    style="width: 120px"
    @change="handleChange"
>
  <a-select-option value="vga">VGA约束</a-select-option>
  <a-select-option value="hd">高清约束</a-select-option>
  <a-select-option value="fullHd">超清约束</a-select-option>
</a-select>

5. 对接下拉组件事件和组件挂载事件：

const handleChange = (value: string) => {
  switch (value) {
    case "vga":
      getMedia(vgaConstraints);
      break;
    case "hd":
      getMedia(hdConstraints);
      break;
    case "fullHd":
      getMedia(fullHdConstraints);
      break;
  }
};
 
onMounted(() => {
  getMedia(hdConstraints);
});

当你切换到超清约束也就是 2 k 分辨率的时候可能会遇到下面的错误提示：

     这个错误提示是由于你的设备并不能支持这么高的分辨率，您需要进行设备的升级或降低分辨率来使用。

结语：

     上面的设置分辨率都需要先停止已经存在的媒体流数据，同样在视频轨道对象上提供了一个 applyConstraints 函数，允许我们可以在停止媒体流就可以动态切换约束条件来改变视频分辨率的方式，下次我们试一试，明天继续~