音视频 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。

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

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

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

关于屏幕分享，见文档 屏幕分享。

除了可以使用媒体设备采集 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" });
}

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 可以分为 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