局部变量到全局javascript

Question

I have a problem with JavaScript, webRTC and Kurento. I'm not able to solve it by myself. I'm trying to put the remote stream from a local variable in a global variable but I have some troubles. I try to explain all steps to bring the problem out: The first step, I have the Kurento webRtcEndpoint function:

webRtcPeer = kurentoUtils.WebRtcPeer.startRecvOnly(videoElement, onPlayOffer, onError);

It calls the function "onPlayOffer" that is:

function onPlayOffer(sdpOffer) {
co(function * () {
    try {
        if (!client) client = yield kurentoClient(args.ws_uri);

        pipeline = yield client.create('MediaPipeline');
        var webRtc = yield pipeline.create('WebRtcEndpoint');
        var player = yield pipeline.create('PlayerEndpoint', { uri: args.file_uri });

        yield player.connect(webRtc);
        var sdpAnswer = yield webRtc.processOffer(sdpOffer);
        webRtcPeer.processSdpAnswer(sdpAnswer, recordVideo);

        console.log('DEBUG: ok, AGAIN, localStream: ');
        console.log(localStream);

        yield player.play();

I've edited the function processSdpAnswer to take the stream in this way:

WebRtcPeer.prototype.processSdpAnswer = function(sdpAnswer, callbackEvent, successCallback) {
//WebRtcPeer.prototype.processSdpAnswer = function(sdpAnswer, successCallback) {
var answer = new RTCSessionDescription({
    type : 'answer',
    sdp : sdpAnswer,
});

console.log('Kurento-Utils: SDP answer received, setting remote description');
var self = this;
self.pc.onaddstream = function(event) {
    var objectURL = URL.createObjectURL(event.stream);
    //Added the string below to create the callback
    callbackEvent(event.stream);
};

self.pc.setRemoteDescription(answer, function() {
    if (self.remoteVideo) {
        var stream = self.pc.getRemoteStreams()[0];
        //console.log('Kurento-Utils: Second self.pc');
        //console.log(self.pc)
        self.remoteVideo.src = URL.createObjectURL(stream);
    }
    if (successCallback) {
        successCallback();
    }
}, this.onerror);

So, in this case the callback is the function recordVideo, which is passed "event.stream"

function recordVideo(stream) {
console.log("DEBUG: called function recordVideo()");
localStream = stream;
console.log("DEBUG: Copied stream -> localStream:");
console.log(localStream);
console.log("DEBUG: the stream object contains:");
console.log(stream);}

So I expect that in the function "onPlayOffer" I may have the object localStream (declared globally) as a copy of stream (that is local). The variable "stream" is correct, the variable "localStream" instead, is UNDEFINED.

Can you help me to understand why? I've read that maybe the problem will be the console, but I've tried to comment all console.log line without success. Can you help me? Thank you everybody!

(if anybody know a faster way to take the event.stream object globally, I will be thanks for the help!)

Answer 1

you are right, your problem is asynchronous,

simplest way to correct it would be, putting whatever code/logic that has to follow the async call as an callback of that async call,

it can be done by changing

    ...
    webRtcPeer.processSdpAnswer(sdpAnswer, recordVideo);

    console.log('DEBUG: ok, AGAIN, localStream: ');
    console.log(localStream);

    yield player.play();
    ...

into

    ...
    var callback = function (){
        console.log('DEBUG: ok, AGAIN, localStream: ');
        console.log(localStream);

        yield player.play();
    };
    webRtcPeer.processSdpAnswer(sdpAnswer, recordVideo.bind({callback: callback})); // through bind, we are setting the `this` value of the recordVideo.

and modify the recordVideo into

function recordVideo(stream) {
    ...
    this.callback();    // extra line added.
}

Answer 2

You are missing a yield, and this is making the code below:

webRtcPeer.processSdpAnswer(sdpAnswer, recordVideo);

to execute before recordVideo

To solve it just put instead

yield webRtcPeer.processSdpAnswer(sdpAnswer, recordVideo);