WebRTC音视频开发读书笔记（二）

于 2024-08-15 16:01:48 发布
阅读量563 收藏 4
点赞数 7
文章标签： webrtc 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch_s_t/article/details/141220073
版权

四、音视频设置

访问设备后，可以采集到音频或视频数据,对于视频,希望能控制分辨率,对于音频,希望能检测疸大小。另外,浏览器navigator.mediaDevices对象提供了用于设备媒体的方法，其相关API如表所示:

１、视频分辨率设置

（１）分辨率概述

视频分辨率是指视频所成图像内包含的像素数量．通常视频在同样大小的屏幕下，分辨率越高，所包含的像素就越多，视频画面就越细腻、越清晰。

常见分

                QVGA:　　３２０＊２４０

                VGA:              ６４０＊４８０

   高清７２０Ｐ：         １２８０＊７２０

超清１０８０Ｐ：         １９２０＊１０８０

                ２Ｋ：        ２５６０＊１４４０

                ４Ｋ：        ４０９６＊２１６０

                ８Ｋ：        ７６８０＊４３２０

（２）分辨率设置

在ＷebRTC中,分辨率的设置是通过获取视频时传递约束条件来控制,如下面所示,要设置成一个720P的分辨率,当调用getUserMedia()时会采用720P分辨率。

//高清约束条件
const hdconstraints={
     video :{ width: { exact: 1280 },height: { exact: 720} }
}

,下面通过示例简介分辨率设置,其主要步骤如下:

        (1)添加约束各分辨率的约束条件.

//QVGA320*240
const qvgaConstraints={video: { width: {exact: 320},height: {exact: 240}}}

        (2) 编写根据不同的约束条件获取视频流的方法,，在重新获取视频后, 需要把当前stream里的所有流都停止,流中通常有多个轨道,可以使用forEach将其所有轨道迭代并调用stop方法停止.，

 //根据约束获取视频
    getMedia=(constraints)=>{
        //判断流对象是否为空
        if(stream){
            stream.getTracks().forEach(function(track) {
                track.stop();
            });
        }
        //重新获取视频
        navigator.mediaDevices.getUserMedia(constraints)
        .then(this.gotStream)
        .catch(this.handleError)
    }

        (3) 获取媒体流后,将媒体流传递给video对象渲染 

 //得到视频处理
    gotStream=(mediaStream)=>{
        //使得浏览器能访问到stream
        window.stream=mediaStream;
        //将stream绑定到video标签
        video.srcObject=mediaStream;  
        const  track=mediaStream.getVideoTracks()[0];
        const  constraints=track.getConstraints();
        console.log('约束条件为：' +JSON.stringify(constraints) );   
    }

        (4)编写下拉列表回调方法,根据选中的项传递不同的约束.

 //下拉列表框中的选项改变
    handleChange=(value)=>{
        console.log(`Selected: ${value}`);
        switch(value){
            case 'qvga':
                this.getMedia(qvgaConstraints);
                break;
            case 'vga':
                this.getMedia(vgaConstraints);
                break;
            case 'hd':
                this.getMedia(hdConstraints);
                break;
            case 'fullhd':
                this.getMedia(fullHdConstraints);
                break;
            case '2k':
                this.getMedia(twoKConstraints);
                break;
            case '4k':
                this.getMedia(fourKConstraints);
                break;
            case '8k':
                this.getMedia(eightKConstraints);
                break;
            default:  
                break;
        }
    }

(5)动态改变分辨率.

 //动态改变分辨率
    dynamicChange=(e)=>{
        //获取视频流中的视频轨道
        const  track=window.stream.getVideoTracks()[0];
        //使用超清约束作为测试条件
        console.log('应用高清效果'+JSON.stringify(hdConstraints));
        track.applyConstraints(hdConstraints)
        .then(()=>{console.log('应用高清效果成功')})
        .catch((error)=>{console.log('应用高清效果失败'+error)})
    }

(6)在页面添加video标签,分辨率下拉列表框等界面元素.

完整代码如下所示:

import React,{ Component } from 'react'
import {Button,Select} from 'antd'
import '../public/styles.css'

const {Option}=Select;

//约束条件
//QVGA320*240
const qvgaConstraints={video: { width: {exact: 320},height: {exact: 240}}}
//VGA 640*480
const vgaConstraints={video: { width: {exact: 640},height: {exact: 480}}}
//HD 1280*720
const hdConstraints={video: { width: {exact: 1280},height: {exact: 720}}}
//FHD 1920*1080
const fullHdConstraints={video: { width: {exact: 1920},height: {exact: 1080}}}
//2K 2048*1080
const twoKConstraints={video: { width: {exact: 2048},height: {exact: 1080}}}
//4K 3840*2160
const fourKConstraints={video: { width: {exact: 3840},height: {exact: 2160}}}
//8K 7680*4320
const eightKConstraints={video: { width: {exact: 7680},height: {exact: 4320}}}

//视频流
let stream;
//视频对象
let video;

/**
 * 摄像头使用示例
 */
class Resolution extends Component {
    componentDidMount(){
        video=document.getElementById('video');
        navigator.mediaDevices.getUserMedia(vgaConstraints)
        .then(this.gotStream)
        .catch(this.handleError)
    }

    //根据约束获取视频
    getMedia=(constraints)=>{
        //判断流对象是否为空
        if(stream){
            stream.getTracks().forEach(function(track) {
                track.stop();
            });
        }
        //重新获取视频
        navigator.mediaDevices.getUserMedia(constraints)
        .then(this.gotStream)
        .catch(this.handleError)
    }
   
    //得到视频处理
    gotStream=(mediaStream)=>{
        //使得浏览器能访问到stream
        window.stream=mediaStream;
        //将stream绑定到video标签
        video.srcObject=mediaStream;  
        const  track=mediaStream.getVideoTracks()[0];
        const  constraints=track.getConstraints();
        console.log('约束条件为：' +JSON.stringify(constraints) );   
    }

    handleError=(error)=>{
       console.log('获取视频失败：' + error);      
    }

    //下拉列表框中的选项改变
    handleChange=(value)=>{
        console.log(`Selected: ${value}`);
        switch(value){
            case 'qvga':
                this.getMedia(qvgaConstraints);
                break;
            case 'vga':
                this.getMedia(vgaConstraints);
                break;
            case 'hd':
                this.getMedia(hdConstraints);
                break;
            case 'fullhd':
                this.getMedia(fullHdConstraints);
                break;
            case '2k':
                this.getMedia(twoKConstraints);
                break;
            case '4k':
                this.getMedia(fourKConstraints);
                break;
            case '8k':
                this.getMedia(eightKConstraints);
                break;
            default:  
                break;
        }
    }
    //动态改变分辨率
    dynamicChange=(e)=>{
        //获取视频流中的视频轨道
        const  track=window.stream.getVideoTracks()[0];
        //使用超清约束作为测试条件
        console.log('应用高清效果'+JSON.stringify(hdConstraints));
        track.applyConstraints(hdConstraints)
        .then(()=>{console.log('应用高清效果成功')})
        .catch((error)=>{console.log('应用高清效果失败'+error)})
    }

    render() {
        return (
            <div className='container'>
                <h1><span>视频分辨率示例</span></h1>
                <video  className='video'  id='video'  playsInline autoPlay></video>
                <Select
                    defaultValue='vga'
                    style={{ width: 120, marginLeft: 20 }}
                    onChange={this.handleChange}
                >
                    <Option value='qvga'>QVGA</Option>
                    <Option value='vga'>VGA</Option>
                    <Option value='hd'>高清</Option>
                    <Option value='fullhd'>超清</Option>
                    <Option value='2k'>2K</Option>
                    <Option value='4k'>4K</Option>
                    <Option value='8k'>8K</Option>
                </Select>
                <Button type="primary" onClick={this.dynamicChange} style={{marginLeft: 20}}>动态设置</Button>
            </div>
        )
    }
}

export default Resolution

２、其它设置

音频设置: 主要是使用HTML5有关音频处理的重要接口AudioContext，工作原理是将AudioContext创建出来的各种节点AudioNode相互连接,音频数据流经这些节点并作相应处理.。AudioContext可以控制它所包含的音频处理、解码操作的执行。示例代码如下:

//创建AudioContext用于管理和播放所有声音
window.AudioContext=window.AudioContext || window.webkitAudioContext
//实例化对象
window.audioContext=new AudioContext()

设备枚举: 使用MediaDevices的方法enumerateDevices()可请求一个输入和输出设备的列表,语法如下:

var enumeratorPromise=navigator.mediaDevices.enumerateDevices();

代码执行后返回一个Promise,当完成时,Promise接收一个MediaDeviceInfo对象数组,每个对象描述一个可用的媒体输入输出设备,如果枚举失败,Promise也会被拒绝。MediaDeviceInfo包含了设备的几个重要信息,如下所示:

        deviceId:  设备Id,唯一字符串区分不同的硬件设备.

        kind: 设备类型，视频输入设备videoinput，音频输入设备audioinput，音频输出设备audiooutput

        label: 设备名称

ch_s_t
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebRTC音视频开发读书笔记（一）
ch_s_t的专栏
08-15 655
其基本思路是借助一个公网IP服务器，双方都向公网IP服务器发送IP/PORT网络信息包，公网IP服务器向Peer-A发送Peer-B的IP/PORT网络信息包，并且向Peer-B发送Peer-A的网络信息包。通信双方要了解对方的网络情况，找到一条通信链路，需要做以下二个步骤，一是获取本地的外网地址映射，二 是通过信令服务器交换网络信息。信令主要用来转发会话双方的媒体信息和网络信息。信令服务器：公网IP服务器，转发彼此的媒体信息和网络信息，还可以有其它功能，如房间管理、用户列表、用户进入，用户退出等。
WebRTC 音视频同步分析
aggresss
01-09 2261
本文通过对 libwebrtc M96 中音频和视频同步的实现进行分析，进而讨论经过 SFU 转发后的音视频同步需要考量的因素。
Java线程池（二，webrtc音视频开发
m0_61418216的博客
09-05 415
private boolean addWorker(Runnable firstTask, boolean core) { retry: for (;???? { // 记录了线程池中运行的线程数量和线程的状态，高3位为状态，低29位为线程数 int c = ctl.get(); // 线程运行状态 int rs = runStateOf©; // Check if queue empty only if necessary. if (rs >= SHUTDOWN &&
音视频开发二：音视频知识总结
qq_38056514的博客
03-30 2101
音视频知识总结
webRTC（四）：Webrtc音视频数据采集&录制&采集屏面数据
2401_84092423的博客
04-20 1161
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
WebRTC音视频通话-WebRTC本地视频通话使用ossrs服务搭建
一名开发者
08-13 1937
iOS开发-ossrs服务WebRTC本地视频通话服务搭建之前开发中使用到了ossrs，这里记录一下ossrs支持的WebRTC本地服务搭建。
webrtc实时音视频即时通讯，个人心得
zhuqiang1997的博客
08-03 1199
webrtc
字节跳动测试开发1，webrtc音视频开发
m0_65638285的博客
12-23 307
微信发送图片的功能进行测试 设计抖音app用户登录测试 中断测试 测试在一个场景下，推荐滤镜 朋友圈点赞评论测试用例 情景问题 ==== 如果抖音一个地区的许多用户无法下载视频的原因 如果用户收到了银行短信提示已经扣款成功了，但是商家没有收到钱，你觉得会是什么问题 输入一个url，请问发生了什么? 如何实现一个用户登录功能 高并发下减少事务带来的性能消耗？ 如果一个API接口出现一个不稳定出现的bug，如何去确定？ 如果提交bug，开发告诉你不存在，如何处..
码牛-FFmpeg直播WebRtc音视频会议视频编辑音视频学习笔记
2301_80019215的博客
11-01 337
学习资料学习资料。
Webrtc源码开发笔记1 —Webrtc视频编码打包流程模块图解.zip
06-12
Webrtc源码开发笔记1 —Webrtc视频编码打包流程模块图解 梳理webrtc从transceiver到transport流程，从而宏观上了解webrtc视频采集，编码，打包发送等相关流程与相关模块的对应关系，为开发和快速定位问题提供参考。
音视频公开课WebRTC
04-26
这项技术的核心目标是简化音视频通信、数据共享和其他实时交互的网络应用开发，使得开发者能够轻松地在网页上集成高质量的音视频通话功能。 【WebRTC的起源与发展】 WebRTC起源于Google收购的两家公司——Global IP...
webrtc学习笔记一 （视频流）
04-23
这篇“webrtc学习笔记一”主要关注的是视频流处理，是WebRTC技术中的核心部分。在深入讨论之前，先了解一下WebRTC的基本架构和组成部分。 1. **基础概念**： - **Peer Connection**: 是WebRTC的核心组件，负责...
webrtc_momo环境搭建.pdf
12-01
基于github开源项目momo实现rtsp流经webrtc推送到web端(momo仅实现本地资源推送到web)，实测延时500ms左右，本资源为实现过程笔记
WebRTC学习笔记_Demo收集 .docx
10-30
WebRTC（Web Real-Time Communication）是一项开放的、免费的技术框架，旨在使Web浏览器能够在无需插件的情况下进行实时音视频通信。该技术最初由Google在2011年底引入Android系统中，尽管当时的尝试并不成功，如...
FreeSWITCH
qq_27890899的博客
08-13 832
FreeSWITCH学习记录，从部署到配置，从Java后端到H5前端，旨在实现一套企业级融合通信系统。
怎么将两首音乐合拼接在一起？音乐拼接的常见方法
ZCR20000的博客
08-12 969
接下来，给你的项目起一个易于识别的名称，并选择一个合适的保存位置，最后点击“创建”按钮，一个新的音乐项目就建立好了。再次点击“文件”（File）菜单，选择“导入”（Import）命令（注意，在某些版本的Audition中，“导入”可能直接位于“文件”菜单下，无需先选择“打开”）。这时，一个文件选择窗口将会弹出，允许你浏览你的电脑文件夹，寻找并挑选你想要合并的音频文件。在数字音乐制作的浩瀚宇宙中，将两首音乐巧妙地合并成一段无缝的混音，不仅是技术上的挑战，更是艺术灵感的碰撞与融合。
[rk3588]调试SC830AI摄像头（二）
m0_60805802的博客
08-12 49
成为嵌入式工作人员一定离不开调试过某款sensor，或者某些特定的功能芯片，很多soc平台为了降低自己芯片开发难度，都会出很多教程文档，新入行的开发者只需要跟着开发文档来操作就是了，大多数情况都是驱动已经写好了的，就配置一下dts即可。折腾三五天把摄像头点亮之后激动的不行。现在回头想想什么都不懂没什么好惊喜的，实际也就是那么回事，问题还是会有，我们要做的就是知道问题为什么出现怎么解决问题，自己心里对处理问题的思路越来越清晰就行。
《AI音频类工具之九——Stable Audio​ 》
最新发布
再见孙悟空的专栏
08-15 136
Stable Audio是一款由Stability AI开发的在线AI音乐制作工具，它利用先进的音频生成模型，为用户提供了一种全新的音乐创作方式。文本到音频生成：用户可以通过输入描述性的文本提示来生成音乐，例如“迪斯科”、“鼓机”、“合成器”等关键词。音乐风格多样：支持生成包括摇滚、爵士、电子、嘻哈、重金属、民谣、流行、朋克、乡村等多种风格的音乐。控制长度与内容：用户可以指定生成音乐的长度，并且可以对音乐的内容有一定的控制。快速生成：使用先进的模型，可以在极短的时间内生成立体声音频。版本选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值