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

最新推荐文章于 2024-08-17 08:15:31 发布
最新推荐文章于 2024-08-17 08:15:31 发布
阅读量581 收藏 20
点赞数 23
分类专栏： WebRTC读书笔记 文章标签： webrtc 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch_s_t/article/details/141224605
版权

当采集音频或视频时，设备会源源不断地产生媒体数据，这些数据就是媒体流，从Canvas，桌面，摄像头捕获的流为视频流，从麦克风捕获的的流称为音频流，媒体流中混入的可能是多种数据 ，因此WebRTC又将其划分成多个轨道，每个轨道对应于具体的设备。

五、媒体流与轨道

本文涉及的API如表所示：

1、媒体流

通过MediaStream接口处理媒体流，一个流包含多个视频流轨道和音频轨道，有两种方法可以输出 媒体流，其一，可以将输出显示为视频或者音频元素; 其二，可以将输出发送到RTCPeerConection对象，然后将其发送到远程计算机。媒体流可以通过摄像头、麦克风、屏幕、画布、视频源、远端流等方式获取。下面简要介绍属性、事件、方法。

        （1）属性

                active: 流的活动状态，活动为true ,否则为false

                ended: 结束状态，结束为true,否则为false

               id:  唯一标识符

        （2）事件

              onactive: 当MediaStream对象变为活动状态时触发活动状态。

             onended: 当媒体流终止时触发此事件。

            oninactive: 当流变为非活动状态时，触发此事件。

           onremovetrack: 从它移除MediaStreamTrack 对象时触发此事件。

       （3）方法

              addTrack ：增加MediaStreamTrack

              clone: 使用新id 返回MediaStream对象的克隆。

              getAudioTracks: 获取音频轨道列表

               getTrackById :    通过id返回媒体流轨道。

         2、媒体轨道

                     MediaStreamTrack表示一段媒体源，是WebRTC的基本媒体单元，每一个轨道都有一个源与之关联。媒体流有两个输出渠道，一是video标签，二是通过RTCPeerConnection发送到远端。 

（1）属性

        enabled:  布尔值， 轨道有效性

       kind:  字符值，audio为音频，video为视频。

      muted： 布尔值 ：静音状态，true为静音。

      readyState: 布尔值，轨道当前状态。

           remote:  布尔值，数据通过RTCPeerConnection提供状态，true是远端传输数据。

（2） 事件

            started:  轨道开始事件

           ended:   l轨道结束事件

 （3） 方法 

           getConstraints : 获取轨道采用的约束条件。

          applyConstraints: 应用约束条件至轨道。        

     3、流与轨道API测试示例

此示例用于测试音视频轨道的获取和删除等方法，主要有以下步骤：

          （1）设置约束条件，启用音频和视频。

          （2）使用 getUserMedia访问设备并获取到MediaStream对象，然后添加操作流的方法，如下所示:

                获取音频轨道列表、根据id获取轨道列表、删除音频轨道、获取所有轨道、获取视频轨道列表、删除轨道列表。 

           （3）添加每个方法的测试按钮。

完整代码如下所示：

   

import React from "react";
import { Button } from "antd";

//MediaStream对象
let stream;
/**
 * 摄像头使用示例
 */
class MediaStreamAPI extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        this.openDevice();
    }

    //打开音视频设备
    openDevice = async () => {
        try {
            //根据约束条件获取媒体
            stream = await navigator.mediaDevices.getUserMedia({
                //启用音频
                audio: true,
                //启用视频
                video: true
            });
            let video = document.getElementById("myVideo");
            video.srcObject = stream;
        } catch (e) {
            console.log(`getUserMedia错误:` + error);
        }
    }

    //获取音频轨道列表
    btnGetAudioTracks = () => {
        console.log("getAudioTracks");
        //返回一个数据
        console.log(stream.getAudioTracks());
    }

    //根据Id获取音频轨道
    btnGetTrackById = () => {
        console.log("getTrackById");
        console.log(stream.getTrackById(stream.getAudioTracks()[0].id));
    }

    //删除音频轨道
    btnRemoveAudioTrack = () => {
        console.log("removeAudioTrack()");
        stream.removeTrack(stream.getAudioTracks()[0]);
    }

    //获取所有轨道,包括音频及视频
    btnGetTracks = () => {
        console.log("getTracks()");
        console.log(stream.getTracks());
    }

    //获取视频轨道列表
    btnGetVideoTracks = () => {
        console.log("getVideoTracks()");
        console.log(stream.getVideoTracks());
    }

    //删除视频轨道
    btnRemoveVideoTrack = () => {
        console.log("removeVideoTrack()");
        stream.removeTrack(stream.getVideoTracks()[0]);
    }

    render() {
        return (
            <div className="container">
                <h1>
                    <span>MediaStreamAPI测试</span>
                </h1>
                <video className="video" id="myVideo" autoPlay playsInline></video>
                <Button onClick={this.btnGetTracks} style={{width:'120px'}}>获取所有轨道</Button>
                <Button onClick={this.btnGetAudioTracks} style={{width:'120px'}}>获取音频轨道</Button>
                <Button onClick={this.btnGetTrackById} style={{width:'200px'}}>根据Id获取音频轨道</Button>
                <Button onClick={this.btnRemoveAudioTrack} style={{width:'120px'}}>删除音频轨道</Button>
                <Button onClick={this.btnGetVideoTracks} style={{width:'120px'}}>获取视频轨道</Button>
                <Button onClick={this.btnRemoveVideoTrack} style={{width:'120px'}}>删除视频轨道</Button>
            </div>
        );
    }
}
//导出组件
export default MediaStreamAPI;

六、媒体录制

 1、MediaRecorder

影像及声音保存在某些场景下是必要的，目的是便于日后回放，在W３Ｃ制定的标准中，ＭｅｄｉａＲｅｃｏｒｄｅｒ是控制媒体录制的ＡＰＩ，它给我们的网页赋予了录制音频和视频的能力，使得ｗｅｂ可以脱离服务器，客户端辅助，独立进行媒体的录制。

ＭｅｄｉａＲｅｃｏｒｄｅｒ的语法如下所示：

var mediaRecorder=new MediaRecorder(stream,options)

参数 ｓｔｒｅａｍ是媒体流数据源，可以从 ｇｅｔＵｓｅｒＭｅｄｉａ获取，也可以从＜ｖｉｄｅｏ＞、＜ａｕｄｉｏ＞、＜ｃａｎｖａｓ＞标签获取。

参数ｏｐｔｉｏｎｓ是限制选项，表示一个字典对象，包含下列属性：

        mineType:  指定录制的媒体类型，音频还是视频，编码方式。

        audioBitsPerSound: 指定音频的比特率

        videoBitsPerSound: 指定视频的比特率

        bitsPerSecond:  指定音频和视频比特率

注意: 默认视频比特率为:  2.5Mbps,   音频的比特率为自适应.

mineType指定录制容器的MIME类型,在应用中通过调用MediaRecorder.isTypeSuupported()检查浏览器是否支持此种mineType.   mineType的类型及说明如图所示:

mineType示例代码如下所示：

var options={mineType:  'video/webm;codecs=vp8'}

此代码表示：设置成webm格式视频，编码格式为vp8。

常用API如下所示：

       start  开始录制媒体

       stop： 停止录制媒体

      ondataavailable: 数据有效时触发此事件。

       onerror:   当有错误时触发此事件。

        2、录制音频示例

         此示例主要有以下步骤

       （1）定义状态和变量

       （2）获取音频数据

        （3）录制音频

         （4） 播放音频

完整示例代码如下所示:

import React from "react";
import { Button, } from "antd";


//录制对象
let mediaRecorder;
//录制数据
let recordedBlobs;
//音频播放对象
let audioPlayer;
/**
 * 录制音频示例
 */
class RecordAudio extends React.Component {
  constructor() {
    super();
    //初始操作状态
    this.state = {
      status: 'start',
    }
  }

  componentDidMount() {
    //获取音频播放器
    audioPlayer =document.getElementById('audioPlayer');
  }

  //点击打开麦克风按钮
  startClickHandler = async (e) => {
    try {
      //获取音频数据流
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      console.log('获取音频stream:', stream);
      //将stream与window.stream绑定
      window.stream = stream;

      //设置当前状态为startRecord
      this.setState({
        status: 'startRecord',
      });

    } catch (e) {
      //发生错误
      console.error('navigator.getUserMedia error:', e);
    }
  }

  //开始录制
  startRecordButtonClickHandler = (e) => {
    recordedBlobs = [];
    //媒体类型
    let options = { mineType: 'audio/ogg;' };
    try {
      //初始化MediaRecorder对象,传入音频流及媒体类型
      mediaRecorder = new MediaRecorder(window.stream, options);
    } catch (e) {
      console.error('MediaRecorder创建失败:', e);
      return;
    }

    //录制停止事件回调
    mediaRecorder.onstop = (event) => {
      console.log('Recorder stopped: ', event);
      console.log('Recorded Blobs: ', recordedBlobs);
    };
    //当数据有效时触发的事件,可以把数据存储到缓存区里
    mediaRecorder.ondataavailable = this.handleDataAvailable;
    //录制10秒
    mediaRecorder.start(10);
    console.log('MediaRecorder started', mediaRecorder);

    //设置当前状态为stopRecord
    this.setState({
      status: 'stopRecord',
    });
  }

  //停止录制
  stopRecordButtonClickHandler = (e) => {
    mediaRecorder.stop();
    //设置当前状态为play
    this.setState({
      status: 'play',
    });
  }

  //播放录制数据
  playButtonClickHandler = (e) => {
    //生成blob文件,类型为audio/ogg
    const blob = new Blob(recordedBlobs, { type: 'audio/ogg' });

    audioPlayer.src = null;
    //根据blob文件生成播放器的数据源
    audioPlayer.src = window.URL.createObjectURL(blob);
    //播放声音
    audioPlayer.play();
    //设置当前状态为download
    this.setState({
      status: 'download',
    });
  }

  //下载录制文件
  downloadButtonClickHandler = (e) => {
    //生成blob文件,类型为audio/ogg
    const blob = new Blob(recordedBlobs, { type: 'audio/ogg' });
    //URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL
    const url = window.URL.createObjectURL(blob);
    //创建a标签
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    //设置下载文件
    a.download = 'test.ogg';
    //将a标签添加至网页上去
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      document.body.removeChild(a);
      //URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL.
      window.URL.revokeObjectURL(url);
    }, 100);
    //设置当前状态为start
    this.setState({
      status: 'start',
    });
  }

  //录制数据回调事件
  handleDataAvailable = (event) => {
    console.log('handleDataAvailable', event);
    //判断是否有数据
    if (event.data && event.data.size > 0) {
      //将数据记录起来
      recordedBlobs.push(event.data);
    }
  }

  render() {

    return (
      <div className="container">
        <h1>
          <span>音频录制</span>
        </h1>

        {/* 音频播放器,播放录制音频 */}
        <audio id="audioPlayer" controls autoPlay></audio>

        <div>
          <Button
            className="button"
            onClick={this.startClickHandler}
            disabled={this.state.status != 'start'}>
            打开麦克风
            </Button>
          <Button
            className="button"
            disabled={this.state.status != 'startRecord'}
            onClick={this.startRecordButtonClickHandler}>
            开始录制
          </Button>
          <Button
            className="button"
            disabled={this.state.status != 'stopRecord'}
            onClick={this.stopRecordButtonClickHandler}>
            停止录制
          </Button>
          <Button
            className="button"
            disabled={this.state.status != 'play'}
            onClick={this.playButtonClickHandler}>
            播放
          </Button>
          <Button
            className="button"
            disabled={this.state.status != 'download'}
            onClick={this.downloadButtonClickHandler}>
            下载
            </Button>
        </div>
      </div>
    );
  }
}
//导出组件
export default RecordAudio;

3、其它媒体的录制

（1）视频的录制

获取媒体流的区别

//约束条件
    let constraints = {
      //开启音频
      audio: true,
      //设置视频分辨率为1280*720
      video: {
        width: 1280, height: 720
      }


 //获取音视频流
      const stream = await navigator.mediaDevices.getUserMedia(constraints);

播放器的区别

  {/* 视频预览 muted表示默认静音 */}
        <video className="small-video" id="videoPreview" playsInline autoPlay muted></video>
         {/* 视频回放 loop表示循环播放 */}
        <video className="small-video" id="videoPlayer" playsInline loop></video>

mineType区别

let options = { mimeType: 'video/webm;codecs=vp9' };
（2）录制屏幕

        获取媒体流的区别  

//调用getDisplayMedia方法,约束设置成{video:true}即可
      stream = await navigator.mediaDevices.getDisplayMedia({
        //设置屏幕分辨率
        video: {
          width: 2880, height: 1800
        }
      });

        播放器的区别

       

 {/* 捕获屏幕数据渲染 */}
        <video className="video" ref="myVideo" autoPlay playsInline></video>

        mineType区别

 //创建MediaRecorder对象,准备录制
      mediaRecorder = new MediaRecorder(window.stream, { mimeType: 'video/webm' });
（3）录制canvas

        获取媒体流的区别

stream = canvas.captureStream(10);

        播放器的区别

 {/* 画布Canvas容器 */}
                    <div className="small-canvas">
                        {/* Canvas不设置样式 */}
                        <canvas ref='canvas'></canvas>
                    </div>
                    <video className="small-video" ref='video' playsInline autoPlay></video>

        mineType区别

//创建MediaRecorder对象,准备录制
            mediaRecorder = new MediaRecorder(window.stream, { mimeType: 'video/webm' });

ch_s_t
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 Record
qq_27890899的博客
08-13 858
FreeSWITCH学习记录，从部署到配置，从Java后端到H5前端，旨在实现一套企业级融合通信系统。
《AI音频类工具之九——Stable Audio​ 》
再见孙悟空的专栏
08-15 217
Stable Audio是一款由Stability AI开发的在线AI音乐制作工具，它利用先进的音频生成模型，为用户提供了一种全新的音乐创作方式。文本到音频生成：用户可以通过输入描述性的文本提示来生成音乐，例如“迪斯科”、“鼓机”、“合成器”等关键词。音乐风格多样：支持生成包括摇滚、爵士、电子、嘻哈、重金属、民谣、流行、朋克、乡村等多种风格的音乐。控制长度与内容：用户可以指定生成音乐的长度，并且可以对音乐的内容有一定的控制。快速生成：使用先进的模型，可以在极短的时间内生成立体声音频。版本选择。
《AI视频类工具之十——​D-ID》
再见孙悟空的专栏
08-15 106
D-ID是一个人工智能生成的视频创建平台，可以轻松快速地从文本输入中创建高质量、高性价比和引人入胜的视频，背后的Al技术是由Stable Difusion和GPT.3提供支持，可以在没有任何技术知识的情况下输出100多种语言的视频。D-ID的实时人像功能可以从一张照片中创建视频，虚拟口播主持可以提供文本或音频。它的API在数万个视频上进行训练，以产生逼真的结果。智能合成技术D-ID能够智能合成人像和声音，并最终生成逼真的视频。用户只需上传一张人像图片和一段文字或语音，即可快速生成虚拟数字人视频。
Video视频抽帧和WebCodecs API视频抽帧介绍
那个西瓜有点甜
08-13 880
视频文件是一个容器，里面有很多不同的轨道信息。如：图像、声音、字幕等。而视频图像信息又是由一系列图片序列帧的集合。如10秒的视长，假设每秒30帧。那大概有300条图像数据。像下面通过mp4box可以一次性得到整个videoTrack的samples数据，再转换为EncoderVideoChunk,通过VideoDecoder解码，能够非常快抽帧。
通过Fiddler抓包保存网页上的视频（包括Bilibili、B站和其他视频站）亲测可用
程序人生的博客
08-15 1097
那么到现在为止，我们已经得到了需要的url了，接下来关掉播放页，免得等会拦截请求的时候拦到一堆不相干的包。m4s都改成mp4，音频的也改成mp4），接着需要安装一个叫ffmpeg的命令行工具，安装后在命令行执行（记得切换运行目录）：ffmpeg -i 第一个文件 -i 第二个文件 -vcodec copy -acodec copy 输出文件（文件均需要带扩展名）b站的视频和音频是分开储存的，并且分段传输，所以大概会看到好些个Content-Type为octet-stream和mp4的包，这边随便选取两个。
音视频相关知识
Liu___l的博客
08-16 228
PCM就是要把声音从模拟信号转换成数字信号的一种技术，他的原理简单地说就是利用一个固定的频率对模拟信号进行采样。
【Python快速入门和实践019】Python常用脚本-查看视频信息并压缩视频
2403_83044722的博客
08-16 303
这段代码用于查看视频帧率，帧数以及大小，并且是否需要按照设定参数压缩原始视频。
平安城市/雪亮工程现状及需求分析：EasyCVR视频汇聚平台助力雪亮工程项目建设
TSINGSEE青犀视频官方技术博客
08-14 1082
未来，随着5G、物联网、人工智能等技术的不断发展，EasyCVR平台将迎来更加广阔的发展空间，为城市安全防范提供更加全面、高效的技术支持。
蓝牙音视频远程控制协议(AVRCP) command跟response介绍
最新发布
朝气蓬勃
08-17 391
蓝牙视频教程(跟韦东山老师合作) 蓝牙音视频控制协议 AVRCP 命令介绍
Python爬虫——爬取某网站的视频
热门推荐
weixin_73504499的博客
08-11 2万+
爬取视频
Ai音频文件转文字工具 会议音频转文字 录音转文字提取工具 下载
bluesky199199的博客
08-16 213
工具基于Ai模型，进行语音音频转文字，进行文字提取，功能强大好用，识别准确率还不错。运行速度取决于音频文件的时长及电脑的性能，音频越长则需要的时间越长，耐心等待即可。下载地址(资源制作整理不易，下载使用需付费，不能接受请勿浪费时间下载)通过百度网盘分享的文件：windows系统Ai音频转文字工具.zip。Ai语音音频文字提取使用说明。
音视频概要
weixin_64272492的博客
08-13 930
while循环中一直使用的是!false,当变成true之后就会直接退出循环，也就是当用户按Ctrl+c之后，就会中止程序。
《AI视频类工具之七——​ 有言》
再见孙悟空的专栏
08-15 90
有言一站式AIGC视频创作平台有言（Youyan）是一个一站式的AIGC（人工智能生成内容）视频创作平台，它由魔珐科技提供，主要特点是可以让用户无需真人出镜就能制作高质量的3D视频内容。3D虚拟角色提供大量的高质量、超写实的3D虚拟人物角色供用户选择使用。文本到视频用户可以输入文本内容，平台基于这些文本自动生成相应的3D视频内容。视频创作流程访问官网：通过浏览器访问有言的官方网站。选择角色和场景：从平台提供的多种3D虚拟角色和场景中进行选择。输入文本：输入想要转化为视频的文本内容。生成视频。
《AI视频类工具之十六——​ Apple Motion》
再见孙悟空的专栏
08-16 76
是一个创新的A(原生3D创作平台，利用人工智能技术来简化和加速3D动画的制作过程。该平台提供了多种A!工具和服务，使得用户能够以简单高效的方式创作和编辑3D动画内容。旨在打造一个涵盖3D、视频、动画、游戏等的人工智能驱动的创意中心，成为一个激发创造力、促进共享、促进协作的平台。实时设计引擎：Motion采用实时设计引擎，允许用户即时查看工作效果，无需等待渲染，极大地提高了工作效率。专业素材资料库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值