Fatal编程技术网
  • javascript/
  • Javascript 如何在同一视频标签中传输不同的摄像机

Javascript 如何在同一视频标签中传输不同的摄像机

javascript jquery html video

Javascript 如何在同一视频标签中传输不同的摄像机,javascript,jquery,html,video,Javascript,Jquery,Html,Video,当我点击一台摄像机时，我的电脑中有一个不同摄像机的列表，它显示在视频标签中，然后在我点击列表中的另一台摄像机后，它显示在流媒体中的新视频标签，但问题是我想在第一次显示的同一视频中显示视频流 我的代码： <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <t

当我点击一台摄像机时，我的电脑中有一个不同摄像机的列表，它显示在视频标签中，然后在我点击列表中的另一台摄像机后，它显示在流媒体中的新视频标签，但问题是我想在第一次显示的同一视频中显示视频流

我的代码：

<!DOCTYPE html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Video Camera List</title>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>

      <style type="text/css" media="screen">
        video {
          border:1px solid gray;
        }
      </style>
  </head>
  <body>
    <script>
      if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';

      var videoSources = [];

      MediaStreamTrack.getSources(function(media_sources) {
        console.log(media_sources);
    //  alert('media_sources : '+media_sources);
        media_sources.forEach(function(media_source){
          if (media_source.kind === 'video') {
            videoSources.push(media_source);
          }
        });

        getMediaSource(videoSources);
      });

      var get_and_show_media = function(id) {
        var constraints = {};
        constraints.video = {
          optional: [{ sourceId: id}]
        };

        navigator.webkitGetUserMedia(constraints, function(stream) {
          console.log('webkitGetUserMedia');
          console.log(constraints);
          console.log(stream);

          var mediaElement = document.createElement('video');
          mediaElement.src = window.URL.createObjectURL(stream);
          document.body.appendChild(mediaElement);
          mediaElement.controls = true;
          mediaElement.play();

        }, function (e) 
        {
       //   alert('Hii');  
          document.body.appendChild(document.createElement('hr'));
          var strong = document.createElement('strong');
          strong.innerHTML = JSON.stringify(e);
          alert('strong.innerHTML : '+strong.innerHTML);
          document.body.appendChild(strong);
        });
      };

      var getMediaSource = function(media) {
        console.log(media);
        media.forEach(function(media_source) {
          if (!media_source) return;

          if (media_source.kind === 'video') 
          {
            // add buttons for each media item
            var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
            $("body").append(button);
            // show video on click
            $(document).on("click", "#"+media_source.id, function(e){
              console.log(e);
              console.log(media_source.id);
              get_and_show_media(media_source.id);
            });
          }
        });
      }
    </script>
  </body>
</html>


摄像机列表
录像带{
边框：1px纯色灰色；
}
如果检测到（！MediaStreamTrack）document.body.innerHTML='浏览器不兼容。试试铬金丝雀；
var视频源=[]；
MediaStreamTrack.getSources（函数（媒体源）{
控制台日志（媒体源）；
//警报（“媒体来源：”+媒体来源）；
媒体源。forEach（函数（媒体源）{
如果（媒体_source.kind==‘视频’）{
视频源。推送（媒体源）；
}
});
getMediaSource（视频源）；
});
var get_和_show_media=函数（id）{
var约束={}；
限制条件。视频={
可选：[{sourceId:id}]
};
webkitGetUserMedia（约束、函数（流）{
log（'webkitGetUserMedia'）；
console.log（约束）；
console.log（流）；
var mediaElement=document.createElement（'video'）；
mediaElement.src=window.URL.createObjectURL（流）；
document.body.appendChild（mediaElement）；
mediaElement.controls=true；
mediaElement.play（）；
}，功能（e）
{
//警报（“Hii”）；
document.body.appendChild（document.createElement（'hr'））；
var strong=document.createElement（'strong'）；
strong.innerHTML=JSON.stringify（e）；
警报（'strong.innerHTML:'+strong.innerHTML）；
document.body.appendChild（强）；
});
};
var getMediaSource=函数（媒体）{
控制台日志（媒体）；
media.forEach（函数（媒体源）{
如果（！media_source）返回；
如果（媒体_source.kind==‘视频’）
{
//为每个媒体项添加按钮
var按钮=$（''，{id:media\u source.id，值：media\u source.id，类型：'submit'}）；
$（“正文”）。附加（按钮）；
//点击显示视频
$（document）.on（“click”、“#”+media_source.id，函数（e）{
控制台日志（e）；
console.log（media_source.id）；
获取和显示媒体（media\u source.id）；
});
}
});
}
这完全是猜测，因为我不流视频，但这似乎是合理的jQuery，所以请更改

var mediaElement = document.createElement('video');
mediaElement.src = window.URL.createObjectURL(stream);
document.body.appendChild(mediaElement);
mediaElement.controls = true;
mediaElement.play();
对此

var mediaElement = $('video');
if(mediaElement.length ==0) {
    mediaElement = document.createElement('video');
    mediaElement.controls = true;
    mediaElement.autoplay = true;
    mediaElement.src = window.URL.createObjectURL(stream);
    document.body.appendChild(mediaElement);
} else {
    mediaElement.attr('src', window.URL.createObjectURL(stream));
    mediaElement.attr('autoplay', true);
    mediaElement.load();
}
从未处理过视频，所以我想这只是一个建议，如果你有一个摄像头列表的点击处理程序，为什么不先在该处理程序中使用$（“视频”）删除页面中已经存在的视频。删除（）？我想在相同的视频标签或相同的idOK中播放视频，上面的代码允许我在Chrome中切换视频流，因此，如果您认为它以前工作过但创建了多个窗口是正确的，那么在创建第一个窗口后，现在它将继续在同一个窗口中打开