devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：木道寻08 | 2024-08-20 16:38:54

赞

踩

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

四、音视频设置

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

１、视频分辨率设置

（１）分辨率概述

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

常见分

                QVGA:　　３２０＊２４０

                VGA:              ６４０＊４８０

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

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

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

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

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

（２）分辨率设置

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

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

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

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

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

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

  1.  //根据约束获取视频
  2.     getMedia=(constraints)=>{
  3.         //判断流对象是否为空
  4.         if(stream){
  5.             stream.getTracks().forEach(function(track) {
  6.                 track.stop();
  7.             });
  8.         }
  9.         //重新获取视频
  10.         navigator.mediaDevices.getUserMedia(constraints)
  11.         .then(this.gotStream)
  12.         .catch(this.handleError)
  13.     }

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

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

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

  1.  //下拉列表框中的选项改变
  2.     handleChange=(value)=>{
  3.         console.log(`Selected: ${value}`);
  4.         switch(value){
  5.             case 'qvga':
  6.                 this.getMedia(qvgaConstraints);
  7.                 break;
  8.             case 'vga':
  9.                 this.getMedia(vgaConstraints);
  10.                 break;
  11.             case 'hd':
  12.                 this.getMedia(hdConstraints);
  13.                 break;
  14.             case 'fullhd':
  15.                 this.getMedia(fullHdConstraints);
  16.                 break;
  17.             case '2k':
  18.                 this.getMedia(twoKConstraints);
  19.                 break;
  20.             case '4k':
  21.                 this.getMedia(fourKConstraints);
  22.                 break;
  23.             case '8k':
  24.                 this.getMedia(eightKConstraints);
  25.                 break;
  26.             default:  
  27.                 break;
  28.         }
  29.     }

(5)动态改变分辨率.

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

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

完整代码如下所示:

  1. import React,{ Component } from 'react'
  2. import {Button,Select} from 'antd'
  3. import '../public/styles.css'
  4.  
  5. const {Option}=Select;
  6.  
  7. //约束条件
  8. //QVGA320*240
  9. const qvgaConstraints={video: { width: {exact: 320},height: {exact: 240}}}
  10. //VGA 640*480
  11. const vgaConstraints={video: { width: {exact: 640},height: {exact: 480}}}
  12. //HD 1280*720
  13. const hdConstraints={video: { width: {exact: 1280},height: {exact: 720}}}
  14. //FHD 1920*1080
  15. const fullHdConstraints={video: { width: {exact: 1920},height: {exact: 1080}}}
  16. //2K 2048*1080
  17. const twoKConstraints={video: { width: {exact: 2048},height: {exact: 1080}}}
  18. //4K 3840*2160
  19. const fourKConstraints={video: { width: {exact: 3840},height: {exact: 2160}}}
  20. //8K 7680*4320
  21. const eightKConstraints={video: { width: {exact: 7680},height: {exact: 4320}}}
  22.  
  23. //视频流
  24. let stream;
  25. //视频对象
  26. let video;
  27.  
  28. /**
  29.  * 摄像头使用示例
  30.  */
  31. class Resolution extends Component {
  32.     componentDidMount(){
  33.         video=document.getElementById('video');
  34.         navigator.mediaDevices.getUserMedia(vgaConstraints)
  35.         .then(this.gotStream)
  36.         .catch(this.handleError)
  37.     }
  38.  
  39.     //根据约束获取视频
  40.     getMedia=(constraints)=>{
  41.         //判断流对象是否为空
  42.         if(stream){
  43.             stream.getTracks().forEach(function(track) {
  44.                 track.stop();
  45.             });
  46.         }
  47.         //重新获取视频
  48.         navigator.mediaDevices.getUserMedia(constraints)
  49.         .then(this.gotStream)
  50.         .catch(this.handleError)
  51.     }
  52.    
  53.     //得到视频处理
  54.     gotStream=(mediaStream)=>{
  55.         //使得浏览器能访问到stream
  56.         window.stream=mediaStream;
  57.         //将stream绑定到video标签
  58.         video.srcObject=mediaStream;  
  59.         const  track=mediaStream.getVideoTracks()[0];
  60.         const  constraints=track.getConstraints();
  61.         console.log('约束条件为：' +JSON.stringify(constraints) );   
  62.     }
  63.  
  64.     handleError=(error)=>{
  65.        console.log('获取视频失败：' + error);      
  66.     }
  67.  
  68.     //下拉列表框中的选项改变
  69.     handleChange=(value)=>{
  70.         console.log(`Selected: ${value}`);
  71.         switch(value){
  72.             case 'qvga':
  73.                 this.getMedia(qvgaConstraints);
  74.                 break;
  75.             case 'vga':
  76.                 this.getMedia(vgaConstraints);
  77.                 break;
  78.             case 'hd':
  79.                 this.getMedia(hdConstraints);
  80.                 break;
  81.             case 'fullhd':
  82.                 this.getMedia(fullHdConstraints);
  83.                 break;
  84.             case '2k':
  85.                 this.getMedia(twoKConstraints);
  86.                 break;
  87.             case '4k':
  88.                 this.getMedia(fourKConstraints);
  89.                 break;
  90.             case '8k':
  91.                 this.getMedia(eightKConstraints);
  92.                 break;
  93.             default:  
  94.                 break;
  95.         }
  96.     }
  97.     //动态改变分辨率
  98.     dynamicChange=(e)=>{
  99.         //获取视频流中的视频轨道
  100.         const  track=window.stream.getVideoTracks()[0];
  101.         //使用超清约束作为测试条件
  102.         console.log('应用高清效果'+JSON.stringify(hdConstraints));
  103.         track.applyConstraints(hdConstraints)
  104.         .then(()=>{console.log('应用高清效果成功')})
  105.         .catch((error)=>{console.log('应用高清效果失败'+error)})
  106.     }
  107.  
  108.     render() {
  109.         return (
  110.             <div className='container'>
  111.                 <h1><span>视频分辨率示例</span></h1>
  112.                 <video  className='video'  id='video'  playsInline autoPlay></video>
  113.                 <Select
  114.                     defaultValue='vga'
  115.                     style={{ width: 120, marginLeft: 20 }}
  116.                     onChange={this.handleChange}
  117.                 >
  118.                     <Option value='qvga'>QVGA</Option>
  119.                     <Option value='vga'>VGA</Option>
  120.                     <Option value='hd'>高清</Option>
  121.                     <Option value='fullhd'>超清</Option>
  122.                     <Option value='2k'>2K</Option>
  123.                     <Option value='4k'>4K</Option>
  124.                     <Option value='8k'>8K</Option>
  125.                 </Select>
  126.                 <Button type="primary" onClick={this.dynamicChange} style={{marginLeft: 20}}>动态设置</Button>
  127.             </div>
  128.         )
  129.     }
  130. }
  131.  
  132. export default Resolution

２、其它设置

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

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

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

var enumeratorPromise=navigator.mediaDevices.enumerateDevices();

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

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

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

        label: 设备名称

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/1007933
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号