Question

每一天我都在为我正在制作的直播软件遇到麻烦。

所以在第一张图片中，您看到视频的左上角有一个浮动圈

在第二张照片中，我试图将图像输入第一张照片。但问题是它在我的

中不起作用

server.js

// Load required modules
var http    = require("http");              // http server core module
var express = require("express");           // web framework external module
var serveStatic = require('serve-static');  // serve static files
var socketIo = require("socket.io");        // web socket external module
var easyrtc = require("../");               // EasyRTC external module

// Set process name
process.title = "node-easyrtc";

// Setup and configure Express http server. Expect a subfolder called "static" to be the web root.
var app = express();
app.use(serveStatic('static', {'index': ['index.html']}));



var port = process.env.PORT || 8080;
// Start Express http server on port 8080
var webServer = http.createServer(app).listen(port);

// Start Socket.io so it attaches itself to Express server
var socketServer = socketIo.listen(webServer, {"log level":3});

// Overriding the default easyrtcAuth listener, only so we can directly access its callback
easyrtc.events.on("easyrtcAuth", function(socket, easyrtcid, msg, socketCallback, callback) {
easyrtc.events.defaultListeners.easyrtcAuth(socket, easyrtcid, msg, socketCallback, function(err, connectionObj){
    if (err || !msg.msgData || !msg.msgData.credential || !connectionObj)     {
        callback(err, connectionObj);
        return;
    }

    connectionObj.setField("credential", msg.msgData.credential, {"isShared":false});

    console.log("["+easyrtcid+"] Credential saved!", connectionObj.getFieldValueSync("credential"));

    callback(err, connectionObj);
});
});

// To test, lets print the credential to the console for every room join!
easyrtc.events.on("roomJoin", function(connectionObj, roomName, roomParameter, callback) {
console.log("["+connectionObj.getEasyrtcid()+"] Credential retrieved!", connectionObj.getFieldValueSync("credential"));
easyrtc.events.defaultListeners.roomJoin(connectionObj, roomName, roomParameter, callback);
});

// Start EasyRTC server
var rtc = easyrtc.listen(app, socketServer, null, function(err, rtcRef) {
console.log("Initiated");

rtcRef.events.on("roomCreate", function(appObj, creatorConnectionObj, roomName, roomOptions, callback) {
    console.log("roomCreate fired! Trying to create: " + roomName);

    appObj.events.defaultListeners.roomCreate(appObj, creatorConnectionObj, roomName, roomOptions, callback);
});
});


easyrtc.on("getIceConfig", function(connectionObj, callback) {

// This object will take in an array of XirSys STUN and TURN servers
var iceConfig = [];

http.request({ 
    url: 'https://service.xirsys.com/ice',
    qs: {
        ident: "***",
        secret: "***",
        domain: "***",
        application: "default",
        room: "default",
        secure: 1
    },
    function (error, response, body) {
        if (!error && response.statusCode == 200) {
            // body.d.iceServers is where the array of ICE servers lives
            iceConfig = body.d.iceServers;  
            console.log(iceConfig);
            callback(null, iceConfig);
        }
    }
});

});


//listen on port 8080
webServer.listen(8080, function () {
console.log('listening on http://localhost:'+port);
});

和我的

multistream.js

var selfEasyrtcid = "";
var haveSelfVideo = false;
var otherEasyrtcid = null;


function disable(domId) {
console.log("about to try disabling "  +domId);
document.getElementById(domId).disabled = "disabled";
}


function enable(domId) {
console.log("about to try enabling "  +domId);
document.getElementById(domId).disabled = "";
}

function createLabelledButton(buttonLabel) {
var button = document.createElement("button");
button.setAttribute('type','button');
button.setAttribute('class','btn btn-danger btn-circle waves-effect waves-circle waves-float');
button.innerHTML = "<i class='material-icons'>camera_enhance</i>";
document.getElementById("videoSrcBlk").appendChild(button);
return button;
}

function addMediaStreamToDiv(divId, stream, streamName, isLocal)
{
var container = document.createElement("div");
container.style.marginBottom = "10px";
var formattedName = streamName.replace("(", "<br>").replace(")", "");
var labelBlock = document.createElement("div");
var video = document.createElement("video");
video.setAttribute('class','easyrtcMirror instructor-vid');
video.setAttribute('id','selfVideo');
video.style.width = "100%";
video.muted = isLocal;
video.style.verticalAlign= "middle";
container.appendChild(video);
document.getElementById(divId).appendChild(container);
video.autoplay = true;
easyrtc.setVideoObjectSrc(video, stream);
return labelBlock;
}

function addMediaStreamToDivClient(divId, stream, streamName, isLocal)
{
var container = document.createElement("div");
container.style.marginBottom = "10px";
var formattedName = streamName.replace("(", "<br>").replace(")", "");
var labelBlock = document.createElement("button");
labelBlock.setAttribute('class','btn btn-warning btn-circle-lg userlive waves-effect waves-circle waves-float');
labelBlock.style.width = "100px";
labelBlock.style.height = "100px";
var video = document.createElement("video");
video.setAttribute('class','student-vid');
video.setAttribute('id','selfVideo');
video.muted = isLocal;
labelBlock.appendChild(video);
container.appendChild(labelBlock);
document.getElementById(divId).appendChild(container);
video.autoplay = true;
easyrtc.setVideoObjectSrc(video, stream);
return labelBlock;
}

function createLocalVideo(stream, streamName) {
var labelBlock = addMediaStreamToDiv("localVideos", stream, streamName, true);
var closeButton = createLabelledButton("close");
closeButton.onclick = function() {
    easyrtc.closeLocalStream(streamName);
    labelBlock.parentNode.parentNode.removeChild(labelBlock.parentNode);
}
labelBlock.appendChild(closeButton);

console.log("created local video, stream.streamName = " + stream.streamName);
}

function addSrcButton(buttonLabel, videoId) {
var button = createLabelledButton(buttonLabel);
button.onclick = function() {
    easyrtc.setVideoSource(videoId);
    easyrtc.initMediaSource(
            function(stream) {
                createLocalVideo(stream, buttonLabel);
                if( otherEasyrtcid) {
                    easyrtc.addStreamToCall(otherEasyrtcid, buttonLabel, function(easyrtcid, streamName){
                        easyrtc.showError("Informational", "other party " + easyrtcid + " acknowledges receiving " + streamName);
                    });
                }
            },
            function(errCode, errText) {
                easyrtc.showError(errCode, errText);
            }, buttonLabel);
};
}

function connect() {
console.log("Initializing.");
easyrtc.setRoomOccupantListener(convertListToButtons);
easyrtc.connect("easyrtc.multistream", loginSuccess, loginFailure);
easyrtc.setAutoInitUserMedia(false);
easyrtc.getVideoSourceList(function(videoSrcList) {
    for (var i = 0; i < videoSrcList.length; i++) {
         var videoEle = videoSrcList[i];
        var videoLabel = (videoSrcList[i].label &&videoSrcList[i].label.length > 0)?
        (videoSrcList[i].label):("src_" + i);
        addSrcButton(videoLabel, videoSrcList[i].deviceId);
    }
});
}

function hangup() {
easyrtc.hangupAll();
disable('hangupButton');
}


function clearConnectList() {
var otherClientDiv = document.getElementById('otherClients');
while (otherClientDiv.hasChildNodes()) {
    otherClientDiv.removeChild(otherClientDiv.lastChild);
}
}


function convertListToButtons(roomName, occupants, isPrimary) {
clearConnectList();
var otherClientDiv = document.getElementById('otherClients');
for (var easyrtcid in occupants) {
    var button = document.createElement('button');
    button.setAttribute('class','col-md-3 btn bg-red btn-block btn-lg waves-effect');
    button.onclick = function(easyrtcid) {
        return function() {
            performCall(easyrtcid);
        };
    }(easyrtcid);

    var label = document.createTextNode("Student no.: " + easyrtc.idToName(easyrtcid));
    button.appendChild(label);
    otherClientDiv.appendChild(button);
}
}


function performCall(targetEasyrtcId) {
var acceptedCB = function(accepted, easyrtcid) {
    if (!accepted) {
        easyrtc.showError("CALL-REJECTED", "Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");
        enable('otherClients');
    }
    else {
        otherEasyrtcid = targetEasyrtcId;
    }
};

var successCB = function() {
    enable('hangupButton');
};
var failureCB = function() {
    enable('otherClients');
};
var keys = easyrtc.getLocalMediaIds();

easyrtc.call(targetEasyrtcId, successCB, failureCB, acceptedCB, keys);
enable('hangupButton');
}


function loginSuccess(easyrtcid) {
disable("connectButton");
//  enable("disconnectButton");
enable('otherClients');
selfEasyrtcid = easyrtcid;
document.getElementById("iam").innerHTML = "Connected!";
// document.getElementById("iam").innerHTML = "Connected, waiting for class room" + easyrtc.cleanId(easyrtcid);
}

function loginFailure(errorCode, message) {
easyrtc.showError(errorCode, message);
}


function disconnect() {
document.getElementById("iam").innerHTML = "logged out";
easyrtc.disconnect();
enable("connectButton");
clearConnectList();
easyrtc.setVideoObjectSrc(document.getElementById('selfVideo'), "");
}

easyrtc.setStreamAcceptor(function(easyrtcid, stream, streamName) {
var labelBlock = addMediaStreamToDivClient("remoteVideos", stream, streamName, false);
labelBlock.parentNode.id = "remoteBlock" + easyrtcid + streamName;
console.log("accepted incoming stream with name " + stream.streamName);
console.log("checking incoming " + easyrtc.getNameOfRemoteStream(easyrtcid, stream));
});



easyrtc.setOnStreamClosed(function(easyrtcid, stream, streamName) {
var item = document.getElementById("remoteBlock" + easyrtcid + streamName);
item.parentNode.removeChild(item);
});


var callerPending = null;

easyrtc.setCallCancelled(function(easyrtcid) {
if (easyrtcid === callerPending) {
    document.getElementById('acceptCallBox').style.display = "none";
    callerPending = false;
}
});

easyrtc.setAcceptChecker(function(easyrtcid, callback) {
otherEasyrtcid = easyrtcid;
if (easyrtc.getConnectionCount() > 0) {
    easyrtc.hangupAll();
}
callback(true, easyrtc.getLocalMediaIds());
});

在heroku日志上，这就是它所说的：

2017-05-24T15：40：05.352716 + 00:00 heroku [router]：at = info method = GET path =＆＃34; /socket.io/?EIO = 3＆amp; transport = polling＆amp; t = Lmx7G8z＆amp; ; SID = X2X-q9gk8gJmiJW3AAAC＆＃34; host = shielded-sands-69548.herokuapp.com request_id = 1a3911f4-e809-42f9-8008-c1ab4ac5d860 fwd =＆＃34; 121.54.32.165＆＃34; dyno = web.1 connect = 0ms service = 62ms status = 200 bytes = 559 protocol = https   2017-05-24T15：40：07.182964 + 00:00 app [web.1]：

debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]使用msgType [setRoomApiField]收到EasyRTC命令   2017-05-24T15：40：07.184033 + 00:00 app [web.1]：

debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]运行func＆＃39; onMsgTypeSetRoomApiField＆＃39;使用apiFieldObj：{roomName：[32m＆＃39;默认＆＃39; [39m，

2017-05-24T15：40：07.184035 + 00:00 app [web.1]：field：

2017-05-24T15：40：07.184035 + 00:00 app [web.1]：{mediaIds：

2017-05-24T15：40：07.184036 + 00:00 app [web.1]：{fieldName：[32m＆＃39; mediaIds＆＃39; [39m，

2017-05-24T15：40：07.184037 + 00:00 app [web.1]：fieldValue：{[32m＆＃39; USB2.0 HD UVC WebCam（04f2：b409）＆＃39; [39m：[ 32m＆＃39; 7G0CSKTl143ui0S8P3o3I6ODKqkmcb6c9x2J＆＃39; [39m}}}}

2017-05-24T15：40：07.193658 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq] Room [default] running func＆＃39; connectionRoomObj.emitRoomDataDelta＆＃39 ;

2017-05-24T15：40：07.193760 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq] Room [default] running func＆＃39; connectionRoomObj.generateRoomDataDelta＆＃39 ;       与日志流断开连接。可能会发生您没有在这里看到的事件！试图重新连接...

2017-05-24T15：40：30.732318 + 00:00 heroku [router]：at = info method = GET path =＆＃34; /socket.io/?EIO = 3＆amp; transport = polling＆amp; t = Lmx7TgQ＆amp; ; SID = 2GH0CYMLf5N1yMSoAAAD＆＃34; host = shielded-sands-69548.herokuapp.com request_id = b3e85b00-1631-4a86-ac37-d30e7da18e5a fwd =＆＃34; 112.198.82.104＆＃34; dyno = web.1 connect = 0ms service = 44ms status = 200 bytes = 559 protocol = https

2017-05-24T15：40：31.058485 + 00:00 heroku [router]：at = info method = GET path =＆＃34; /socket.io/?EIO = 3＆amp; transport = polling＆amp; t = Lmx7Tlt＆amp; ; SID = 2GH0CYMLf5N1yMSoAAAD＆＃34; host = shielded-sands-69548.herokuapp.com request_id = 4eca076e-77d4-4c79-81f8-85b0bc87f474 fwd =＆＃34; 112.198.82.104＆＃34; dyno = web.1 connect = 0ms service = 10ms status = 200 bytes = 225 protocol = https

2017-05-24T15：40：31.492099 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]收到的带有msgType的EasyRTC命令[setRoomApiField]

2017-05-24T15：40：31.492866 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]运行func＆＃39; onMsgTypeSetRoomApiField＆＃39;使用apiFieldObj：{roomName：[32m＆＃39;默认＆＃39; [39m，

2017-05-24T15：40：31.492869 + 00:00 app [web.1]：field：

2017-05-24T15：40：31.492869 + 00:00 app [web.1]：{mediaIds：

2017-05-24T15：40：31.492870 + 00:00 app [web.1]：{fieldName：[32m＆＃39; mediaIds＆＃39; [39m，

2017-05-24T15：40：31.492871 + 00:00 app [web.1]：fieldValue：{[32m＆＃39;摄像头1，面向前方＆＃39; [39m：[32m＆＃39; jyQhLuKAb3xFwMnpx4316IazXWfq8OjpllXN＆＃39 ; [39m}}}}

2017-05-24T15：40：31.493276 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa] Room [default] running func＆＃39; connectionRoomObj.emitRoomDataDelta＆＃39 ;

2017-05-24T15：40：31.493368 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]会议室[默认]正在运行func＆＃39; connectionRoomObj.generateRoomDataDelta＆＃39 ;

2017-05-24T15：40：31.493579 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]运行func＆＃39; onEmitEasyrtcCmd＆＃39; msgType [roomData]

2017-05-24T15：40：35.147874 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]收到带有msgType [offer]的EasyRTC命令

2017-05-24T15：40：35.148264 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]运行func＆＃39; onEmitEasyrtcCmd＆＃39; msgType [offer]

2017-05-24T15：40：35.771088 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]收到类型为[easyrtc_streamReceived]的EasyRTC消息

2017-05-24T15：40：35.778244 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]运行func＆＃39; onEmitEasyrtcMsg＆＃39; msgType [easyrtc_streamReceived]

2017-05-24T15：40：35.825123 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]收到的带有msgType的EasyRTC命令[回答]

2017-05-24T15：40：35.825572 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]运行func＆＃39; onEmitEasyrtcCmd＆＃39;使用msgType [answer]

2017-05-24T15：40：35.835961 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]收到带有msgType [候选人]的EasyRTC命令

2017-05-24T15：40：35.836259 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [s4kVZlTHTPBuXAsq]运行func＆＃39; onEmitEasyrtcCmd＆＃39;与msgType [候选人]

2017-05-24T15：40：35.880085 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]收到的带有msgType的EasyRTC命令[setUserCfg]

2017-05-24T15：40：35.880411 + 00:00 app [web.1]：debug - EasyRTC：[easyrtc.multistream] [GbiiKUGLqDt10wqa]收到WebRTC setUserCfg命令。此功能尚未完成。

任何人都可以试着帮助我:(

无法连接其他互联网连接（EasyRTC）

0 个答案: