如何实现WebRTC getUserMedia视频流加载显示后淡入效果？

你说得对，直接给video元素加淡入效果确实会提前触发——这时候视频流还没真正渲染出画面，自然达不到预期效果。要等视频流实际加载并显示出画面后再执行动画，我们可以利用video元素的原生事件来精准控制时机，这里推荐两个靠谱的方案：

1. 使用loadedmetadata事件 #

这个事件会在视频的元数据（比如分辨率、时长）加载完成时触发，意味着视频已经准备好开始渲染内容了：

navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then(function (stream) {
    var video = document.getElementById('cam-stream');
    // 初始先隐藏视频元素，为淡入做准备
    video.style.opacity = '0';
    video.style.transition = 'opacity 0.5s ease-in-out';
    
    video.srcObject = stream;
    
    // 监听元数据加载完成事件
    video.addEventListener('loadedmetadata', function() {
      // 执行淡入效果
      video.style.opacity = '1';
      // 如果用jQuery的话可以写：$(video).fadeIn(500);
    });
  })
  .catch(function (error) {
    console.log("Camera Stream Error : " + error.name + " - " + error.message);
  });

2. 使用playing事件（更稳妥） #

如果担心某些设备上元数据加载完成但画面还没实际渲染出来，可以用playing事件——它会在视频真正开始播放并渲染出第一帧画面时触发，时机更精准：

navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then(function (stream) {
    var video = document.getElementById('cam-stream');
    video.style.opacity = '0';
    video.style.transition = 'opacity 0.5s ease-in-out';
    
    video.srcObject = stream;
    
    video.addEventListener('playing', function() {
      // 执行淡入效果
      video.style.opacity = '1';
    });
  })
  .catch(function (error) {
    console.log("Camera Stream Error : " + error.name + " - " + error.message);
  });

小提示 #

• 一定要提前把video元素设置为隐藏状态（比如opacity:0或者display:none），不然淡入效果会毫无意义。
• 如果你用jQuery，建议用fadeIn()替代fadeToggle()，避免因元素初始状态不确定导致的动画异常。

内容的提问来源于stack exchange，提问作者fightstarr20