disconnect camera button from screen share

This commit is contained in:
Avently 2023-11-04 02:35:37 +08:00
parent cfd198cb40
commit baff661e96
4 changed files with 71 additions and 27 deletions

View File

@ -108,7 +108,17 @@ const processCommand = (function () {
const localCamera = VideoCamera.User;
const localStream = await getLocalMediaStream(mediaType, localCamera);
const iceCandidates = getIceCandidates(pc, config);
const call = { connection: pc, iceCandidates, localMedia: mediaType, localCamera, localStream, remoteStream, aesKey, screenShare: false };
const call = {
connection: pc,
iceCandidates,
localMedia: mediaType,
localCamera,
localStream,
remoteStream,
aesKey,
screenShareEnabled: false,
cameraEnabled: true,
};
await setupMediaStreams(call);
let connectionTimeout = setTimeout(connectionHandler, answerTimeout);
pc.addEventListener("connectionstatechange", connectionStateChange);
@ -432,16 +442,14 @@ const processCommand = (function () {
throw Error("no video elements");
const pc = call.connection;
const oldAudioTracks = call.localStream.getAudioTracks();
const oldVideoTracks = call.localStream.getVideoTracks();
const audioWasEnabled = oldAudioTracks.some((elem) => elem.enabled);
const videoWasEnabled = oldVideoTracks.some((elem) => elem.enabled);
let localStream;
try {
localStream = call.screenShare ? await getLocalScreenCaptureStream() : await getLocalMediaStream(call.localMedia, camera);
localStream = call.screenShareEnabled ? await getLocalScreenCaptureStream() : await getLocalMediaStream(call.localMedia, camera);
}
catch (e) {
if (call.screenShare) {
call.screenShare = false;
if (call.screenShareEnabled) {
call.screenShareEnabled = false;
}
return;
}
@ -453,7 +461,7 @@ const processCommand = (function () {
if (!audioWasEnabled && oldAudioTracks.length > 0) {
audioTracks.forEach((elem) => (elem.enabled = false));
}
if (!videoWasEnabled && oldVideoTracks.length > 0) {
if (!call.cameraEnabled && !call.screenShareEnabled) {
videoTracks.forEach((elem) => (elem.enabled = false));
}
replaceTracks(pc, audioTracks);
@ -563,12 +571,15 @@ const processCommand = (function () {
const tracks = media == CallMediaType.Video ? s.getVideoTracks() : s.getAudioTracks();
for (const t of tracks)
t.enabled = enable;
if (media == CallMediaType.Video && activeCall) {
activeCall.cameraEnabled = enable;
}
}
toggleScreenShare = async function () {
const call = activeCall;
if (!call)
return;
call.screenShare = !call.screenShare;
call.screenShareEnabled = !call.screenShareEnabled;
await replaceMedia(call, call.localCamera);
};
return processCommand;
@ -584,6 +595,9 @@ function toggleMedia(s, media) {
t.enabled = !t.enabled;
res = t.enabled;
}
if (media == CallMediaType.Video && activeCall) {
activeCall.cameraEnabled = res;
}
return res;
}
// Cryptography function - it is loaded both in the main window and in worker context (if the worker is used)

View File

@ -42,16 +42,24 @@ function toggleSpeakerManually() {
}
function toggleVideoManually() {
if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.localMedia) {
document.getElementById("toggle-video").innerHTML = toggleMedia(activeCall.localStream, CallMediaType.Video)
let res;
if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled) {
activeCall.cameraEnabled = !activeCall.cameraEnabled;
res = activeCall.cameraEnabled;
}
else {
res = toggleMedia(activeCall.localStream, CallMediaType.Video);
}
document.getElementById("toggle-video").innerHTML = res
? '<img src="/desktop/images/ic_videocam_filled.svg" />'
: '<img src="/desktop/images/ic_videocam_off.svg" />';
}
}
async function toggleScreenManually() {
const was = activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShare;
const was = activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled;
await toggleScreenShare();
if (was != (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShare)) {
document.getElementById("toggle-screen").innerHTML = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShare)
if (was != (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled)) {
document.getElementById("toggle-screen").innerHTML = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled)
? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
: '<img src="/desktop/images/ic_screen_share.svg" />';
}
@ -66,7 +74,7 @@ function reactOnMessageFromServer(msg) {
case "start":
document.getElementById("toggle-audio").style.display = "inline-block";
document.getElementById("toggle-speaker").style.display = "inline-block";
if (msg.command.media == "video") {
if (msg.command.media == CallMediaType.Video) {
document.getElementById("toggle-video").style.display = "inline-block";
document.getElementById("toggle-screen").style.display = "inline-block";
}

View File

@ -194,7 +194,8 @@ interface Call {
localCamera: VideoCamera
localStream: MediaStream
remoteStream: MediaStream
screenShare: boolean
screenShareEnabled: boolean
cameraEnabled: boolean
aesKey?: string
worker?: Worker
key?: CryptoKey
@ -311,7 +312,17 @@ const processCommand = (function () {
const localCamera = VideoCamera.User
const localStream = await getLocalMediaStream(mediaType, localCamera)
const iceCandidates = getIceCandidates(pc, config)
const call = {connection: pc, iceCandidates, localMedia: mediaType, localCamera, localStream, remoteStream, aesKey, screenShare: false}
const call = {
connection: pc,
iceCandidates,
localMedia: mediaType,
localCamera,
localStream,
remoteStream,
aesKey,
screenShareEnabled: false,
cameraEnabled: true,
}
await setupMediaStreams(call)
let connectionTimeout: number | undefined = setTimeout(connectionHandler, answerTimeout)
pc.addEventListener("connectionstatechange", connectionStateChange)
@ -629,15 +640,13 @@ const processCommand = (function () {
if (!videos) throw Error("no video elements")
const pc = call.connection
const oldAudioTracks = call.localStream.getAudioTracks()
const oldVideoTracks = call.localStream.getVideoTracks()
const audioWasEnabled = oldAudioTracks.some((elem) => elem.enabled)
const videoWasEnabled = oldVideoTracks.some((elem) => elem.enabled)
let localStream: MediaStream
try {
localStream = call.screenShare ? await getLocalScreenCaptureStream() : await getLocalMediaStream(call.localMedia, camera)
localStream = call.screenShareEnabled ? await getLocalScreenCaptureStream() : await getLocalMediaStream(call.localMedia, camera)
} catch (e: any) {
if (call.screenShare) {
call.screenShare = false
if (call.screenShareEnabled) {
call.screenShareEnabled = false
}
return
}
@ -649,7 +658,7 @@ const processCommand = (function () {
if (!audioWasEnabled && oldAudioTracks.length > 0) {
audioTracks.forEach((elem) => (elem.enabled = false))
}
if (!videoWasEnabled && oldVideoTracks.length > 0) {
if (!call.cameraEnabled && !call.screenShareEnabled) {
videoTracks.forEach((elem) => (elem.enabled = false))
}
@ -775,12 +784,15 @@ const processCommand = (function () {
function enableMedia(s: MediaStream, media: CallMediaType, enable: boolean) {
const tracks = media == CallMediaType.Video ? s.getVideoTracks() : s.getAudioTracks()
for (const t of tracks) t.enabled = enable
if (media == CallMediaType.Video && activeCall) {
activeCall.cameraEnabled = enable
}
}
toggleScreenShare = async function () {
const call = activeCall
if (!call) return
call.screenShare = !call.screenShare
call.screenShareEnabled = !call.screenShareEnabled
await replaceMedia(call, call.localCamera)
}
@ -799,6 +811,9 @@ function toggleMedia(s: MediaStream, media: CallMediaType): boolean {
t.enabled = !t.enabled
res = t.enabled
}
if (media == CallMediaType.Video && activeCall) {
activeCall.cameraEnabled = res
}
return res
}

View File

@ -49,17 +49,24 @@ function toggleSpeakerManually() {
function toggleVideoManually() {
if (activeCall?.localMedia) {
document.getElementById("toggle-video")!!.innerHTML = toggleMedia(activeCall.localStream, CallMediaType.Video)
let res: boolean
if (activeCall?.screenShareEnabled) {
activeCall.cameraEnabled = !activeCall.cameraEnabled
res = activeCall.cameraEnabled
} else {
res = toggleMedia(activeCall.localStream, CallMediaType.Video)
}
document.getElementById("toggle-video")!!.innerHTML = res
? '<img src="/desktop/images/ic_videocam_filled.svg" />'
: '<img src="/desktop/images/ic_videocam_off.svg" />'
}
}
async function toggleScreenManually() {
const was = activeCall?.screenShare
const was = activeCall?.screenShareEnabled
await toggleScreenShare()
if (was != activeCall?.screenShare) {
document.getElementById("toggle-screen")!!.innerHTML = activeCall?.screenShare
if (was != activeCall?.screenShareEnabled) {
document.getElementById("toggle-screen")!!.innerHTML = activeCall?.screenShareEnabled
? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
: '<img src="/desktop/images/ic_screen_share.svg" />'
}
@ -74,7 +81,7 @@ function reactOnMessageFromServer(msg: WVApiMessage) {
case "start":
document.getElementById("toggle-audio")!!.style.display = "inline-block"
document.getElementById("toggle-speaker")!!.style.display = "inline-block"
if (msg.command.media == "video") {
if (msg.command.media == CallMediaType.Video) {
document.getElementById("toggle-video")!!.style.display = "inline-block"
document.getElementById("toggle-screen")!!.style.display = "inline-block"
}