Hi ya,
I successfully implemented the Share Screen functionality. On my screen, it shows that the screen has been shared with a button below to stop sharing or hide the message.
Unfortunately, the members of the Room can’t see my screen. Rather, they only see the default video call of my camera.
Below is my code.
OV = new OpenVidu();
var sessionScreen = OV.initSession();
getToken().then((token) => {
sessionScreen.connect(token).then(() => {
var publisher = OV.initPublisher("html-element-id", { videoSource: "screen" });
publisher.once('accessAllowed', (event) => {
publisher.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {
console.log('User pressed the "Stop sharing" button');
});
sessionScreen.publish(publisher);
});
publisher.once('accessDenied', (event) => {
console.warn('ScreenShare: Access Denied');
});
}).catch((error => {
console.warn('There was an error connecting to the session:', error.code, error.message);
}));
});
================ CONSOLE LOGS ====================
Event ‘accessAllowed’ triggered once by ‘Publisher’
OpenViduLogger.ts:31 ‘Publisher’ (str_SCR_N72J_con_CMZTP7h1fF) successfully published to session
OpenViduLogger.ts:19 IceConnectionState of RTCPeerConnection 857b7426-afd1-430c-86b1-435492970edb (publisher of con_CMZTP7h1fF) change to “checking”
OpenViduLogger.ts:19 IceConnectionState of RTCPeerConnection 857b7426-afd1-430c-86b1-435492970edb (publisher of con_CMZTP7h1fF) change to “connected”
=============== CONSOLE LOGS END ==================
Looking forward to your help.
Thanks
its working but you don’t used proper html tag id in OV.initPublisher(“html-element-id”,
pleases use it then you will get
thanks
1 Like
Hi, thanks for the reply.
I actually parsed the html-element-id to the same ID as the videos. The problem is that, it’s sharing the screen on my end. But, the group members can’t see the shared screen.
Thanks.
If you’re publish the screen correctly, others members will be able to see it. So, if they can’t see your published screen, you’re not publishing your screen good.
Please, read the followings tutorial and try again.
-
How join a session
-
How to publish a stream
Regards
Hi, thanks for the assistance.
My code above has conform with the seggestions you mentioned above. Yet, I’m still having the same problem of remote users not been able to access the shared screen.
A colleague of my is also having the same issue with screen sharing on Get a Room.
Need help please.
This is simple app for video and screen share i made for you please check it . I hope it will be helpful
You use https://docs.openvidu.io/en/2.14.0/tutorials/openvidu-hello-world/ for reference .
Its made by me quickly may be some bug or some bad style used
Thanks
app.js
function ScreenShare(){
var sessionScreen = OV.initSession();
var mySessionId = document.getElementById("sessionId").value;
getToken(mySessionId).then(token => {
sessionScreen.connect(token).then(() => {
var publisher = OV.initPublisher("screenshare", { videoSource: "screen" });
publisher.once('accessAllowed', (event) => {
publisher.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {
console.log('User pressed the "Stop sharing" button');
});
sessionScreen.publish(publisher);
});
publisher.once('accessDenied', (event) => {
console.warn('ScreenShare: Access Denied');
});
}).catch((error => {
console.warn('There was an error connecting to the session:', error.code, error.message);
}));
});
}
1 Like
Wow, thank you so very much,
It worked like magic.
In case if someone encounter this problem. It was as a result of not passing the session ID to the getToken function.
A session ID need to be passed to the getToken function for the share screen to work. I used var mySessionId = window.location.hash.slice(1); to get the session ID from the URL.
Thanks.
If I have the session created and want to share the screen I need to create a new OV.initisession and then get token? Or I can use the current session and generate a token for the screnshare
You can use same session only you need to create new token for screen share
Thanks
Here is my code:
async screenShare () {
const token = await this.createToken(this.idClase)
console.log(token)
this.session
.connect(token).then(() => {
const videoSource = navigator.userAgent.indexOf(‘Firefox’) !== -1 ? ‘window’ : ‘screen’
const publisher = this.OV.initPublisher(
undefined,
{
videoSource: videoSource,
publishAudio: true,
publishVideo: true,
mirror: false
}, (error) => {
if (error) {
console.error('Error while initializing publisher: ', error)
} else {
console.log(‘Publisher successfully initialized’)
}
if (error && error.name === 'SCREEN_EXTENSION_NOT_INSTALLED') {
this.setState({ showExtensionDialog: true })
} else if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') {
alert('Your browser does not support screen sharing')
} else if (error && error.name === 'SCREEN_EXTENSION_DISABLED') {
alert('You need to enable screen sharing extension')
} else if (error && error.name === 'SCREEN_CAPTURE_DENIED') {
this.session.unpublish(publisher)
alert('You need to choose a window or application to share')
}
}
)
publisher.once('accessAllowed', () => {
publisher.stream.getMediaStream().addEventListener('ended', () => {
console.log('ENDED: User pressed the "Stop sharing" button')
this.sharingScreen = false
this.session.unpublish(this.screenPublisher)
this.screenPublisher = undefined
})
publisher.stream.getMediaStream().addEventListener('inactive', () => {
console.log('INACTIVE: User pressed the "Stop sharing" button')
this.sharingScreen = false
this.session.unpublish(this.screenPublisher)
this.screenPublisher = undefined
})
this.session.unpublish(this.publisher)
this.screenPublisher = publisher
this.session.publish(publisher)
this.sharingScreen = true
})
publisher.once('streamPlaying', () => {
console.log('Streaming:', publisher)
})
}).catch((error) => {
console.log(
'There was an error connecting screen share:',
error.code,
error.message
)
})
},
