softphone - webrtc javascript

Cambiar un MediaStream de RTCPeerConnection

Question

Quiero cambiar de una transmisión de audio / video a una transmisión de "pantalla compartida":

peerConnection.removeStream(streamA) // __o_j_sep... in Screenshots below
peerConnection.addStream(streamB)  // SSTREAM in Screenshots below

• streamA es una streamA video / audio proveniente de mi cámara y mi micrófono.
• streamB es la captura de pantalla que obtengo de mi extensión.
• Ambos son objetos MediaStream que se ven así:

* 1 observación

Pero si streamA de peerConnection y addStream(streamB) como arriba nada parece suceder.

El siguiente funciona como se espera (el flujo en ambos extremos se elimina y se vuelve a agregar)

peerConnection.removeStream(streamA) // __o_j_sep...
peerConnection.addStream(streamA) // __o_j_sep...

Más detalles

He encontrado este ejemplo que hace "lo contrario" (Cambiar de captura de pantalla a audio / video con cámara) pero no puede detectar una diferencia significativa.

El objeto peerConnection RTCPeerConnection es creado en realidad por este código fuente de la biblioteca SIPML disponible aquí . Y lo accedo así:

var peerConnection = stack.o_stack.o_layer_dialog.ao_dialogs[1].o_msession_mgr.ao_sessions[0].o_pc

(Sí, esto no se ve bien, pero no hay una forma oficial de obtener acceso a la Conexión entre pares, vea la discusión aquí ) y aquí .

Originalmente traté de simplemente (ex) cambiar los videoTracks de streamA con el videoTrack de streamB . Vea la pregunta aquí . Se me sugirió que debería intentar renegociar la Peer Connection (quitando / añadiendo Streams), porque addTrack no desencadena una renegociación .

También he pedido ayuda aquí, pero el mantenedor parece estar muy ocupado y no tuve la oportunidad de responder todavía.

* 1 Observación: ¿Por qué streamB no tiene una propiedad de videoTracks ? La transmisión se reproduce en un elemento HTML <video> y parece "funcionar". Así es como lo entiendo:

navigator.webkitGetUserMedia({
  audio: false,
  video: {
    mandatory: {
      chromeMediaSource:  ''desktop'',
      chromeMediaSourceId: streamId,
      maxWidth: window.screen.width,
      maxHeight: window.screen.height
      //,   maxFrameRate: 3
    }
  }
  // success callback
}, function(localMediaStream) {
  SSTREAM = localMediaStream; //streamB

  // fail callback
}, function(error) {
  console.log(error);
});

también parece tener un videoTrack :

Estoy corriendo:

• OS X 10.9.3
• Versión de Chrome 35.0.1916.153

Answer 1

Para responder a su primera pregunta, al modificar MediaStream en una conexión de peer activa, el objeto de conexión de peer iniciará un evento de onnegotiationneeded . Necesita manejar ese evento y volver a intercambiar sus SDP. La razón principal detrás de esto es para que ambas partes sepan qué flujos se envían entre ellos. Cuando se intercambian los SDP, se incluye la ID de mediaStream, y si hay una nueva transmisión con una nueva ID (evento con todos los demás elementos iguales), debe producirse una renegociación.

Para su segunda pregunta (sobre SSTREAM ). De hecho, contiene pistas de video, pero no hay ningún atributo webkitMediaStreams para webkitMediaStreams . Sin embargo, puedes tomar pistas a través de su ID.

Dado que existe la posibilidad de tener numerosas pistas para cada tipo de medio, no hay un solo atributo para un videotrack o audiotrack, sino una matriz de tales. La llamada .getVideoTracks() devuelve una matriz de videoTracks actual. Por lo tanto, PODRÍA tomar una pista de video en particular indicando su índice .getVideoTracks()[0] .

Answer 2

Hago algo similar, al hacer clic en un botón, elimino el flujo activo y agrego el otro.

Esta es la forma en que lo hago y me funciona a la perfección,

_this.rtc.localstream.stop();
_this.rtc.pc.removeStream(_this.rtc.localstream);

gotStream = function (localstream_aud){
var constraints_audio={
    audio:true
   }

_this.rtc.localstream_aud = localstream_aud;
_this.rtc.mediaConstraints= constraints_audio;   
_this.rtc.createOffer();
}
getUserMedia(constraints_audio, gotStream);

gotStream = function (localstream){
var constraints_screen={
        audio:false,
        video:{
            mandatory:{
                chromeMediaSource: ''screen''
            }
        }
    }
  _this.rtc.localstream = localstream;
  _this.rtc.mediaConstraints=constraints_video;


  _this.rtc.createStream();  
  _this.rtc.createOffer();
}
getUserMedia(constraints_video, gotStream);

Chrome no permite el audio junto con la ''pantalla'', así que creo una transmisión por separado para él. Deberá hacer lo contrario para volver a la transmisión de video anterior o, en realidad, a cualquier otra transmisión que desee.

Espero que esto ayude