QNRTN Web v2.1.0 ReleaseNote
这个版本,我们加入了 3 个功能:截帧功能
、自定义用户数据字段
和 自定义 Track
。关于功能的细节和使用方法参阅下文中的新功能介绍。
缺陷修复
- 修复 Safari12 和 Chrome71 以上可能出现的音频数据回调失效
- 修复弱网时可能会出现的重连失败
- 修复流状态回调在重连后没有立刻恢复的问题
优化
- 现在可以在加入房间的中途安全离开房间
- 优化多路采集时的耗时
新功能
截帧
现在 Track 对象或者 Stream 对象提供了 getCurrentFrameDataURL
方法。通过这个方法可以获取当前的视频画面数据,以 dataURL 的格式返回。这个 dataURL
从是以 base64
编码的,下面这段代码演示了如何利用这个 API 在浏览器上下载当前帧的图片。
const dataURL = track.getCurrentFrameDataURL();
const link = document.createElement('a');
link.download = 'capture.png';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
自定义用户数据字段
现在在加入房间时,除了提供 roomToken
之外,还可以加入一个自定义的用户字段。这个自定义的用户字段也可以被房间中其他用户读取到,比较常见的场景是放置一些用户头像地址之类的信息。
await myRoom.joinRoomWithToken(ROOM_TOKEN, "http://xxx.xx.xx.jpg");
之后可以通过 User 来读取。
自定义 Track
为了应对各种各样灵活多变的需求,我们增加了 createCustomTrack
这个 API 允许用户用自定义的方式来创建 SDK 的媒体对象。
在各种各样的业务场景中,单纯的摄像头或者屏幕采集是不能完全满足用户的需要的,比如有些场景会希望能直接采集某个视频源甚至是采集 canvas
对象。亦或是在希望不借助 SDK 的采集模块,直接用自己的方法完成采集等等。
这个 API 开放给有一定开发能力的用户使用,API 接受一个浏览器原生的 MediaStreamTrack
作为参数,返回 SDK 内置的媒体对象 Track
,可以直接用于发布和播放。具体的介绍见 createCustomTrack。下面演示了如何发布一个自定义的 video
元素。
<video id="video" src="http://xxx.xxx.xxx.mp4" controls loop />
import { createCustomTrack } from "pili-rtc-web";
const video = document.getElementById("video");
// 调用原生方法录制 video 元素
const mediaStream = video.captrueStream();
const mediaTracks = mediaStream.getTracks();
const tracks = [];
for (const mediaTrack of mediaTracks) {
// 将原生的媒体对象转换成 SDK 支持的媒体对象
const track = await createCustomTrack(mediaTrack);
tracks.push(track);
}
// 发布自定义的 tracks
await myRoom.publish(tracks);