Improve opentok stream quality while publishing from video source

I am using opentok to stream a video file MediaStreamTrack
Sample code:

        <video id="myPreview" controls ></video>

        const mediaStream = $('#myPreview')[0].captureStream()
        OT.initPublisher(el, {
              style: {
                nameDisplayMode: "on",
                buttonDisplayMode: "off",
              },
              // resolution: "320x240",
              // frameRate: 20,
              audioSource: mediaStream.getAudioTracks()[0],
              videoSource: mediaStream.getVideoTracks()[0],
            });

It works fine but the problem is when viewers are around 20 the quality of video is pixelated.

More context:
I upload a video and use the blob to play the video in the preview.
I’m open for better solutions:
a. Upload video to server and stream edited moderate quality(not sure what to do) video in myPreview.
b. Upload video to 3rd party service and load video via their player.

Thanks in advance.

Source: AngularJS