javascript - 网络上的 TokBox 订阅者快照
问题描述
我正在尝试在我的 Web 应用程序中捕获订阅者的快照。
我想通过单击按钮捕获快照。
var imgData = subscriber.getImgData();
var img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);
// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);
这是他们在开发人员文件中提供的代码。没有任何关于如何实现它的描述。
现在我的问题是,如果我把它放在按钮 onClick 函数中,比如
function capture(){
}
它不会做任何事情,因为无法在 capture() 函数上获取订阅者值。
在以下不同功能中加入会话时,订阅者已经启动
function initializeSession() {
var session = OT.initSession(apiKey, sessionId);
session.on('streamCreated', function streamCreated(event) {
var subscriberOptions = {
insertMode: 'append',
width: '100%',
height: '100%'
};
var subscriber = session.subscribe(event.stream, 'subscribers', subscriberOptions, handleError);
});
如果有人可以帮助我,我如何在按钮单击时捕获快照。提前致谢。
解决方案
OpenTok 开发者倡导者在这里。
您需要修改代码以在initializeSession
函数外部定义订阅者对象,如下所示:
var subscriber;
function initializeSession() {
var session = OT.initSession(apiKey, sessionId);
session.on('streamCreated', function streamCreated(event) {
var subscriberOptions = {
insertMode: 'append',
width: '100%',
height: '100%'
};
subscriber = session.subscribe(event.stream, 'subscribers', subscriberOptions, handleError);
});
}
然后您可以像这样访问函数中的subscriber
对象capture
:
function capture(){
if (subscriber) {
var imgData = subscriber.getImgData();
var img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);
// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);
}
}
推荐阅读
- python - 如何在 Google Colab 中使用 Matplotlib 堆叠来自不同文件夹的多个图像?
- java - 创建一个新的 MP4 视频并将 MP3 文件混合到其中
- php - Magium\ActiveDirectory 试图列出分配给用户的组
- c - 用作指针的函数名
- python - 如何防止网络爬虫/爬虫/机器人攻击我的 API
- flutter - Flutter:在类之间传递数据会重置其他值
- reactjs - 反应:是否可以水合(或其他)单一成分?
- python - 如何在 python 中转义字符串以用作 xpath 键
- python - 如何使用字符串
- 在 Django 视图中?
- image-processing - 如何检查图像中的框是否有文字?