阿里云Web RTS推流-记录

最新推荐文章于 2024-07-07 21:15:52 发布

github_39096247

最新推荐文章于 2024-07-07 21:15:52 发布

阅读量234

点赞数

分类专栏：阿里云文章标签：阿里云前端 javascript

本文链接：https://blog.csdn.net/github_39096247/article/details/132731239

版权

阿里云专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web RTS推流SDK简介：WebRTS推流SDK是什么,对浏览器有什么要求_视频直播-阿里云帮助中心Web RTS推流SDK实现了更完善的推流能力，并支持本地混流功能，推荐您使用Web RTS推流SDK进行推流。https://help.aliyun.com/zh/live/user-guide/overview-of-web-rts-sdk-for-stream-ingest?spm=a2c4g.11186623.0.0.22aeb67dY0ZdE7
文档：RtsClient | 阿里云RTS推流SDK - v1.2.1Documentation for 阿里云RTS推流SDK - v1.2.1https://g.alicdn.com/apsara-media-box/imp-web-rts-pusher/1.2.1/docs/docs/classes/RtsClient.html
demo: :https://github.com/aliyunvideo/AliyunPlayer_Webhttps://github.com/aliyunvideo/AliyunPlayer_Web

自己写个demo用一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .videosty{
            width: 600px;
            height: 500px;
            background-color: #cccccc;
        }
    </style>
</head>

<!--<script src="js/jquery-1.12.4.js"></script>-->
<script src="https://g.alicdn.com/apsara-media-box/imp-web-rts-pusher/1.2.1/aliyun-rts-pusher.js"></script>
<body>
<div class="videosty" id="videoContainer"></div>
</body>
<script>
    async function initClient (){
        // 创建推流实例
        const pushClient = AliRTSPusher.createClient();
        console.log(pushClient)
        // 监听错误事件
        pushClient.on('error', (err) => { console.log(err.errorCode) });

        //给预览画面指定一个 DOM 容器，SDK 将会在这个元素中生成 VIDEO 元素并播放预览画面
        const videoEl = pushClient.setRenderView('videoContainer');
        // 如果希望将本地预览静音（推出去的流不会静音）
        videoEl.muted = false;

        //设置推流视频质量
        pushClient.setVideoQuality('720p_1');

        // 打开摄像头  开启摄像头采集，捕获一个视频流
        await pushClient.startCamera();

        // 打开麦克风
        await pushClient.startMicrophone();

        //地址
        pushClient.startPush('artc://dizhi');

        //开始屏幕采集
        pushClient.startScreenCapture();
    };

    initClient();

    // pushClient.stopPush();
    // 关闭摄像头
    // pushClient.stopCamera();
    // 关闭麦克风
    // pushClient.stopMicrophone();

</script>
</html>

效果：