代码之家  ›  专栏  ›  技术社区  ›  Leonard Klausmann

同龄人js webrtc>>在运行时更改流

  •  2
  • Leonard Klausmann  · 技术社区  · 6 年前

    我正在与peer开发一个跨平台应用程序。js和webrtc。 我用的是科尔多瓦人行横道。 此外,我正在使用webrtc适配器( https://github.com/webrtc/adapter )

    我的代码基于webrtc crosswalk示例。( https://github.com/crosswalk-project/crosswalk-samples )

    我想在不创建新呼叫的情况下更改流的视频源。 我的方法是删除流的轨迹,然后添加其他摄影机的新轨迹。 结果是本地视频显示正确的内容,但被叫方的远程视频冻结。

    也许我犯了一个非常基本的错误,但我找不到解决办法。 我期待着您的回答和解决方案。

    我的主代码文件已附加。

    //Notwendig, um die Dialogfunktion zu aktivieren
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        console.log(navigator.notification);
        // Now safe to use device APIs
    }
    
    
    document.addEventListener('DOMContentLoaded', function () {
        // PeerJS server location
        var SERVER_IP = '172.20.37.147';
        var SERVER_PORT = 9000;
    
        // DOM elements manipulated as user interacts with the app
        var messageBox = document.querySelector('#messages');
        var callerIdEntry = document.querySelector('#caller-id');
        var connectBtn = document.querySelector('#connect');
        var recipientIdEntry = document.querySelector('#recipient-id');
        var dialBtn = document.querySelector('#dial');
        var remoteVideo = document.querySelector('#remote-video');
        var localVideo = document.querySelector('#local-video');
        var cameraTurn = document.querySelector('#camera_turn');
        var stop = document.querySelector('#stop');
    
        // the default facing direction
        var dir = "environment";
    
        // the ID set for this client
        var callerId = null;
    
    
    
        // PeerJS object, instantiated when this client connects with its
        // caller ID
        var peer = null;
    
    
        // the local video stream captured with getUserMedia()
        var localStream = null;
    
        // DOM utilities
        var makePara = function (text) {
            var p = document.createElement('p');
            p.innerText = text;
            return p;
        };
    
        var addMessage = function (para) {
            if (messageBox.firstChild) {
                messageBox.insertBefore(para, messageBox.firstChild);
            }
            else {
                messageBox.appendChild(para);
            }
        };
    
        var logError = function (text) {
            var p = makePara('ERROR: ' + text);
            p.style.color = 'red';
            addMessage(p);
        };
    
        var logMessage = function (text) {
            addMessage(makePara(text));
        };
    
        // get the local video and audio stream and show preview in the
        // "LOCAL" video element
        // successCb: has the signature successCb(stream); receives
        // the local video stream as an argument
        var getLocalStream = function (successCb, ask = true) {
            if (localStream && successCb) {
                successCb(localStream);
            }
            else {
              
                    navigator.mediaDevices.getUserMedia({ audio: true, video: { facingMode: dir } })
                        .then(function (stream) {
    
                            if (localStream == null) {
                                /* use the stream */
                                localStream = stream;
                            }
                            else {
                             
                                stream.getTracks().forEach(function (track) {
                                    localStream.addTrack(track);
                                });
                            }
    
    
                            localVideo.src = window.URL.createObjectURL(localStream);
    
                            if (successCb) {
                                successCb(stream);
                            }
                        })
                        .catch(function (err) {
                            /* handle the error */
                            logError('failed to access local camera');
                            logError(err.message);
                        });
                }
               
            
        };
    
        // set the "REMOTE" video element source
        var showRemoteStream = function (stream) {
            remoteVideo.src = window.URL.createObjectURL(stream);
        };
    
        // set caller ID and connect to the PeerJS server
        var connect = function () {
            callerId = callerIdEntry.value;
    
            if (!callerId) {
                logError('please set caller ID first');
                return;
            }
    
            try {
                // create connection to the ID server
                peer = new Peer(callerId, { host: SERVER_IP, port: SERVER_PORT });
    
                // hack to get around the fact that if a server connection cannot
                // be established, the peer and its socket property both still have
                // open === true; instead, listen to the wrapped WebSocket
                // and show an error if its readyState becomes CLOSED
                peer.socket._socket.onclose = function () {
                    logError('no connection to server');
                    peer = null;
                };
    
                // get local stream ready for incoming calls once the wrapped
                // WebSocket is open
                peer.socket._socket.onopen = function () {
                    getLocalStream();
                };
    
                // handle events representing incoming calls
                peer.on('call', answer);
            }
            catch (e) {
                peer = null;
                logError('error while connecting to server');
            }
        };
    
        // make an outgoing call
        var dial = function () {
            if (!peer) {
                logError('please connect first');
                return;
            }
    
            if (!localStream) {
                logError('could not start call as there is no local camera');
                return
            }
    
            var recipientId = recipientIdEntry.value;
    
            if (!recipientId) {
                logError('could not start call as no recipient ID is set');
                return;
            }
    
            getLocalStream(function (stream) {
                logMessage('outgoing call initiated');
    
                var call = peer.call(recipientId, stream);
    
                call.on('stream', showRemoteStream);
    
                call.on('error', function (e) {
                    logError('error with call');
                    logError(e.message);
                });
            });
        };
    
    
    
    
        // answer an incoming call
        var answer = function (call) {
            if (!peer) {
                logError('cannot answer a call without a connection');
                return;
            }
    
            if (!localStream) {
                logError('could not answer call as there is no localStream ready');
                return;
            }
    
    
            //Asks user to answer the call
            navigator.notification.confirm(
                "Receive a call?",
                function (buttonIndex) {
                    if (buttonIndex === 1) {
                        //user clicked "yes"
                        logMessage('incoming call answered');
    
                        call.on('stream', showRemoteStream);
    
                        call.answer(localStream);
                    }
                    else {
                        //user clicked "no"
                        logMessage('incoming call denied');
                    }
                }
                ,
                'Incoming Call',
                ['Yes', 'No']
            );
    
        };
    
    
    
        function turnDirection() {
            if (dir === "user")
                return "environment";
            else
                return "user";
        }
    
        var turnCamera = function (call) {
            dir = turnDirection();
            localStream.getTracks().forEach(function (track) {
                track.stop();
                localStream.removeTrack(track);
            });
            getLocalStream(false);
            
    
        };
        var stopCall = function (call) { };
        // wire up button events
        connectBtn.addEventListener('click', connect);
        dialBtn.addEventListener('click', dial);
        cameraTurn.addEventListener('click', turnCamera);
        stop.addEventListener('click', stopCall);
    });
    
    1 回复  |  直到 4 年前
        1
  •  5
  •   prerak    6 年前

    如果删除PeerConnection,然后向其添加新曲目,则需要重新协商报价答案,以使其正常工作。我建议您使用 replaceTrack API,以避免在更改相机输入时出现重新协商问题。