human: 如何处理七牛云的实时音视频音视频采集

gpt: [实时音视频](https://developer.qiniu.com/rtc) > 使用指南 > Web >音视频采集

#  音视频采集

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

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

# 摄像头视频 Track

可以通过
[QNRTC.createCameraVideoTrack](https://developer.qiniu.com/rtc/9070/WebQNRTC#createCameraVideoTrack)
来创建摄像头视频
[QNCameraVideoTrack](https://developer.qiniu.com/rtc/api/9068/WebQNCameraVideoTrack)。

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

以上例子中，指定了摄像头 track 画面的宽为 `640`，高为 `360`，帧率为 `20`，更多的配置项可以参考
[QNCameraVideoTrackConfig](https://developer.qiniu.com/rtc/9077/WebQNCameraVideoTrackConfig)。

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

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

> 视频 Track 码率最低 100 kbps，最高 4000 kbps。

# 麦克风音频 Track

可以通过
[QNRTC.createMicrophoneAudioTrack](https://developer.qiniu.com/rtc/9070/WebQNRTC#createMicrophoneAudioTrack)
来创建麦克风音频
[QNMicrophoneAudioTrack](https://developer.qiniu.com/rtc/api/9064/WebQNMicrophoneAudioTrack)。

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

上面的例子中，指定了麦克风音频 track 的采样率为 `16000`，并设置为双声道采集，更多配置可参考
[QNMicrophoneAudioTrackConfig](https://developer.qiniu.com/rtc/9055/WebQNMicrophoneAudioTrackConfig)。

# 屏幕共享

关于屏幕分享，见文档 [屏幕分享](https://developer.qiniu.com/rtc/10785/web-screen-sharing)。

# 外部音频数据 track

除了可以使用媒体设备采集 track 外，还可以直接基于音频文件数据来创建 track。具体来说，通过
[QNRTC.createBufferSourceAudioTrack](https://developer.qiniu.com/rtc/9070/WebQNRTC#createBufferSourceAudioTrack)
方法来创建外部音频
[QNBufferSourceAudioTrack](https://developer.qiniu.com/rtc/api/9069/WebQNBufferSourceAudioTrack)。

举例来说，首先在 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](https://developer.qiniu.com/rtc/9070/WebQNRTC#createCanvasVideoTrack)
方法创建一个
[QNCanvasVideoTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack)，可以向画布中画入自定义图片。

例如，下面创建一个画布 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](https://developer.qiniu.com/rtc/9070/WebQNRTC#createCustomAudioTrack)
来创建一个
[QNCustomAudioTrack](https://developer.qiniu.com/rtc/9091/WebQNCustomAudioTrack)，或者
[QNRTC.createCustomVideoTrack](https://developer.qiniu.com/rtc/9070/WebQNRTC#createCustomVideoTrack)
方法来创建
[QNCustomVideoTrack](https://developer.qiniu.com/rtc/9088/WebQNCustomVideoTrack)。

CustomTrack 的典型使用场景是，将从 video 标签或者 canvas 标签中提取的媒体流发布到七牛房间，或者通过 [Web Audio
API](https://developer.mozilla.org/zh-CN/docs/Web/API/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](https://developer.mozilla.org/en-
US/docs/Web/API/HTMLMediaElement/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](https://developer.qiniu.com/rtc/9076/WebQNTrack)，可以调用该父类上的
[play](https://developer.qiniu.com/rtc/9076/WebQNTrack#play) 方法来完成播放。

    
    
    const container = document.getElementById("container");
    mCameraVideoTrack.play(container);
    

# 示例代码

外部音频数据场景的示例代码可参考 [API-Examples-
Web/publishExternalAudio](https://github.com/pili-engineering/QNRTC-
Web/tree/master/API-Examples-Web/publishExternalAudio) CustomTrack场景的示例代码可参考
[API-Examples-Web/customTrack](https://github.com/pili-engineering/QNRTC-
Web/tree/master/API-Examples-Web/customTrack)

以上内容是否对您有帮助？