结合 TRTC 推流

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

const { ArSdk } = window.AR
?
/** ----- 鉴权配置 ----- */
?
/**
 * 腾讯云账号 APPID
 * 
 * 进入[腾讯云账号中心](https://console.cloud.tencent.com/developer) 即可查看 APPID
 */
const APPID = ''; // 此处请填写您自己的参数
?
/**
 * Web LicenseKey
 * 
 * 登录音视频终端 SDK 控制台的[Web License 管理](https://console.cloud.tencent.com/vcube/web)，创建项目即可获得 LicenseKey
 */
const LICENSE_KEY = ''; // 此处请填写您自己的参数
?
/**
 * 计算签名用的密钥 Token
 * 
 * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考
 * [签名方法](/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 = 1280;
let h = 720;
?
// ar sdk 基础配置参数
const config = {
    camera: { //这个参数表示从本机摄像头开始采集流
        width: 1280,
        height:720
    },
    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', (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.on('error', (e) => {
    console.log(e);
});

// 获取 ar sdk 输出流
const arStream = await this.ar.getOutput();
?
const audioSource = arStream.getAudioTracks()[0];
const videoSource = arStream.getVideoTracks()[0];
?
// create a local stream with audio/video from custom source
this.localStream_ = TRTC.createStream({
    audioSource,
    videoSource
});
?

const cameraApi = this.ar.camera;
// 支持获取设备列表
const devices = await cameraApi.getDevices()
console.log(devices)
// 支持切换不同摄像头
// await cameraApi.switchDevice('video', 'your-video-device-id')
// 禁用视频轨道
// cameraApi.muteVideo()
// 恢复视频轨道
// cameraApi.unmuteVideo()
// 禁用音频轨道
// cameraApi.muteAudio()
// 恢复音频轨道
// cameraApi.unmuteAudio()
// 停止摄像头
// cameraApi.stop()
// 重启摄像头
// await cameraApi.restart()
?

// 使用SDK内置player，其中my-dom-id表示您需要放置播放器的容器id
const player = await sdk.initLocalPlayer('my-dom-id')
// 直接播放
await player.play()
// 暂停
player.pause()
?