[Camera Preview] How can I Preview Camera while Meeting running

[mrnav90]

Hi @ltrung

We have new implement change device while meeting running. While meeting, we have a button open Modal Camera Preview. In the modal we can change camera device or audio device, my client want to preview camera before change.

I also thinking we will use MediaStream Track for video preview but I want to use Chime SDK API for this. For future, we also implement virtual background preview while meeting.

Could you help me support this feature. Many thanks.

[devalevenkatesh]

Currently, you will be able to do so but two video stream one for the local video and one for preview video do not work simultaneously once stopped, hence if you can start the preview video or the local video but when stopping one the other will stop as well.

The JS SDK has APIs to start/stop the video preview if you have already provided the video permissions to browser and have chose a valid video input device.

audioVideo.startVideoPreviewForVideoInput(<HTMLVideoElement>)
audioVideo.stopVideoPreviewForVideoInput(<HTMLVideoElement>)

You would have to stop local video tile using stopLocalVideoTile() and then start the video preview and again stop video preview and then start local video using startLocalVideoTile() if you want to use the local video tile and preview on the same page. While user tests preview video you can disable start/stop of local video as well. I am not sure though this workaround or step will work fine completely. As of now we have a github issue tracking this in our react library as well https://github.com/aws/amazon-chime-sdk-component-library-react/issues/434.

[majo35-6c]

@mrnav90 it is possible to use startVideoPreviewForVideoInput without creating a meeting session or hit the back end. You can initialize the DefaultDeviceController without initialize the meeting session.

After that you can call chooseVideoInputDevice and startVideoPreviewForVideoInput to show video preview.

//Initialize DefaultDeviceController
const deviceController = new DefaultDeviceController(this.logger, { enableWebAudio: true });

//List the video device list
deviceList = await deviceController.listVideoInputDevices();

//Choose video device
deviceController.chooseVideoInputDevice(deviceList[0].deviceId);

//Grab the video element
const videoElement = document.getElementById('video-preview') as HTMLVideoElement;

//Start video preview
deviceController.startVideoPreviewForVideoInput(videoElement);

[mrnav90]

@majo35-6c I've tried your solution, it's not working ...

[ArtemZakharchuk]

@mrnav90 This solution works for me. I have 2 deviceControllers instances of DefaultDeviceController. One I use for managing preview webcam and second for "regular" webcam.

[alireza-farokhi]

Currently, you will be able to do so but two video stream one for the local video and one for preview video do not work simultaneously once stopped, hence if you can start the preview video or the local video but when stopping one the other will stop as well.

The JS SDK has APIs to start/stop the video preview if you have already provided the video permissions to browser and have chose a valid video input device.

audioVideo.startVideoPreviewForVideoInput(<HTMLVideoElement>)
audioVideo.stopVideoPreviewForVideoInput(<HTMLVideoElement>)

You would have to stop local video tile using stopLocalVideoTile() and then start the video preview and again stop video preview and then start local video using startLocalVideoTile() if you want to use the local video tile and preview on the same page. While user tests preview video you can disable start/stop of local video as well. I am not sure though this workaround or step will work fine completely. As of now we have a github issue tracking this in our react library as well aws/amazon-chime-sdk-component-library-react#434.

just to mention, in the latest version of the SDK (3 i guess), there is not chooseVideoInputDevice API, i used:

await deviceController.startVideoInput(videoInputDevice); deviceController.startVideoPreviewForVideoInput(VideoElement);