实时音视频

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

    音视频采集

    最近更新时间: 2022-07-14 15:45:05

    音视频 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 码率最低 100 kbps,最高 4000 kbps。

    麦克风音频 Track

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

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

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

    屏幕共享

    关于屏幕分享,见文档 屏幕分享

    外部音频数据 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 标签中提取的媒体流发布到七牛房间,或者通过 Web Audio API 构造自定义音频发布到七牛房间。

    例如,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);
    

    示例代码

    外部音频数据场景的示例代码可参考 API-Examples-Web/publishExternalAudio CustomTrack场景的示例代码可参考 API-Examples-Web/customTrack

    以上内容是否对您有帮助?
  • Qvm free helper
    Close