Good evening, I’m trying to bring my personalization to a page I’m working on and using the webcomponent 2.12.
I would like to change the camera during the video conversation.
do you have any suggestions for me?
Thank you
Andrea
Hello @andrea.bussotti,
Nowadays, the webcomponent doesn’t support switch the cameras during the videoconferences but it can do it.
You would have to get your available devices and replace the current videotrack with the new videotrack.
You can read how to get your current devices and how to switch the camera
Regards
Hello @CSantosM ,
thanks for your answer, currently my only problem is to replace the videotrack with the current one.
I can read my devices and celebrate them dynamically.
I can manage the switch but not the application of the new camera in the current webcomponent.
For the rest I have solved all aspects.
So I was trying to go back to the current publisher to make a replace in some way.
Tips for replacing?
tnks
Regards
Hi,
openvidu-webcomponent is based on OpenVidu Call. To add new features like switch cameras during the videoconference, you need to develop the switch camera feature during the video call in OpenVidu Call and build the openvidu-component again.
1 Like
Good morning,
I have managed to implement it and would like to build it to produce a new version of openvidu-webcomponent-2.xx.0.js.
I can’t find the command to generate the new version, can you help me in this, please?
how can I do?
tnks
regards
“openvidu-webcomponent-2.xx.0.js ???”
Hi,
We don’t have docummented it yet but we will.
You can build your webcomponent executing the following command in the OpenVidu Call root path project:
npm run build:openvidu-webcomponent
This command will generate the files.
Regards 
1 Like
Hello @CSantosM ,
thanks for your answer…
but i have this result:
npm run build:openvidu-webcomponent
openvidu-call@2.12.0 build:openvidu-webcomponent C:\Users\nameComputer\workspace\openvidu-call-master\front\openvidu-call
node -e “require(‘./openvidu-webcomponent-build.js’).prepareWebcomponent()” && ./node modules/@angular/cli/bin/ng build --prod --output-hashing none && node -e “require(‘./openvidu-webcomponent-build.js’).buildWebcomponent()”
Preparing webcomponent files …
“.” non è riconosciuto come comando interno o esterno,
un programma eseguibile o un file batch.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! openvidu-call@2.12.0 build:openvidu-webcomponent: node -e "require('./openvidu-webcomponent-build.js').prepareWebcomponent()" && ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none && node -e "require('./openvidu-webcomponent-build.js').buildWebcomponent()"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the openvidu-call@2.12.0 build:openvidu-webcomponent script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nameComputer\AppData\Roaming\npm-cache_logs\2020-03-24T13_55_18_102Z-debug.log
Hello @andrea.bussotti
I just executed the command and it works fine in Ubuntu.
I think that you have troubles with the paths because of you’re working in Windows.
“.” “” is not recognized as an internal or external command,
You should modify the commands slashes and paths to make it works in Windows
Good evening @CSantosM ,
after some difficulties I succeeded in the intent of the buold.
I’m asking for technical support to replace the current video input with the alternative video input
I have myTrack, but I can’t define myPublisher, can you help me understand how to take it?
or alternatively how can I replace the current room with another?
I’m working on “video-room.component.ts”
example:
devices = [{deviceId: “eacf60a5c2beec0d2bca7dca8e83e7439da2f05318fc61c61719ae2e0212ba32”
groupId: “39917413b814e05bba592fcf8c6316176733067b9f91b4a09bbe0c8a57ba5857”
kind: “videoinput”
label: “HD Camera (0408: 5273)”},
{deviceId: “eacf60a5c2beec0d2bca7kca8e83e7439ba2f05318fc61c61712ae2e0212ba32”
groupId: “39917413b814e05bba592fcf8c6316176733067b9f91b4a09bbe0c8a57ba5857”
kind: “videoinput”
label: “HD Camera (0408: 5271)”}]
tnks
regards
Hello @andrea.bussotti,
We’re working and updating OpenVidu Call. We’ll add this feature in the future. However, if you can’t wait, you should do the following:
- Swith the camera using replaceTrack or initialice a new publisher. You can know how to do this here
You can access to the publisher with :
const publisher = <Publisher>this.localUsers[0].getStreamManager();
After you have the new track or the new publisher, you have to do the following:
With new track:
(<Publisher>this.localUsers[0].getStreamManager()).replaceTrack(track);
With new publisher:
this.localUsers[0].setStreamManager(publisher);
Regards.
1 Like
thank you very much
I try the suggested implementation.
regards
Good morning,
I implemented the suggested switch functionality but it doesn’t work with all mobile devices.
My function implemented:
toggleSwitchCam(): void {
//// Get the environment camera (usually the second one)
navigator.mediaDevices.enumerateDevices().then(devices => {
const cameras = devices.filter((device) => device.kind === 'videoinput');
if (cameras.length === 0) {
throw 'No camera found on this device.';
}
if (cameras.length > 1) {
this.localUsers[0].setFrontCamera(!this.localUsers[0].isFrontCamera());
}
const camera = cameras[this.localUsers[0].isFrontCamera() ? 0 : 1]; // 0 camera front, 1 camera back
setTimeout(() => {
// Create stream and get video track
navigator.mediaDevices.getUserMedia({
video: {
deviceId: camera.deviceId,
facingMode: ['user', 'environment'],
height: {ideal: 1080},
width: {ideal: 1920}
}
}).then(stream => {
const track = stream.getVideoTracks()[0];
//let there be light!
setTimeout(() => {
(<Publisher>this.localUsers[0].getStreamManager()).replaceTrack(track);
}, 500);
});
}, 500);
});
}
Also I need to also implement the on / off functionality of the flashlight but I have seen that
track.applyConstraints ({advanced: [{torch: true}]});
or
track.applyConstraints ({advanced: [{torch: false}]});
is not supported by current libraries, is there a working element that I can use alternatively?
tnks
regards
As you can imagine, the APIs you are using are not under control of OpenVidu team. Method Publisher.replaceTrack is actually an openvidu-browser method, but it is only a very simple wrapper around native Web API RTCRtpSender.replaceTrack method (which according to offical documentation is widely supported by different clients).
Same with the torch thing. "I have seen that ... is not supported by current libraries": that is not really the case. You can still access this native Web API method accessing the native MediaStream object (and getting its video tracks) through openvidu-browser method Stream.getMediaStream().
To sum everything up: openvidu-browser Publisher object is just a wrapper to simplify the most common cases for initializing a MediaStream. But you can always use everything that official native Web API offers, accessing the native Web API objects under the hood of openvidu-browser objects. If something doesn’t work, unless its a bug in the logic of openvidu-browser, it is very possible that it is in fact a limitation on the native Web API support of clients, where we cannot really do much.
Regards
1 Like