爱学习IT200.cn
Search K

Appearance

TIP

分辨率相关术语

前言 ​

大家好，我是小鑫同学。一位从事过Android开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

分辨率相关术语： ​

术语分辨率
QVGA/VGA320240/640480QVGA 常见于带键盘的功能机上，VGA则使用在智能机初期的设备上。VGA相对于QVGA提供了更多的像素来展示更多的内容。
高清 720P1280*720表示水平方向 1280 个像素，垂直方向 720 个像素， 目前作为视频网站的标准高清分辨率，也就是只有达到 720P 才称得上高清视频。
超清 1080P1920*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();
  });
}
if (stream) {
  stream.value?.getTracks().forEach((track) => {
    track.stop();
  });
}
  1. 依旧使用 getUserMedia 来得到媒体流：
navigator.mediaDevices
  .getUserMedia(constraints)
  .then(inputStream)
  .catch((error) => {
    message.error(`获取用户媒体数据错误：${error.name}`);
  });
navigator.mediaDevices
  .getUserMedia(constraints)
  .then(inputStream)
  .catch((error) => {
    message.error(`获取用户媒体数据错误：${error.name}`);
  });
  1. 通过设置 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()));
};
const inputStream = (_stream: MediaStream) => {
  stream.value = _stream;
  video.value!.srcObject = stream.value;
  const track = stream.value.getVideoTracks()[0];
  console.log(JSON.stringify(track.getConstraints()));
};
  1. 定义几个不同分辨率的选项：
// 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>
// 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>
  1. 对接下拉组件事件和组件挂载事件：
const handleChange = (value: string) => {
  switch (value) {
    case "vga":
      getMedia(vgaConstraints);
      break;
    case "hd":
      getMedia(hdConstraints);
      break;
    case "fullHd":
      getMedia(fullHdConstraints);
      break;
  }
};

onMounted(() => {
  getMedia(hdConstraints);
});
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 函数，允许我们可以在停止媒体流就可以动态切换约束条件来改变视频分辨率的方式，下次我们试一试，明天继续~

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~

最后可以关注我@小鑫同学。欢迎点此扫码加我微信fe-xiaoxin交流，共同进步（还可以帮你fix🐛）~