带位置链接的视频流

Question

window.onload = function() {

  // Video
  var video = document.getElementById("video");
  // Buttons
  var playButton = document.getElementById("play-pause");
  // Sliders
  var seekBar = document.getElementById("seek-bar");

}

// Event listener for the play/pause button
playButton.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();
    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } else {
    // Pause the video
    video.pause();
    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});

// Event listener for the seek bar
seekBar.addEventListener("change", function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);
  // Update the video time
  video.currentTime = time;
});

// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
  // Calculate the slider value
  var value = (100 / video.duration) * video.currentTime;
  // Update the slider value
  seekBar.value = value;
});

// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
  video.pause();
});

// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
  video.play();
});

<video id="video" controls autoplay>
	<source src=http://localhost:8090/feed1.webm> 
</video>

<div id="video-controls">
	<button type="button" id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
</div>

我正在尝试将视频流以及将与HTML画布映射的坐标一起发送到网站。我必须能够在流中来回滚动并显示每个帧的坐标。我有视频实时流式传输，并使用外部搜索栏显示坐标，但是它无法控制视频。没有尝试过obs和ffmpeg的最佳流应用程序是什么？如何获得搜索栏来控制视频？