Twilio可编程视频JS / Ionic

时间:2017-06-20 19:20:01

标签: javascript angularjs video twilio twilio-api

我正在使用Twilio可编程视频JS SDK并遇到一些问题。我已经采用了他们的示例代码,我可以创建一个房间并连接到它,它会触发我的相机/麦克风,但没有任何事件正在触发,处理诸如将视频绑定到DOM,显示事件等事情。

这是基于Angular 1和Ionic Framework构建的Cordova应用程序的一部分。这是我的控制器中的代码:

angular.module('smartlab.controllers').controller('SupportVideoCtrl', ['$scope', '$http', function($scope, $http) {

    // include Twilio Video library
    const Video = Twilio.Video;

    // call our "cross origin friendly" smartlab cloud server to get Twilio token (they can only be generated server-side)

    $http.get('TOKEN_URL', function(data) {

    }).then(function(data) {
        console.log(data);
        console.log("Token = " + data.data.token);

        Video.connect(data.data.token, { name: 'Support' }).then(room => {
            console.log('Connected to Room "%s"', room.name);

            // None of the events below fire
            room.participants.forEach(participantConnected);  
            room.on('participantConnected', participantConnected);
            room.on('participantDisconnected', participantDisconnected);
            room.once('disconnected', error => room.participants.forEach(participantDisconnected));

        });
    });

    function participantConnected(participant) {
        console.log('Participant "%s" connected', participant.identity);

        const div = document.createElement('div');
        div.id = participant.sid;
        div.innerText = participant.identity;

        participant.on('trackAdded', track => trackAdded(div, track));
        participant.tracks.forEach(track => trackAdded(div, track));
        participant.on('trackRemoved', trackRemoved);

        console.log("Participant Connected");
        console.dir(div);

        document.body.appendChild(div);
    }

    function participantDisconnected(participant) {
        console.log('Participant "%s" disconnected', participant.identity);

        participant.tracks.forEach(trackRemoved);

        document.getElementById(participant.sid).remove();
    }

    function trackAdded(div, track) {
        console.log("Track added");
        console.dir(div);
        console.dir(track);
        div.appendChild(track.attach());
    }

    function trackRemoved(track) {
        track.detach().forEach(element => element.remove());
    }

}]);

有没有人使用过这个库并有一些示例代码可以从上面的代码中抽取或看到任何错误?我已经检查了他们的示例NodeJS应用程序,但它与我在这里的实现完全不同,所以它不是非常有用。谢谢!

1 个答案:

答案 0 :(得分:3)

经过大量的试验和错误+一些来回与伟大的Phil Nash我有一个很好的解决方案。现在,这是我们使用Ionic Framework构建的Cordova移动应用程序的一部分。

HTML:

variable

JS:

%>% spread(variable, value)

  bird day mass hearth_rate
1    1   1    5          60
2    1   2    6          NA
3    1   3   NA          55
4    2   1    6          62
5    2   2    8          NA
6    2   3   NA          57
7    3   1    3          45
8    3   2    3          NA
9    3   3   NA          45

我希望这有助于其他想要将Twilio视频与他们的项目集成的混合移动开发者!