实时音视频

  • 实时音视频 > 使用指南 > Web >音视频采集

    音视频采集

    最近更新时间:2021-11-15 14:06:35

    音视频 track 为音视频交互的基本单位。根据 track 功能不同,我们对 track 做了分类。下面来看典型场景下 track 的创建及采集等功能的使用。

    摄像头视频 Track

    可以通过 QNRTC.createCameraVideoTrack 来创建摄像头视频 QNCameraVideoTrack

    const mCameraVideoTrack = await QNRTC.createCameraVideoTrack({
        encoderConfig: {
            width: 640, // 画面宽度
            height: 360, // 画面高度
            frameRate: 20, // 视频帧率 
        },
        tag: "camera" // 自定义 tag
    });
    

    以上例子中,指定了摄像头 track 画面的宽为 640,高为 360,帧率为 20,更多的配置项可以参考 QNCameraVideoTrackConfig

    createCameraVideoTrack 可以重复调用,就算指定的配置选项完全相同,每次调用返回的 Track 也都是各自独立的。

    为了后续能够区分不同的 track,可以使用这里的参数 tag 来配置一个自定义字符串,可以将这个操作理解为给这个 track 起了一个名字。

    麦克风音频 Track

    可以通过 QNRTC.createMicrophoneAudioTrack 来创建麦克风音频 QNMicrophoneAudioTrack

    const mMicrophoneAudioTrack = await QNRTC.createMicrophoneAudioTrack({
        encoderConfig: {
            sampleRate: 16000, // 采样率
            stereo: true // 使用双声道
        }
    });
    

    上面的例子中,指定了麦克风音频 track 的采样率为 16000,并设置为双声道采集,更多配置可参考 QNMicrophoneAudioTrackConfig

    屏幕共享视频 Track

    可以通过 QNRTC.createScreenVideoTrack 来创建屏幕共享视频 QNScreenVideoTrack

    const mScreenVideoTrack = await QNRTC.createScreenVideoTrack({
        encoderConfig: {
            width: 1280, // 画面宽度
            height: 720, // 画面高度
            frameRate: 10, // 视频帧率
            bitrate: 1500 // 码率 
        },
        tag: "screenVideo"
    });
    

    可以看到,这里的配置项与创建摄像头视频 track 时很类似,但是也有一些屏幕共享独有的配置项,详细可以参考 QNScreenVideoTrackConfig

    系统音频 track

    如果想要采集的音频来源不是麦克风,而是系统音频,如浏览器某个标签页中正在播放的音频,这时可以在采集屏幕共享 track 的方法 QNRTC.createScreenVideoTrack 中指定 withAudio 参数来采集系统音频 track。该 track 对象类型为 QNLocalAudioTrack

    const [mScreenVideoTrack, mScreenAudioTrack] = await QNRTC.createScreenVideoTrack({
        encoderConfig: {
            width: 1280, // 画面宽度
            height: 720, // 画面高度
            frameRate: 10, // 视频帧率
            bitrate: 1500 // 码率 
        },
        screenVideoTag: "screenVideo",
        screenAudioTag: "screenAudio"
      },
      "enable"
    );
    

    这里需要注意几点:

    • 分别通过 screenVideoTagscreenAudioTag 来设置屏幕分享视频和系统音频的 tag
    • 通过第二个参数 withAudio 设置为 enable 来指定采集系统音频
    • 指定采集系统音频后,方法返回值变为拥有两个元素的数组,第一个元素为屏幕分享视频 track,第二个元素为系统音频 track

    当调用该方法后,浏览器会弹出原生 UI,需要用户单独选择 分享音频 才能实际采集到系统声音。浏览器原生 UI 如下图所示:

    屏幕分享分享音频截图

    根据用户是否做了单独选择的操作,有不同的处理策略,详细可参考 withAudio 参数文档。

    外部音频数据 track

    除了可以使用媒体设备采集 track 外,还可以直接基于音频文件数据来创建 track。具体来说,通过 QNRTC.createBufferSourceAudioTrack 方法来创建外部音频 QNBufferSourceAudioTrack

    举例来说,首先在 html 页面中创建文件上传标签。

    <input type="file" accept=".mp3, .ogg" id="local-audio-file" />
    

    然后绑定回调函数,获取外部音频文件数据。

    const localAudioFileInput = document.getElementById("local-audio-file");
    localAudioFileInput.onchange = async (e) => {
        const file = e.target.files ? e.target.files[0] : undefined;
        if (!file) return;
        const mBuffeSourceAudioTrack = await QNRTC.createBufferSourceAudioTrack({ source: file, tag: "bufferSourceAudio" });
    }
    

    画布 track

    SDK 还支持通过 QNRTC.createCanvasVideoTrack 方法创建一个 QNCanvasVideoTrack,可以向画布中画入自定义图片。

    例如,下面创建一个画布 track,并在指定的位置画入了两张图片。

    const track = await QNRTC.createCanvasVideoTrack({
        width: 300, // 画布宽
        height: 240, // 画布高
        sources: [
            {
                source: "http://pili-playback.qnsdk.com/ivs_background_1280x720.png",
                x: 0, // 图片所处画布的左上角坐标 x
                y: 0, // 图片所处画布的左上角坐标 y
                width: 100, // 图片占据的宽度
                height: 100 // 图片占据的高度
            },
            {
                source: "http://pili-playback.qnsdk.com/ivs_background_1280x720.png",
                x: 100,
                y: 100,
                width: 100,
                height: 100
            }
        ],
        tag: "canvas-track"
    });
    

    CustomTrack

    CustomTrack 可以分为 CustomAudioTrack 和 CustomVideoTrack。可以使用 QNRTC.createCustomAudioTrack 来创建一个 QNCustomAudioTrack,或者 QNRTC.createCustomVideoTrack 方法来创建 QNCustomVideoTrack

    CustomTrack 的典型使用场景是,将从 video 标签或者 canvas 标签中提取的媒体流发布到七牛房间。

    例如,html 页面中存在一个 video 标签如下。

    <video crossorigin="anonymous" id="m-video" src="https://docs.qnsdk.com/big_buck_bunny_720p_surround.mp4"></video>
    
    <button id="play-btn">play</button>
    

    下面通过 captureStream 提取到媒体流,然后可将其作为媒体源,创建七牛 track。

    const mVideo = document.getElementById("m-video");
    const playBtn = document.getElementById("play-btn");
    
    playBtn.onclick = async () => {
        mVideo.play();
    
        const mediaStream = mVideo.captureStream();
        const mediaTracks = mediaStream.getTracks();
    
        for (const mediaTrack of mediaTracks) {
            switch (mediaTrack.kind) {
                case "audio":
                    const mCustomAudioTrack = await QNRTC.createCustomAudioTrack({ mediaStreamTrack: mediaTrack, bitrate: 64, tag: "customAudio" });
                    break;
                case "video":
                    const mCustomVideoTrack = await QNRTC.createCustomVideoTrack({ mediaStreamTrack: mediaTrack, bitrate: 2000, tag: "customVideo" });
                    break;
            }
        }
    }
    

    本地预览

    当 track 创建完成之后,下面来看如何播放 track。

    首先需要在 html 页面中准备一个容器标签,后续播放时会在该容器下创建播放元素。

    <div id="container"></div>
    

    各种类型的 track 都有一个共同的父类 QNTrack,可以调用该父类上的 play 方法来完成播放。

    const container = document.getElementById("container");
    mCameraVideoTrack.play(container);
    
    以上内容是否对您有帮助?
  • Qvm free helper
    Close