如何在MacBook Pro上使用webRTC进行外部网络摄像头的实时流式传输

时间:2018-01-17 11:06:02

标签: javascript video-streaming html5-video webrtc

我必须创建一个直播视频应用程序,我必须使用连接到MacBook的外部网络摄像头阅读视频。我必须使用WebRTC这样做。但在执行代码时,集成网络摄像头会被触发而不是外部网络摄像头。

var video = document.querySelector("#videoElement");
var constraints = { audio:true,video: { facingMode:"environment" } 

var promise = navigator.mediaDevices.getUserMedia(constraints);

promise.then(function(mediaStream) {

  video.srcObject = mediaStream;

  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {

  console.log(err.name + ": " + err.message);


 });

如何触发连接的外置网络摄像头?

2 个答案:

答案 0 :(得分:1)

你应该看看https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API

这一个https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

if (typeof MediaStreamTrack === 'undefined'){
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
  MediaStreamTrack.getSources( onSourcesAcquired);
}

function onSourcesAcquired(sources) {
  for (var i = 0; i != sources.length; ++i) {
    var source = sources[i];
    // source.id -> DEVICE ID
    // source.label -> DEVICE NAME
    // source.kind = "audio" OR "video"
    // TODO: add this to some datastructure of yours or a selection dialog
  }
}

....

constraints = {
  audio: {
    optional: [{sourceId: selected_audio_source_id}]
  },
  video: {
    optional: [{sourceId: selected_video_source_id}]
  }
};
navigator.getUserMedia(constraints, onSuccessCallback, onErrorCallback);

答案 1 :(得分:1)

https://webrtc.github.io/samples/src/content/devices/input-output/是如何选择设备的典型示例,演示了enumerateDevices()和getUserMedia()