WebRTC getUserMedia加载时淡入

Question

I am using webRTC like this to display a webcam

streamnavigator.mediaDevices.getUserMedia({

    video: {
        facingMode: "user",
    }

}).then(function (stream) {

    var video = document.getElementById('cam-stream');
    video.srcObject = stream;

}).catch( function (error) {

    console.log("Camera Stream Error : " + error.name + " - " + error.message);

});

I am wanting to fade the video in once it is has been loaded, adding a fadetoggle to the video element fades it in before the video has started displaying.

Is there any sort of callback I can use to only fade in once the stream has loaded and is displaying?

Answer 1

video.onloadeddata = () => console.log('loaded data');

should do the trick. See the MDN documentation .