javascript - 我没有使用 twilio 从本地摄像机获取视频

Question

我正在构建一个视频聊天应用。 python 中的后端部分工作正常(创建房间，将 token 添加到房间)。我可以连接到房间，笔记本电脑上的 diod 显示摄像头正在工作，但它不显示本地摄像头的视频。这是我的代码

Twilio.Video.connect(doctor_token, {name: room_name}).then(function (room) {

    Twilio.Video.createLocalVideoTrack().then(function (track) {
        $("#localVideo").append(track.attach());
    });

    room.on('participantConnected', function (participant) {
        $("#patientVideo").append(participant.track.attach())
    })

});

这是html的一部分

  <div>
            <video id="localVideo"></video>
            <video id="patientVideo"></video>
</div>

我做错了什么？还有什么是如何添加选项以静音我的摄像机的声音？

Answer 1

此处为 Twilio 开发人员布道师。

调用 track.attach()没有参数实际上会创建一个 <video>元素。然后您的代码将附加新的 <video>元素添加到您现有的 <video id="localVideo"></video>元素。如果您在此代码运行后检查 DOM，则会发现嵌套视频。

你现在有两个选择。您可以将现有的 <video>元素变成 <div id="localVideo">并且创建的视频元素将附加到它，您将看到您的本地视频。 HTML:

<div>
  <div id="localVideo"></div>
  <div id="patientVideo"></div>
</div>

JavaScript 保持不变。

或者，您可以保持 HTML 不变并将 ID 选择器传递给 track.attach()这会将您相机中的视频附加到现有元素。

本例中的 JavaScript 变为:

Twilio.Video.connect(doctor_token, {name: room_name}).then(function (room) {

  Twilio.Video.createLocalVideoTrack().then(function (track) {
    track.attach("#localVideo");
  });

  room.on('participantConnected', function (participant) {
    participant.track.attach("#patientVideo");
  });

});

如果这有帮助，请告诉我。