I was wondering what is the best way to not display video right after calling getUserMedia(); with WebRTC. Many tutorials seem to have you display video immediately, but for real use-cases, it often makes sense to not display video until the user presses a button.
I am not sure how most apps handle this, but currently, I am thinking that perhaps it is possible to accomplish this with styling by not displaying the video element on the page until the user presses a button, but that would mean that the stream would technically be "on", just not displayed on the page. So, I was wondering if there was a way using JS to maybe set or access the stream later when pressing a button.
It seems like when using getUserMedia(); that the stream has to be set and stored immediately (below is code from the Google Code Lab) so I am not sure if this is not possible.
// Local stream that will be reproduced on the video.
let localStream;
// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
Simply don't display it.
You can keep that stream in your variable. Just don't assign it as the srcObject on a video element.