结合 WebRTC 的推流

<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.0.0.min.js" charset="utf-8"></script>

const { ArSdk } = window.AR;

/** ----- 鉴权配置 ----- */

/**
 * 腾讯云账号 APPID
 * 
 * 进入[腾讯云账号中心](https://console.tencentcloud.com/developer) 即可查看 APPID
 */
const APPID = ''; // 此处请填写您自己的参数

/**
 * Web LicenseKey
 * 
 * 登录音视频终端 SDK 控制台的[Web License 管理](https://console.tencentcloud.com/vcube/web)，创建项目即可获得 LicenseKey
 */
const LICENSE_KEY = ''; // 此处请填写您自己的参数

/**
 * 计算签名用的密钥 Token
 * 
 * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考
 * [签名方法](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
 */
const token = ''; // 此处请填写您自己的参数

/** ----------------------- */

/**
 * 定义获取签名方法
 *
 * 注意：此处方案仅适用于 DEMO 调试，正式环境中签名方法推荐在服务端实现，通过接口提供，前端调用拉取签名
 * 如：
 * async function () {
 *  return fetch('http://xxx.com/get-ar-sign').then(res => res.json());
 * };
 */
const getSignature = function () {
    const timestamp = Math.round(new Date().getTime() / 1000);
    const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
    return { signature, timestamp };
};

let w = 720;
let h = 480;

// 获取输入流
const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: { width: w, height: h }
})

// ar sdk 基础配置参数
const config = {
    input: stream,
    auth: {
        licenseKey: LICENSE_KEY,
        appId: APPID,
        authFunc: getSignature
    },
    // 初始美颜效果（可选参数）
    beautify: {
        whiten: 0.1, // 美白 0-1
        dermabrasion: 0.5, // 磨皮 0-1
        lift: 0.3, // 瘦脸 0-1
        shave: 0, // 削脸 0-1
        eye: 0, // 大眼 0-1
        chin: 0, // 下巴 0-1
    }
}

// config 传入 ar sdk
const ar = new ArSdk(config);

// created回调里可以获取内置特效与滤镜列表进行界面展示
ar.on('created', () => {
    // 获取内置美妆、贴纸
    ar.getEffectList({
        Type: 'Preset'
    }).then((res) => {
        const list = res.map(item => ({
            name: item.Name,
            id: item.EffectId,
            cover: item.CoverUrl,
            url: item.Url,
            label: item.Label,
            type: item.PresetType,
        }));

        const makeupList = list.filter(item=>item.label.indexOf('美妆')>=0)
        const stickerList = list.filter(item=>item.label.indexOf('贴纸')>=0)
        // 渲染美妆、贴纸列表视图
        renderMakeupList(makeupList);
        renderStickerList(stickerList);

    }).catch((e) => {
        console.log(e);
    });
    // 内置滤镜
    ar.getCommonFilter().then((res) => {
        const list = res.map(item => ({
            name: item.Name,
            id: item.EffectId,
            cover: item.CoverUrl,
            url: item.Url,
            label: item.Label,
            type: item.PresetType,
        }));

        // 渲染滤镜列表视图
        renderFilterList(list);

    }).catch((e) => {
        console.log(e);
    });
});

ar.on('ready', async (e) => {

    // 在 ready 回调里及该事件之后，可使用三种方法来设置美颜特效：setBeautify/setEffect/setFilter

    // 例如使用range input（滑动控件）设置美颜效果
    $('#dermabrasion_range_input').change((e) => {
        ar.setBeautify({
            dermabrasion: e.target.value, // 磨皮 0-1
        });
    });

    // 通过created回调中创建的美妆、贴纸列表交互设置效果(setEffect的输入参数支持三种格式，详见SDK接入指南)
    $('#makeup_list li').click(() => {
        ar.setEffect([{id: effect.id, intensity: 1}]);
    });
    $('#sticker_list li').click(() => {
        ar.setEffect([{id: effect.id, intensity: 1}]);
    });

    // 通过created回调中创建的滤镜列表交互设置滤镜效果(setFilter第二个参数1表示强度，详见SDK接入指南）
    ar.setFilter(filterList[0].id, 1);
    $('#filter_list li').click(() => {
        ar.setFilter(filter.id, 1);
    });

    // 获取ar sdk 输出的流在下一步中进行 WebRTC 推流
    const arStream = await ar.getOutput();

});

ar.on('error', (e) => {
    console.log(e);
});


let livePusher = new TXLivePusher()
// 设置直播推流基础参数 begin
let DOMAIN = '您的推流域名'
let AppName = '您的appName' 
let StreamName = '您的streamName'
let txSecret = '您的txSecret'
let txTime = '您的txTime'
// 设置直播推流基础参数 end

let pushUrl = `webrtc://${DOMAIN}/${AppName}/${StreamName}?txSecret=${txSecret}&txTime=${txTime}`;

// 可选：设置预览界面元素
livePusher.setRenderView('id_local_video');
// 捕获流内容
livePusher.startCustomCapture(arStream).then(()=>{
    // 立刻开始推流，您也可以通过其他函数来控制推流时机
    livePusher.startPush(pushUrl);
})