I don't get video from local cammera using twilio

Question

I am building an app for video chat. The backend part in python works fine(making rooms, giving tokens adding right to the room). I can connect to the room and the diod on my notebook shows that the camera is working but it dosen't display video from my local camera. This is my code

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())
    })

});

This i part of html

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

What am I doing wrong? What is more how to add option to mute voice from my video cammera?

Answer 1

Twilio developer evangelist here.

Calling track.attach() with no arguments will actually create a <video> element. Your code is then appending the new <video> element to your existing <video id="localVideo"></video> element. If you inspect the DOM after this code runs then you will find nested videos.

You have two choices now. You can either turn your existing <video> element into a <div id="localVideo"> and the created video element will be appended to it and you will see your local video. The HTML:

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

The JavaScript stays the same.

Or, you can leave the HTML as it is and pass the ID selector to track.attach() which will attach the video from your camera to the existing element.

The JavaScript in this case becomes:

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");
  });

});

Let me know if this helps.