1

仅当在 angularJS 应用程序中运行 easyRTC 时才会发生此错误。

假设我们有 3 个参与者，A、B 和 C。当他们每个人随机连接时，他们会看到彼此的视频流（3 个并发流）。说 A 刷新页面。这是事件的顺序，简化

  • easyrtc.setRoomOccupantListener被解雇
  • 已检索占用者列表
  • 其他一些easyrtc事件被触发
  • 为每个占用者的流生成一个流 URL 调用URL.createObjectURL
  • 将流 URL 添加到video元素并显示视频流（通过ng-repeat方法）

但

尽管一切都按计划进行，但 A 只能看到来自 B 的视频。C 具有有效的流 URL，但视频是黑色的。

  • 仅当 A 刷新页面并批量检索所有其他流时才会发生这种情况。
  • video 元素位于指令中。我尝试在指令内使用 jQuery 创建视频元素，但没有运气
  • 该指令具有隔离范围
  • 我$sce.trustAsResourceURL用于流 URL
  • 相同的代码在无角度的 js 示例文件中运行良好
  • 我试图将流保存到 awindow.myStreamArray然后在控制台中重新生成流 URL 并使用一些 jQuery 将它们添加到视频元素中。这适用于第一个流。第二个流，虽然我得到了一个有效的 url，但没有显示任何内容
  • 视频元素有autoplay

独立运行且有效的代码。相同的代码作为角度服务运行。如果我们打开 3 个浏览器标签，B 点击1.connect，C 点击2.connect和 A 点击1.connect，A 将接收 B 和 C 并显示视频流。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>

<h1>easy rtc demo</h1>

<button id="btnOneInit">1. connect</button>
<button id="btnOne">1. start streaming</button>

<button id="btnTwoInit">2. connect</button>
<button id="btnTwo">2. start streaming</button>

<div id="one">
    <video autoplay src=""></video>
</div>
<div id="two">
    <video autoplay src=""></video>
</div>
<div id="three">
    <video autoplay src=""></video>
</div>
<div id="four">
    <video autoplay src=""></video>
</div>


<script src="/lib/jquery-2.1.0.min.js"></script>
<script src="/lib/sugar.min.js"></script>

<script src="/lib/socket.io.js"></script>
<script src="/lib/sails.io.js"></script>
<script src="/lib/easyrtc.js"></script>

<script>

function easy() {
    var _localRoom, _remoteRoom, _localStream, _remoteStreams, _available , _webRTCinitialized, _user;
    var _acceptedStreamsMap = {};
    var roomName = "SectorOne";
    var mySocket;

    function init(options) {
        _webRTCinitialized = false;
        _available = false;
        _remoteStreams = [];

        _remoteRoom = {
            id: undefined,
            token: undefined
        };

        mySocket = io.connect();
        _user = {
            id: options.id,
            role: 'presenter'
        };
        return this;
    }

    function connect() {
        easyrtc.dontAddCloseButtons();
        easyrtc.enableDebug(true);
        easyrtc.enableAudio(false);
        easyrtc.enableVideo(false);
        easyrtc.enableAudioReceive(true);
        easyrtc.enableVideoReceive(true);
        easyrtc.setRoomOccupantListener(occupantsChanged);

        easyrtc.connect('auvious.audioVideo', function (easyrtcid, roomOwner) {

            _localRoom = easyrtcid;
            console.log('connected with id : ' + easyrtcid);

        }, function (error) {
            alert(error);
        });

        easyrtc.setDisconnectListener(roomDisconnected);
        easyrtc.setStreamAcceptor(callAccepted);
        easyrtc.setAcceptChecker(acceptCall);
        easyrtc.setOnStreamClosed(streamRemoved);
    }


    function startStreaming(audio, video, screen) {
        easyrtc.enableAudio(audio);
        easyrtc.enableVideo(video);
        easyrtc.enableAudioReceive(true);
        easyrtc.enableVideoReceive(true);

        easyrtc.initMediaSource(
                // success callback
                function () {
                    var stream = easyrtc.getLocalStream();
                    var compositeID = _user.id;
                    var eventData = {userId: _user.id, role: _user.role, easyrtcid: _localRoom, id: stream.id, video: video, audio: !video, screen: screen};
                    _acceptedStreamsMap[_localRoom] = eventData;
                    var streamUrl = easyrtc.getLocalStreamAsUrl();
                    var options = {video: video, audio: !video, screen: screen, local: true, streamUrl: streamUrl};
                    console.log('about to show LOCAL stream...');
                    showStream(compositeID, stream, options);
                    easyrtc.setRoomApiField(roomName, _localRoom, JSON.stringify(eventData));
                },
                function (err) {
                    alert(err);
                }
        );
    }

    function occupantsChanged(roomName, occupants, selfInfo) {
        _remoteStreams = [];
        easyrtc.setRoomOccupantListener(null);
        for (var easyrtcid in occupants) {
            var occ = occupants[easyrtcid];
            if (occ && occ.apiField) {
                var streamingId = occ.apiField[easyrtcid];
                if (streamingId && !_acceptedStreamsMap.hasOwnProperty(streamingId)) {
                    var data = JSON.parse(occ.apiField[easyrtcid].fieldValue);
                    _remoteStreams.push(data);
                }
            }
        }
        if (_remoteStreams.length > 0)
            callOthers();
    }

    function callAccepted(easyrtcid, stream) {
        if (_acceptedStreamsMap[easyrtcid] && !_acceptedStreamsMap[easyrtcid].streaming) {
            var remoteStream = _acceptedStreamsMap[easyrtcid];
            var compositeID = remoteStream.userId;
            var options = Object.clone(remoteStream);
            options.streamUrl = URL.createObjectURL(stream);
            options.local = false;

            console.log('about to show remote stream...');
            console.log(_acceptedStreamsMap);

            _acceptedStreamsMap[easyrtcid].streaming = true;

            showStream(compositeID, stream, options);
        }
    }

    function acceptCall(easyrtcid, acceptedCB) {
        acceptedCB(true);
    }

    function callOthers() {
        function establishConnection(position) {
            function callSuccess() {
            }

            function callFailure(errorCode, errorText) {
            }

            if (position >= 0) {
                console.log('calling ....' + _remoteStreams[position].easyrtcid);

                easyrtc.call(_remoteStreams[position].easyrtcid, callSuccess, callFailure, function (accepted, easyrtcid) {
                    if (position > 0) {
                        establishConnection(position - 1);
                    }
                    connectionCallAccepted(accepted, easyrtcid)
                })
            }
        }

        if (_remoteStreams.length > 0) {
            establishConnection(_remoteStreams.length - 1);
        }
    }

    function connectionCallAccepted(accepted, easyrtcid) {
        if (accepted) {
            if (_acceptedStreamsMap[easyrtcid] == undefined) {
                _acceptedStreamsMap[easyrtcid] = _remoteStreams.find(function (stream) {
                    return stream.easyrtcid == easyrtcid;
                });
            }
            console.log('accepted stream--->' + easyrtcid);
            console.log(_acceptedStreamsMap)
        }
    }

    function showStream(compositeID, stream, options) {
        $(compositeID).find('video').attr('src', options.streamUrl);
        console.log('streaming...');
    }

    function closeStream(stream) {

        easyrtc.enableAudio(false);
        easyrtc.enableVideo(false);

        if (stream.local) {
            delete _acceptedStreamsMap[_localRoom];
            easyrtc.setRoomApiField(roomName, _localRoom, undefined);
            easyrtc.closeLocalStream(stream.streamName);
        }
    }

    function streamRemoved(easyrtcId) {

        easyrtc.enableAudio(false);
        easyrtc.enableVideo(false);

        var stream = _acceptedStreamsMap[easyrtcId];
        if (stream) {

            console.log('stream removed ---->' + easyrtcId);
            console.log(_acceptedStreamsMap);

            var attrs = {guid: stream.id, userId: stream.userId};
            delete _acceptedStreamsMap[easyrtcId];
            console.log(_acceptedStreamsMap);
        }
    }

    function roomDisconnected() {

    }

    function disconnect() {
        easyrtc.disconnect();
    }

    return {
        init: init,
        startStreaming: startStreaming,
        connect: connect,
        disconnect: disconnect,
        closeStream: closeStream

    }
}

var rtc = new easy();
$('#btnOneInit').click(function () {
    rtc.init({id: "#one"});
    rtc.connect();
})
$('#btnTwoInit').click(function () {
    rtc.init({id: "#two"});
    rtc.connect();
})

$('#btnOne, #btnTwo').click(function () {

    rtc.startStreaming(false, true, false);
})

</script>
</body>
</html>
4

0 回答 0