视频分辨率设置
设置 视频 分辨率
2023-06-13 09:16:12 时间
分辨率相关术语:
术语 | 分辨率 | |
---|---|---|
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超高画质电视标准。 |
分辨率设置:
在设置视频分辨率的时候需要注意要销毁掉已经存在的媒体流后重新使用新的约束的获取媒体流数据:
- 我们可以将媒体流中的轨道属性遍历并以此调用 stop 函数来停止:
if (stream) {
stream.value?.getTracks().forEach((track) => {
track.stop();
});
}
- 依旧使用 getUserMedia 来得到媒体流:
navigator.mediaDevices
.getUserMedia(constraints)
.then(inputStream)
.catch((error) => {
message.error(`获取用户媒体数据错误:${error.name}`);
});
- 通过设置 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()));
};
- 定义几个不同分辨率的选项:
// 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>
- 对接下拉组件事件和组件挂载事件:
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 函数,允许我们可以在停止媒体流就可以动态切换约束条件来改变视频分辨率的方式,下次我们试一试,明天继续~
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- anaconda pycharm设置编译器_anaconda pycharm环境配置
- 如何添加smtp服务器_smtp服务器设置
- java应用被阻止_怎样解决运行java提示应用程序已安全设置被阻止[通俗易懂]
- sed替换最后一个匹配_ppt占位符设置
- vue分页的设置_vue视频切换过渡
- Vue之设置视频为背景图
- 【Groovy】xml 序列化 ( 使用 MarkupBuilder 生成 xml 数据 | 设置 xml 标签内容 | 设置 xml 标签属性 )
- 【短视频运营】短视频剪辑 ⑤ ( 视频素材使用 | 设置插入后的视频素材属性 | 设置画面 | 设置音频 | 设置变速 | 设置动画 | 设置调节 )
- 【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
- redis中key的设置方法步骤
- 提升Redis安全性:主从设置密码方法(redis主从设置密码)
- Linux推迟任务的简单方式:设置延时命令(linux延时命令)
- Hibernate cache.region_prefix属性:设置二级缓存的前缀名称
- 如何快速设置Oracle系统的端口(oracle端口设置)
- 解锁Mysql数据库隔离级别之门(mysql设置隔离级别)
- 从零开始:使用MySQL连接池设置(mysql连接池设置)
- Linux设置密码:保护您的系统安全(linux设密码)
- Linux热点:快速简便的设置方法(linux热点设置)
- 保护您的MySQL数据库不要轻易地设置空密码(mysql 不要密码)
- MySQL非空值约束的设置方法(mysql不能为空值)
- Redis视频如何配置正确(redis视频怎么设置)
- 微信已支持把视频设置为朋友圈封面以及“边写边译”功能
- C++设置超时时间的简单实现方法
- Ubuntu设置开放MySQL服务远程访问教程