从网络服务器摄像机记录

问题描述

我正在使用ESP32相机，并使用内置的Web服务器将视频流式传输到浏览器。我想在浏览器中记录视频流，而我正在研究的一种技术是getUserMedia / MediaRecorder。但是，看起来getUserMedia仅看到直接连接到PC的设备，因此找不到输入设备。

那么，如何指定Web服务器作为视频源？

  const startStream = () => {
view.src = `${streamUrl}/stream`
show(viewContainer)
streamButton.innerHTML = 'Stop Stream'  }

9月6日：

我已经从示例中获取了代码，并将其添加到cam src中，但这没有显示或记录任何内容：

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Train Cam</title>
    <video width="300" id="vid"  src="http://192.168.1.194:81/stream" autoplay controls></video>
    <video width="300" id="result" style="display: none" controls></video>
    <button id="start">Start recording</button>
    <button id="stop">Stop recording</button>
  </head>
  <script>
    const video = document.querySelector('#vid')
    const result = document.querySelector('#result')
    const startButton = document.querySelector('#start')
    const stopButton = document.querySelector('#stop')
    const chunks = []

    video.addEventListener('play',() => {
      const recorder = new MediaRecorder(video.captureStream())

    startButton.addEventListener('click',() => {
      recorder.start()
    })

    stopButton.addEventListener('click',() => {
      recorder.stop()
    })

    recorder.ondataavailable = (e) => {
      chunks.push(e.data)
    }

    recorder.onstop = () => {
      const blob = new Blob(chunks,{ type: 'video/mp4' })
      const url = URL.createObjectURL(blob)
      result.src = url;
      result.style.display = 'block'
    }
    })


  </script>
 </html>

我认为以下代码是可以显示凸轮流的现有代码的相关部分：

     <figure>
      <div id="stream-container" class="image-container hidden">
        <div class="close" id="close-stream">×</div>
        <img id="stream" src="" />
      </div>
    </figure>
    
    var streamUrl = baseHost + ":81";
    
    const view = document.getElementById("stream");
    const viewContainer = document.getElementById("stream-container");
    const streamButton = document.getElementById("toggle-stream");
    
    const startStream = () => {
      view.src = `${streamUrl}/stream`;
      show(viewContainer);
      streamButton.innerHTML = "Stop Stream";
    };

    streamButton.onclick = () => {
      const streamEnabled = streamButton.innerHTML === "Stop Stream";
      if (streamEnabled) {
        stopStream();
      } else {
        startStream();
      }
    };

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

esp32 html javascript