Subscriber's stream is very fuzzy when publishing video from a video source about opentok-web-samples HOT 3 CLOSED

Did you ever figure out a solution to this?

from opentok-web-samples.

I had the same issue but it has nothing to do with the opentok publisher, the issue is when you do the video.captureStream()
the video by default uses the lowest resolution so when you do captureStream() your max resolution to use in the publisher would be the lowest of the video.
You could check this by logging your stream.videoTracks()[0].getSettings() you'll see the max resolution of the video.
What you can do is set the video player resolution to use the highest available by default so when you do captureStream() your stream.videoTracks()[0] would have the highest resolution and you can use same resolution in your publisher or downscale it.

from opentok-web-samples.

I managed to get a somewhat workable solution to this. The following solution will also work on ios. It needs more testing but the workflow is as follows:

1. Draw the video to a canvas using requestAnimationFrame and context.drawImage() as outlined here https://mux.com/blog/canvas-adding-filters-and-more-to-video-using-just-a-browser/. Note that you can draw a canvas from a video element easily and adjust width, height and framerate using this technique.

2. Publish the canvas video stream using canvas.captureStream(fps).getVideoTracks()[0] like this:

OT.initPublisher(null, {
    videoSource: this.canvasEl
        .captureStream(30)
        .getVideoTracks()[0],
    insertDefaultUI: false,
    audioSource: false,
})

This is also shown here: https://github.com/opentok/opentok-web-samples/blob/master/Publish-Canvas/js/app.js. Note that canvas.captureStream is supported by all recent browsers (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream)

from opentok-web-samples.