- 首页
- 移动开发
- OpenTok，如何将发布者源从屏幕捕获器切换到相机，反之亦然?
OpenTok，如何将发布者源从屏幕捕获器切换到相机，反之亦然?
[英] OpenTok, How to switch publisher source from screen capturer to camera and vice versa?
本文介绍了OpenTok，如何将发布者源从屏幕捕获器切换到相机，反之亦然?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现允许在 Android 应用程序中的视频会话中间在屏幕共享捕获和相机之间切换的功能.我使用适用于 Android 的 OpenTok SDK 2.5.
我研究了 OpenTok 示例(OpenTok 示例) 并认为他们每个程序示例只显示一个功能.
问题:代码是否应该提供两个发布者(一个配备相机，一个配备屏幕共享捕获器)并切换它们，例如
session.unpublish();如果(currentIsCamera){session.publish(screenSharingPublisher);}别的 {session.publish(cameraPublisher);}
或者更好地坚持使用单个发布者并根据需要在 BaseVideoCapturer 和 ScreensharingCapturer 之间切换?
mPublisher.setPublishVideo(false);BaseVideoCapturer bvc = mPublisher.getCapturer();if(bvc != null){bvc.destroy();}//意图开始图片捕获(例如ACTION_IMAGE_CAPTURE)
拍照后恢复时，需要重新初始化
BaseVideoCapturer bvc = mPublisher.getCapturer();if(bvc != null){if(bvc.isCaptureStarted() == false){bvc.init();bvc.startCapture();mPublisher.setPublishVideo(true);}}
我从解决方案中获取的这个示例 setPublishVideo(false) 不会释放相机
我怀疑取消发布/发布会中断会话，这不是我想要的.
P.S.对不起，我的英语不是我的母语.
解决方案
在文档上Ready调用视频发布方法
var apiKey = '';var sessionId = '<Session ID >';//服务器端值var token = '<Token >';//服务器端值var isModerator = <Yes/No>;//在服务器端处理var 出版商；var screenPublisher;var streamMode = "相机";session = OT.initSession(apiKey, sessionId);发布视频()；会话事件(发布者)；连接会话()；
HTML 代码
<div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><div 类=直播"><div class="来电列表"><ul>
<div id="publisher" class="draggable user-camscreen">
<div class="controls" id=""><div><button id="btnShareScreen" data-screen="0" class=""><img src="~/Content/img/Student/screenshare.svg" class="screenshare"/><p class="mb-none mt-xs text-sm line-height-xs text-white">屏幕</p>
在相机/屏幕切换按钮上点击通话
/*在相机和屏幕之间切换*/$("#btnShareScreen").on("click", function () {el = $(this);if (el.data('screen') == 0) {//发布屏幕发布屏幕()；连接会话()；el.data('屏幕', '1');el.find('img').attr('src', '/Content/img/Student/video-icon.svg');el.parent().find('p').html("相机");}别的 {发布视频()；连接会话()；el.data('屏幕', '0');el.find('img').attr('src', '/Content/img/Student/screenshare.svg');el.parent().find('p').html("屏幕");}});
所有方法
function publishVideo() {控制台日志(屏幕发布者)；如果(screenPublisher ！= 未定义){结束流(屏幕发布者)；}createPublisherDiv();发布者 = OT.initPublisher('发布者'，函数(错误){如果(错误){//查看 error.message 看看哪里出了问题.} 别的 {session.publish(发布者，函数(错误){如果(错误){//查看 error.message 看看哪里出了问题.} 别的 {streamMode = "相机";}});}});}函数publishScreen() {OT.checkScreenSharingCapability(功能(响应){if (!response.supported || response.extensionRegistered === false) {//此浏览器不支持屏幕共享.$.警报({title: '警报！',内容:您的浏览器不支持屏幕共享"，});} else if (response.extensionInstalled === false) {//提示安装扩展.} 别的 {//屏幕共享可用结束流(出版商)；createPublisherDiv();const 发布 = Promise.all([OT.getUserMedia({视频来源:'屏幕'}),OT.getUserMedia({视频来源:空})]).then(([screenStream, micStream]) => {返回 screenPublisher = OT.initPublisher('发布者', {视频源:screenStream.getVideoTracks()[0],音频源:micStream.getAudioTracks()[0],fitMode:包含"});});发布.然后(screenPublisher => {session.publish(screenPublisher，函数(错误){如果(错误){//查看 error.message 看看哪里出了问题.} 别的 {streamMode = "屏幕";}});}).catch(handleError);}});}函数 endStream(streamPublisher) {session.unpublish(streamPublisher, function () {//打回来});}函数连接会话(){session.connect(令牌，功能(错误){如果(错误){console.error('连接失败', 错误);}});}函数 sessionEvents(streamPublisher) {会话.on({sessionConnected:函数(事件){//发布我们之前初始化的发布者(这将触发其他的 'streamCreated'//客户)session.publish(streamPublisher，函数(错误){如果(错误){console.error('发布失败', 错误);} 别的 {console.log("发布成功");}});},//当另一个客户端发布流时运行此函数(例如 session.publish())流创建:函数(事件){//为新订阅者创建一个容器，使用 streamId 为其分配一个 id，将其放入//id="subscribers" 的元素控制台日志(事件流)；var subOptions = {宽度:'100%'，高度:'100%'};var subContainer = document.createElement('div');subContainer.id = 'stream-' + event.stream.streamId;document.getElementById('subscribers').appendChild(subContainer);//订阅导致此事件的流，将其放入我们刚刚制作的容器中订阅者 = session.subscribe(event.stream, subContainer, subOptions, function (error) {如果(错误){console.error('订阅失败', 错误);}});}});}/*OpenTok Unpublish 方法删除了发布者 div.这就是动态创建 div 的原因*/函数 createPublisherDiv() {$('.caller-list').find('li').empty();var html = '<div id="publisher" class="draggable user-camscreen"></div>';$('.caller-list').find('li').append(html);}函数句柄错误(错误){if (err) console.log(err.message);}
I am trying to implement the feature that allows to switch between screen sharing capture and camera in the middle of the video session in an Android app. I use OpenTok SDK 2.5 for Android.
I have researched OpenTok examples (OpenTok samples) and figured they show only one feature per program sample.
Question: Should code supply two Publishers (one equipped with Camera and one with Screensharing capturer) and switch them, for example
session.unpublish();
if (currentIsCamera) {
session.publish(screenSharingPublisher);
}
else {
session.publish(cameraPublisher);
}
or better stick with single Publisher and flip between the BaseVideoCapturer and ScreensharingCapturer as I need?
mPublisher.setPublishVideo(false);
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
bvc.destroy();
}
//intent to start picture capture (Ex. ACTION_IMAGE_CAPTURE)
When you resume after taking the picture, you will need to initialize again
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
if(bvc.isCaptureStarted() == false){
bvc.init();
bvc.startCapture();
mPublisher.setPublishVideo(true);
}
}
This sample I took from the solution setPublishVideo(false) does not free the Camera
I suspect that unpublish/publish would break the session and that is not what I want.
P.S.Sorry for my English it is not my mother language.
解决方案
On document Ready call the video publish method
var apiKey = '<APP_KEY>';
var sessionId = '<Session ID >';//Server Side Values
var token = '<Token >';//Server Side Values
var isModerator = <Yes/No>;//Handle it on server Side
var publisher;
var screenPublisher;
var streamMode = "camera";
session = OT.initSession(apiKey, sessionId);
publishVideo();
sessionEvents(publisher);
connectSession();
Html Code
<div id="subscribers" class="container-fluid show-controls">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div classs="live-stream">
<div class="caller-list">
<ul>
<li class="">
<div id="publisher" class="draggable user-camscreen">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="controls" id="">
<div>
<button id="btnShareScreen" data-screen="0" class="">
<img src="~/Content/img/Student/screenshare.svg" class="screenshare" />
</button>
<p class="mb-none mt-xs text-sm line-height-xs text-white">Screen</p>
</div>
</div>
On camera/screen switch button click call
/*
Switching between camera and screen
*/
$("#btnShareScreen").on("click", function () {
el = $(this);
if (el.data('screen') == 0) {
//Publish Screen
publishScreen();
connectSession();
el.data('screen', '1');
el.find('img').attr('src', '/Content/img/Student/video-icon.svg');
el.parent().find('p').html("Camera");
}
else {
publishVideo();
connectSession();
el.data('screen', '0');
el.find('img').attr('src', '/Content/img/Student/screenshare.svg');
el.parent().find('p').html("Screen");
}
});
All Methods
function publishVideo() {
console.log(screenPublisher);
if (screenPublisher != undefined) {
endStream(screenPublisher);
}
createPublisherDiv();
publisher = OT.initPublisher('publisher', function (error) {
if (error) {
// Look at error.message to see what went wrong.
} else {
session.publish(publisher, function (error) {
if (error) {
// Look error.message to see what went wrong.
} else {
streamMode = "camera";
}
});
}
});
}
function publishScreen() {
OT.checkScreenSharingCapability(function (response) {
if (!response.supported || response.extensionRegistered === false) {
// This browser does not support screen sharing.
$.alert({
title: 'Alert!',
content: 'Your Browser Does Not Support Screen Sharing',
});
} else if (response.extensionInstalled === false) {
// Prompt to install the extension.
} else {
//Screen sharing available
endStream(publisher);
createPublisherDiv();
const publish = Promise.all([
OT.getUserMedia({
videoSource: 'screen'
}),
OT.getUserMedia({
videoSource: null
})
]).then(([screenStream, micStream]) => {
return screenPublisher = OT.initPublisher('publisher', {
videoSource: screenStream.getVideoTracks()[0],
audioSource: micStream.getAudioTracks()[0],
fitMode: "contain"
});
});
publish.then(screenPublisher => {
session.publish(screenPublisher, function (error) {
if (error) {
// Look error.message to see what went wrong.
} else {
streamMode = "screen";
}
});
}).catch(handleError);
}
});
}
function endStream(streamPublisher) {
session.unpublish(streamPublisher, function () {
//Call back
});
}
function connectSession() {
session.connect(token, function (error) {
if (error) {
console.error('Failed to connect', error);
}
});
}
function sessionEvents(streamPublisher) {
session.on({
sessionConnected: function (event) {
// Publish the publisher we initialzed earlier (this will trigger 'streamCreated' on other
// clients)
session.publish(streamPublisher, function (error) {
if (error) {
console.error('Failed to publish', error);
} else {
console.log("Publish success");
}
});
},
// This function runs when another client publishes a stream (eg. session.publish())
streamCreated: function (event) {
// Create a container for a new Subscriber, assign it an id using the streamId, put it inside
// the element with id="subscribers"
console.log(event.stream);
var subOptions = {
width: '100%', height: '100%'
};
var subContainer = document.createElement('div');
subContainer.id = 'stream-' + event.stream.streamId;
document.getElementById('subscribers').appendChild(subContainer);
// Subscribe to the stream that caused this event, put it inside the container we just made
subscriber = session.subscribe(event.stream, subContainer, subOptions, function (error) {
if (error) {
console.error('Failed to subscribe', error);
}
});
}
});
}
/*
OpenTok Unpublish Methods removes publisher div.That's why dynamically creating div
*/
function createPublisherDiv() {
$('.caller-list').find('li').empty();
var html = '<div id="publisher" class="draggable user-camscreen"></div>';
$('.caller-list').find('li').append(html);
}
function handleError(err) {
if (err) console.log(err.message);
}
这篇关于OpenTok，如何将发布者源从屏幕捕获器切换到相机，反之亦然?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
