I’ve been using https://github.com/OpenVidu/openvidu/issues/194 to create a chrome plugin that allows for audio capture, and have installed it in my browser, but the method suggested for using the extension doesn’t seem to be working:
function coachShareAudio(itok)
{
var OV = new OpenVidu();
OV.setAdvancedConfiguration( { screenShareChromeExtension: "https://chrome.google.com/webstore/detail/NO_MATTER/oepfjjienbhamdaojclkddcknibnikmi" } );
var sessionScreen = OV.initSession();
sessionScreen.connect(itok).then(() => {
var publisher = OV.initPublisher("coachSound", { 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);
}));
}
This bit
OV.setAdvancedConfiguration( { screenShareChromeExtension: "https://chrome.google.com/webstore/detail/NO_MATTER/oepfjjienbhamdaojclkddcknibnikmi" } );
seems to have no effect at all, but it is the suggested way of calling a custom extension when using the openvidu-browser.js script. Have I missed a step? Even if I put in an incorrect uri for the extension to see if i could get an error like ‘NOT_FOUND’ or whatever, I don’t get any error, it just uses the default screenshare pop-up.
The extension is installed in my browser, but not published in the google extension gallery. I’m assuming this isn’t necessary. It does show up as coloured saying that it has access to the site. I think the issue is that my script isn’t calling it correctly.
Hi,
OpenVidu Chrome ScreenSharing extension is outdated and deprecated. It was required to be able to capture the screen in old Chrome versions, but it has been natively supported for several years now. THe official OpenVidu extension was provided as a default option, but it was possible to customize it a little bit to show other image or description. But this whole extension system was not intended to implement other extra features as you tried to do.
To sum up: there’s no need of an extension to screen share in OpenVidu for a long time. If you need other features only available through extensions, you must implement it and distribute it on your own.
Regards.
Hi Pablo,
Yes, I’m aware that there’s no need for a screen sharing extension. The problem is that no audio is shared using the default screensharing functionality of Openvidu, and this is a requirement I have. So from reading all about how others had achieved it, a custom extension appeared to the be way it was done.
It is possible to capture the audio of the PC in open vidu? - Pablo, you contributed to this thread
https://github.com/OpenVidu/openvidu/issues/389 - Pablo, you’re also contributing here!
There’s plenty of posts with bits of useful information on how to share the computers sound (not mic) through the screenshare method, but no complete example code.
So I’m aware that I need to develop the extension myself, which I’ve done, but the method for getting Openvidu to use the extension:
OV.setAdvancedConfiguration( { screenShareChromeExtension: "https://chrome.google.com/webstore/detail/NO_MATTER/oepfjjienbhamdaojclkddcknibnikmi" } );
seems to have no effect.
I was hoping someone would be able to tell me what I’ve done wrong. Others seem to have got this working, but as I said, there’s no complete code examples anywhere. It does seem to be a common request though. Be great if there was a clear method for achieving it.
nb. I currently have screen sharing working on my app. It uses a separate token (but same sessionid) so that the person sharing their screen can also publish from their cam and mic. It works. Other users can see the screen. But ultimately what I want to implement is the sharer sharing their computer audio separately from their mic. I don’t have computer audio because my openvidu script isn’t using the extension I created, which is supposed have a checkbox for sharing audio.
How to share screen with audio option enabled? - The same use case I have, but with no clear example code
https://github.com/OpenVidu/openvidu/issues/194 - this extension, which I’ve made
Once I have the checkbox, I may have more work to do for the method to use the audioStream, but one step at a time (unless you know of a full example I can look at)
I still don’t think you need an extension to capture the audio of the system.
Just use navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
That would be really great if I don’t need an extension! I’m afraid I’m not sure what to do with that line of code.
I’m working with the default openvidu-browser.js file and my app.js file. I don’t suppose you could tell me what I need to change to get this working
I have my coachShareAudio function (which you can see in my original post) in my app.js that is working for sharing the screen (without audio) and I have my untouched openvidu-browser.js file which has references to
navigator.mediaDevices
but not
navigator.mediaDevices.getDisplayMedia
so I’m not sure where I need to put your code.
If you could tell me what I need to change to either file to get this working it would be very much appreciated.
Thank you so much for your assistance so far!
Sure. openvidu-browser is just a simple wrapper around standard Web API. OpenVidu.initPublisher is an easier way of calling getUserMedia.
When calling OpenVidu.initPublisher, you can pass a MediaStreamTrack as audioSource or videoSource. This way you can provide whatever audio or video track you want to the Publisher object. navigator.mediaDevices.getDisplayMedia provides you with a MediaStream object, from which you can take the videtrack and the audiotrack. Just look up the Web API documentation.
Regards.
Pablo,
I’m hoping you can help get my over the finish line. Thanks to your suggestions, I was able to create a mediastream. Here’s my function (that appears to work and uses a separate token so that the admin can publish their video/mic as well as screen with audio.
function coachShareAudio(itok)
{
var speaker = new MediaStream;
if (navigator.getDisplayMedia) {
navigator.getDisplayMedia({
video: true ,
audio: true
}).then(stream => {
speaker.addTrack(stream.getAudioTracks()[0].clone());
// stopping and removing the video track to enhance the performance
stream.getVideoTracks()[0].stop();
stream.removeTrack(stream.getVideoTracks()[0]);
}).catch(() => {
console.error('failed')
});
} else if (navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({
video: true ,
audio: true
}).then(stream => {
speaker.addTrack(stream.getAudioTracks()[0].clone());
// stopping and removing the video track to enhance the performance
stream.getVideoTracks()[0].stop();
stream.removeTrack(stream.getVideoTracks()[0]);
}).catch(() => {
console.error('failed')
});
}
var sessionScreen = OV.initSession();
sessionScreen.connect(itok).then(() => {
var publisher = OV.initPublisher("coachSound", { videoSource: speaker , audioSource: speaker });
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);
}));
}
So this appears to work. Then I needed to add the session.on(‘streamcreated’, event that adds the screenshare and audio for the other users. I noticed that the event.stream.frameRate was undefined for the screenshare object, so I used that to tell it to put the stream in a certain div (rather than the usual behaviour for webcam streams)
session.on('streamCreated', (event) => {
// Subscribe to the Stream to receive it
if(event.stream.frameRate == undefined)
{
if(!isCoach)
{
session.subscribe(event.stream, 'coachSound');
}
}
else{
...
But what gets put into the couchSound div is not the screenshare (which I think is supposed to be blank because the video is stopped in the function)- it’s the webcam. I’m a little confused about why I’m putting
OV.initPublisher("coachSound",
when it seems I have to set the div in the
session.on('streamCreated', (event)
for it to be added to the page anyway
If you’re able to tell why it’s not adding the screenshare, but rather the webcam object already published, that would be great.
nb. Do you have a way i can buy you a coffee for your time? I really do appreciate it!
Hello,
I think this is wrong:
var speaker = new MediaStream();
OV.initPublisher("coachSound", { videoSource: speaker , audioSource: speaker });
videoSource and audioSource properties cannot be of type “MediaStream”. They must be of type MediaStreamTrack:
var speaker = new MediaStream();
OV.initPublisher("coachSound", { videoSource: speaker.getVideoTracks()[0], audioSource: speaker.getAudioTracks()[0] });
This is documented in OpenVidu Browser reference API: https://docs.openvidu.io/en/2.15.0/api/openvidu-browser/interfaces/publisherproperties.html#videosource
If you’d like to contribute, you can make a one-time donation on open collective 
Cheers!