0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频采集》

bosscheng
168 阅读2分钟

本课程主要从

  • 音视频采集
  • 音视频编码
  • 音视频协议封装传输
  • 音视频协议解封装
  • 音视频解码
  • 音视频播放

这几个模块进行讲解。

关于Jessibuca

关于JessibucaPro

第一章：音视频采集

主要介绍音频和视频在web端可以通过哪些途径采集到的。

音频采集

在web端音频采集通常可以有两种方式：麦克风和音频文件。

麦克风

通过麦克风来采集音频数据。

在web端，可以通过MediaDevices.getUserMedia() API 获取麦克风数据，来采集我们的音频数据。

window.navigator.mediaDevices.getUserMedia({
    audio: {
        latency: true,
        noiseSuppression: true,
        autoGainControl: true,
        echoCancellation: true,
        sampleRate: 48000,
        channelCount: 1
    },
    video: false
}).then((stream)=>{
    // 采集成功
})

麦克风采集音频数据的demo：collect-by-microphone

音频文件

在web端，可以通过 XMLHttpRequest去请求音频文件，然后通过AudioContext.decodeAudioData()API 进行解码获取到PCM Data 数据。

音频文件获取音频数据的demo：collect-by-file

视频采集

在web端视频采集可以通过：摄像头、视频文件、分享屏幕 三种方式采集到视频数据。

摄像头

在web端，可以通过MediaDevices.getUserMedia() API 获取摄像头数据，来采集我们的视频数据。

navigator.mediaDevices.getUserMedia({
    video: true
}).then(function(mediaStream) {
    const srcVideo = document.getElementById("srcVideo")
    srcVideo.srcObject = mediaStream;
    srcVideo.play()
})

摄像头获取视频数据的demo：collect-by-camera

视频文件

在web端中，可以通过canvas 采集到video的视频数据，然后通过captureStream() API 采集到视频数据。

视频文件获取视频数据的demo：collect-by-file

分享屏幕

在web端，可以通过MediaDevices.getDisplayMedia()API 获取屏幕数据，采集我们的视频数据。

navigator.mediaDevices.getDisplayMedia().then(function(displayMediaStream) {
    const srcVideo = document.getElementById("srcVideo")
    srcVideo.srcObject = displayMediaStream;
    srcVideo.play()
})

分享屏幕获取视频数据的demo：collect-by-windows

音视频采集

音频和视频可以采集到一个流里面。

麦克风+摄像头

主要是借助getUserMedia()来获取音频和视频，然后通过MediaStream的addTrack方法把音频和视频合并到一个流里面。

 navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
}).then(function (mediaStream) {
    const srcVideo = document.getElementById("srcVideo")
    srcVideo.srcObject = mediaStream;
    srcVideo.play()
})

demo: collect-by-camera-and-microphone

麦克风+桌面

主要是借助getUserMedia()来获取音频，然后通过getDisplayMedia()来获取视频，然后通过MediaStream的addTrack方法把音频和视频合并到一个流里面。

 navigator.mediaDevices.getUserMedia({
    audio: true
}).then(function (mediaStream) {
    const srcVideo = document.getElementById("srcVideo")
    navigator.mediaDevices.getDisplayMedia().then((displayMediaStream) => {
        displayMediaStream.addTrack(mediaStream.getAudioTracks()[0]);
        srcVideo.srcObject = displayMediaStream;
        srcVideo.play()
    })

})

demo:collect-by-windows-and-microphone

avatar
文章
阅读
粉丝