本文为您介绍Web RTS推流SDK快速接入的方法。
使用说明
本文中引入的Web RTS推流SDK的版本号1.2.1仅供参考,获取最新的版本,请参见Web RTS推流SDK。
操作步骤
在页面引入SDK。
方法一:在 HTML head中引入推流 SDK 脚本。
<script src="https://g.alicdn.com/apsara-media-box/imp-web-rts-pusher/1.2.1/aliyun-rts-pusher.js"></script>
方法二:以 npm 包的方式引入。
npm install aliyun-rts-pusher --save
import { AliRTSPusher } from 'aliyun-rts-pusher';
初始化SDK。
创建一个推流 client 实例,并监听事件。
// 创建推流实例 const pushClient = AliRTSPusher.createClient(); // 监听错误事件 pushClient.on('error', (err) => { console.log(err.errorCode) });
详细信息,请参见API createClient,事件监听 IEventListener。错误码信息,请参见错误码说明。
设置本地预览容器。
在HTML中插入一个div元素作为推流画面的本地预览容器。
<div id="videoContainer"></div>
将容器ID传给SDK,SDK会在其中创建一个video标签并播放预览画面。
const videoEl = pushClient.setRenderView('videoContainer'); // 如果希望将本地预览静音(推出去的流不会静音) videoEl.muted = true;
详细信息,请参见API setRenderView。
设置视频质量。
采集之前先设置好视频质量,可选的预设参数请参考 VideoProfileMap(您可以遍历查看出键值对的内容,key就是setVideoQuality需要的参数,value就是对应的详细配置)。如果不设置,默认值是
720p_2
。pushClient.setVideoQuality('720p_1');
详细信息,请参见API setVideoQuality。
开始采集音视频。
可以开启摄像头、麦克风或屏幕共享。采集成功后页面会出现本地预览画面。
// 打开摄像头 await pushClient.startCamera(); // 打开麦克风 await pushClient.startMicrophone();
详细信息,请参见API startCamera、startMicrophone和startScreenCapture。
开始推流。
传入RTS推流地址并开始推流。
说明超低延时直播Web端推流的编码格式为:
视频:H.264
音频:OPUS
pushClient.startPush('artc://domain/appName/streamName');
详细信息,请参见API startPush。
停止推流。
pushClient.stopPush();
详细信息,请参见API stopPush。
停止采集音视频。
// 关闭摄像头 pushClient.stopCamera(); // 关闭麦克风 pushClient.stopMicrophone();
详细信息,请参见API stopCamera、stopMicrophone和stopScreenCapture。
反馈
- 本页导读 (1)
文档反馈