切换前置罕见摄像头时，HTML5 视频元素请求永远保持挂起状态（在移动设备上的 chrome 上）

Posted 2023-05-07

【中文标题】切换前置罕见摄像头时，HTML5 视频元素请求永远保持挂起状态（在移动设备上的 chrome 上）

【英文标题】：HTML5 video element request stay pending forever (on chrome in mobile) when toggle over front-rare camera

【发布时间】：2021-09-01 04:03:23

【问题描述】：

我正在开发一个应用程序，用户可以在其中使用前置/稀有摄像头拍摄照片。它工作得很好，但是当切换摄像头前端/罕见的 var playPromise = videoStream.play() 时，它处于挂起状态。有时承诺得到解决，相机工作有时不。

这个问题只出现在 chrome 浏览器中，而不是 mozila 和 firefox 中

       try 
            stopWebCam(); // stop media stream when toggle over camera
            stream = await navigator.mediaDevices.getUserMedia(video: true);
            /* use the stream */
            let videoStream = document.getElementById('captureCandidateId');
            videoStream.srcObject = stream;

                // videoStream.play();
                var playPromise = videoStream.play();

                if (playPromise !== undefined) 
                  playPromise.then(_ => 
                    // Automatic playback started!
                    // Show playing UI.
                                 
                  )
                  .catch(error => 
                    // Auto-play was prevented
                    // Show paused UI.
                  );
                

                                ;
         catch(err) 
            /* handle the error */
            
            console.log(err.name + ": " + err.message);
        

    let stopWebCam = function (pictureType) 

    setTimeout(()=>
        let videoStream = document.getElementById('captureCandidateId');
        const stream = videoStream.srcObject;
        if (stream && stream.getTracks) 
            const tracks = stream.getTracks();
            tracks.forEach(function(track) 
                track.stop();
            );
        
        videoStream.srcObject = null;
      , 0)
    

【参考方案1】：

在这里，我为您起草了一段代码，这比您尝试做的方法更简单、更小。我只是从视频元素中获取流并将其绘制到画布上。图片可以右键下载。 注意：示例在 *** 中不起作用

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
  const player = document.getElementById('player');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const captureButton = document.getElementById('capture');

  const constraints = 
    video: true,
  ;

  captureButton.addEventListener('click', () => 
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
  );

  // Attach the video stream to the video element and autoplay.
  navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => 
      player.srcObject = stream;
    );
</script>

如果你愿意，你也可以根据自己的需要进行一些编辑，比如：

选择要使用的相机 隐藏视频流 添加一种更简单的方法来将照片下载到您的设备上 您还可以添加一项功能，将照片直接上传到服务器（如果有的话）

【讨论】：

此问题仅在 chrome 浏览器中出现