Question

我正在尝试在我的项目上实现Sip.js。我已经创建了一个会话变量并将该会话存储在该会话变量中，但是现在我需要跟踪该会话变量上的事件以将音频附加到DOM上。如何在变量上添加事件监听器。

这是我的代码的样子：

<template>
  <div> <button @click="callme">Call Me</button></div>
</template>
<script>
export default {
    data() {
      return {
          session: null,
          ua : null,
          }
      },
   methods: {
      callme(){
                this.session = this.ua.invite('sip:bob@example.com')   
        },
     },
  created(){
        this.ua= new SIP.UA({
                   uri: 'bob@example.onsip.com',
                   transportOptions: {
                    wsServers: ['wss://sip-ws.example.com']
                   },
                   authorizationUser: '',
                   password: ''
                  });
    }
   }

</script>

现在我需要听：

session.on('trackAdded', function() {

}

我可以在哪里添加此功能，无论何时在会话上运行trackAdded？

根据文档https://sipjs.com/guides/attach-media/

，这是附加媒体选项

Answer 1

session和ua不应在data()中设置-Vue不应跟踪它们。 They are not plain data objects：

Vue实例的数据对象。 Vue将递归转换其将属性添加到getter / setter中以使其“具有反应性”。 对象必须简而言之：本机对象，例如浏览器API对象和原型属性将被忽略。经验法则是，数据应仅数据-不建议自己观察对象有状态的行为。

话虽如此，如果您必须坚持，则可以在创建会话之后立即设置处理程序，如下所示：

methods: {
    trackAddedEventHandler() {
        console.log('trackAdded Event!');
    },
    callme() {
        this.session = this.ua.invite('sip:bob@example.com');
        session.on('trackAdded', this.trackAddedEventHandler);
    },
},

但是确实可以测试这些行为，因为当对象位于data()时，您可能依赖Vue可能不支持的某些东西。

如何在vuejs中将事件附加到变量

1 个答案: