Zoom Video SDK: Screen Sharing not working - reactjs

I Also posted this topic in Zoom Community and still got not replies.
[Situtation]
I’ve been following the documentation to implement Screen Sharing feature with React.
Although, it only shows the sharing screen to started user and others doesn’t see it.
When sharing is stopped, I get this error (There’s no error on sharing start)
TypeError: Cannot read properties of undefined (reading ‘contextGL’)
at c2f9e9ce-c03d-429c-a087-fb847ca77016:1:111290
at c2f9e9ce-c03d-429c-a087-fb847ca77016:1:111392
Actual Code
// For rendering received screen share stream
client.on('active-share-change',async payload =>{
const target = client.getAllUser().find(item => item.userId === payload.userId)
// const video = document.querySelector(`.user_media.video[data-video_id="${target?.displayName}"]`)
// Also Tried with video element above (reference to the share started user's video tag), but the result was same.
const testVideo = document.querySelector('.share-canvas#test_video')
if(payload.state === 'Active' ){
console.log('STARTED!')
console.log(payload.userId)
try {
await stream.startShareView(testVideo,payload.userId)
} catch (error){
console.log(error)
}
}else if(payload.state === 'Inactive'){
try {
await stream.stopShareView()
} catch (error) {
console.log(error)
}
}
})
// ~~~~~~~~ different file ~~~~~~~~~
// For start sharing screen
const startShareScreen = () => {
const testVideo = document.querySelector('.share-canvas#test_video')
stream.startShareScreen(testVideo)
}
Please Help!

Kindly check for using the canvas, you can remove the canvas and create the element canvas again, or before you load the share screen you can clear the canvas using https://www.w3schools.com/tags/canvas_clearrect.asp

Related

Duplicate 'ScreenView' in Firebase DebugView

Basically, my 'ScreenView' tracks are being duplicated when I use IOS.
Looking for the same problem, I saw that Firabase advised not to use 'setCurrentScreen', but here we use 'logEvent' for the track.
static screenView = async (info: FirebaseActualScreen) => {
try {
await FirebaseAnalytics.logEvent(LogTypes.SCREEN_VIEW, {
page_name: info?.name ?? '',
});
} catch (e) {
crashlytics().recordError(new Error(`Error to get actual screen - ${e}`));
}
};
Firebase DebugView
I have tried using the 'setCurrentScreen', even though it is not advisable, but the problem persists.

Current activity not found. Make sure to call this method while your application is in foreground

Using expo-splash-screen and SplashScreen.preventAutoHideAsync() throws many errors in production builds and running app on expo go.
I call preventAutoHideAsync first thing in App.js. The warning message is Current activity not found. Make sure to call this method while your application is in foreground.
https://github.com/expo/expo/issues/20502
Implement as per https://docs.expo.dev/versions/v46.0.0/sdk/splash-screen/
Reproducible demo: https://github.com/kirtikapadiya/SplashReactNative
I'm not sure if this will work, but I have the same problem and are gonna try:
// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync().catch((error) => {
// Attach the event to error handling system (Sentry, LogRocket etc.)
// Try to call it again when app state is 'active'
let attempts = 0
const appStateListener = AppState.addEventListener('change', (nextAppState) => {
if (nextAppState === 'active' && attempts < 0) {
attemps++
SplashScreen.preventAutoHideAsync()
.then(() => appStateListener.remove())
.catch((error) => {
// Attach the event to error handling system (Sentry, LogRocket etc.)
})
}
if (attempts >= 3) {
appStateListener.remove()
}
})
})
export default function App() {
....

Property `deleteVisual` doesn't exist on type Page

I have a powerbi report embedded using Angular. I want to delete Visuals of the report. Here is the code I implemented for deleteVisual function.
deleteVisual() {
// Get report
const report = await this.reportObj.getReport();
if (!report){
console.log(“Report Not available”);
return;
}
// Get all the pages of the report
const pages = await report.getPages();
// Check if all the pages of the report deleted
if (pages.length === 0) {
console.log(“No pages found”);
return;
}
// Get active page of the report
const activePage = pages.find((page) => page.isActive);
if (activePage)
// Get all visuals in the active page of the report
const visuals = await activePage.getVisuals();
if (visuals.length === 0) {
console.log('No visuals found.');
return;
}
// Get first visible visual
const visual = visuals.find((v) => v.layout.displayState?.mode ===
models.VisualContainerDisplayMode.Visible);
if (!visual) {
console.log('No visible visual available to delete.');
return;
}
try {
// Delete the visual using powerbi-report-authoring
const response = await activePage.deleteVisual(visual.name);
console.log(`${visual.type} , visual was deleted.`);
return response;
} catch (error) {
console.error(error);
}
}
I am getting error saying Property deleteVisual doesn't exist on type Page. Also why getVisuals, getReport , even deletePage working fine but getting error while using this deleteVisual. I want to attach the ss of error but i dont have enough reputation to post images.Can anyone help me to solve this problem.
To use deleteVisual please install powerbi-report-authoring library.
Using npm you can install by this command
npm i powerbi-report-authoring
References:
https://learn.microsoft.com/javascript/api/overview/powerbi/remove-visual
https://www.npmjs.com/package/powerbi-report-authoring

Wix Database searching upload

I am building a fitness website on Wix. What I have is a database collection of all the training videos. When someone purchases a plan the trainer needs to have their own "Trainer Portal" where they can build the plan for the customer. I need the trainer to be able to filter through the database collection videos and then click "ADD". When they click "ADD" it pushes that video to a data collection then on the same page populate a repeater. The filtering videos I have done with no problem, the problem I am facing is pushing the videos from one database to another database within the webpage. I can only push the information about the video to another data collection but not the actual video.
If anyone knows if this is possible then please point me in the right direction.
Here is my code below.
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
import wixData from "wix-data";
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer)
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filterTitle($w('#iTitle').value);
}, 200)
// Add your code for this event here:
}
function filterTitle(title) {
console.log($w('#iTitle').value);
$w('#allVideosDatatSet').setFilter(wixData.filter().contains('title', title))
}
export function addVideos(event) {
let toInsert = {
"video1": $w("#videoPlayer1")
}
wixData.insert("Week1", toInsert)
$w("#week1Dataset").save()
.then( (results) => {
let item = results;
console.log("Your video was saved!!!!");
})
.catch( (error) => {
let logErrorMessage = error;
// console.log(error);
} );
}
3 things
First: I'm assuming you have a button with the id of addVideos hence the export function
Your function export function addVideos(event) {} may not be correct, it should be added via the Properties Panel and should read something like export function addVideos_click(event) {} or add it under the page's onReady function like this:
$w("#addVideos").onClick( (event) => {
//put code here
});
Second: You should scope an item if your button is inside a repeater. Read my answer here to understand more about scoping an item from a repeater.
Third: If the button is inside the repeater then your code should look like below:
export function addVideos(event) {
let $item = $w.at(event.context);
let toInsert = {
"video1": $item("#videoPlayer1").src //Missing the .src to get the video source link & also assuming video player is inside the repeater
};
wixData.insert("Week1", toInsert) //"Week1" should be the database id
.then( (results) => {
console.log("Your video was saved!!!!");
})
.catch( (error) => {
console.log(error);
});
}
Regarding this: "I can only push the information about the video to another data collection but not the actual video"
Videos are stored in the Wix Media Manager, the wix database only stores the link to the video which may begin like wix://video so you cannot "move a video" between databases, just the link which you can get via .src if you want the link of a video player.

Can't get the Generic Sensor API to work in a React app

I'm trying to implement the Generic Sensor API in a React app.
https://www.w3.org/TR/generic-sensor/#the-sensor-interface
I keep getting an error when I try to implement any of the sensors in my code.
For example:
var sensor1 = new AmbientLightSensor();
I get the error: Cannot find name: 'AmbientLightSensor'.
I assume that I need an import statement in my code. All of the examples I've found only include LitElement. I've even tried that but still get the unknown error.
What import statements do I need in my typescript code?
What npm packages do I need?
Below is the typescript code I'm using.
I'm getting a typescript error:
/Users/scoleman/dev/current/bigbrother/src/utility/testAccel.ts(14,24):
Cannot find name 'AmbientLightSensor'. TS2304
export const testAccel = async (
databaseName: string,
) => {
const {state} = await navigator.permissions.query({
name: "ambient-light-sensor"
});
if (state !== "granted") {
console.warn("You haven't granted permission to use the light sensor");
return;
}
const sensor = new AmbientLightSensor();
sensor.addEventListener("reading", () => {
console.log(sensor.illuminance);
});
sensor.addEventListener("error", (err: any) => {
console.error(err);
});
sensor.start();
};
I was able to get these api's running using the polyfill at:
https://github.com/kenchris/sensor-polyfills
This would depend entirely on the browser you are using. I don't think FireFox supports it at the moment so I will focus on Chrome.
Firstly, you might need to be serving your site over HTTPS. It seems like this almost varies from permission to permission and also some are available on a localhost URL no matter what.
Secondly, for Chrome, you have to enable the "Generic Sensor Extra Classes" flag in Chrome at the chrome://flags/#enable-generic-sensor-extra-classes page.
Next, you need to make sure that have permission from the user to use the sensor, then you could actually use it. A snippet that would check that is as follows:
(async function(){
const {state} = await navigator.permissions.query({
name: "ambient-light-sensor"
});
if (state !== "granted") {
console.warn("You haven't granted permission to use the light sensor");
return;
}
const sensor = new AmbientLightSensor();
sensor.addEventListener("reading", () => {
console.log(sensor.illuminance);
});
sensor.addEventListener("error", err => {
console.error(err);
});
sensor.start();
}());

Resources