如何将我的浏览器上播放的实时视频流式传输到其他用户的浏览器

How to stream, live video playing on my browser to browser of another user?

本文关键字：浏览器 传输 其他 用户 实时视频 我的 播放      更新时间：2023-09-26

我正在尝试使用WebRTC和HTML 5来实现这一点。我对WebRTC很陌生。因此，为了完成任务，我尝试使用getUserMedia作为示例来显示我的浏览器正在播放的视频。

作为实验，现在，播放视频和该视频的实时流位于同一 html 页面上。

我的 HTML 代码如下：

<div id="video_player_box">
  <video id="my_video" width="1100" height="600" >
    <source src="path/to/my/video/">
  </video>
</div>
<div id="container">
  <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> getUserMedia</h1>
  <video autoplay></video>
  <p>The <code>MediaStream</code> object <code>stream</code> passed to the <code>getUserMedia()</code> callback in this demo is in global scope, so you can inspect it from the console.</p>
</div>

我正在像这样采购 js：

'use strict';
navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {
  audio: false,
  video: true
};
var video = document.getElementById("my_video");
function successCallback(stream) {
  window.stream = stream; // stream available to console
  video.src = document.getElementById("my_video");
}
function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);

谁能帮我解决这个问题，告诉我我是否朝着正确的方向前进？或者我应该使用其他方法。因为这直到现在还没有奏效。我仍在阅读有关WebRTC的文章。

注意：我不想使用他们的（webrtc）屏幕共享方法来实现此功能

您应该将video.src = document.getElementById("my_video");替换为 video.src = window.URL.createObjectURL(stream); 。

相关文章：