search

muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.58k stars 1.76k forks source link

Multistream result width and height #590

Closed DaGLiMiOuX closed 4 years ago

DaGLiMiOuX commented 4 years ago

Hi,

I'm using RecordRTC to record multiple streams at the same time. I'm creating an instance of RecordRTC using an array of streams. The problem is that 360x240 (for each video individually) is a really low size, since video streams are from 640x480. The result video with 2 streams is a 720x240 and I want a 1280x480 video resolution.

I've tried using any of this configs { video: { width: 640, height: 480 } } and { canvas: { width: 640, height: 480 } }, but none worked. I've been taking a look on MultiStreamsMixer.js and a width and height can be provided for video resolutions, but I don't know how can I provide them.

Any suggestion?

Best regards, D.

P.S.: I also tried retrieving the recorder with getInternalRecorder() function to try to override those configs, but It also didn't work.

DaGLiMiOuX commented 4 years ago

Because I required to change the video output width and height so badly, I've created my own recorder for my app. This plugin works really well, but I suggest that you add this kind of settings to it, otherwise will be so limited in terms of customization for general/generic purposes. It is just a suggestion.

zhangzhx666 commented 4 years ago

@DaGLiMiOuX I encountered the same problem.How did you solve it?

DaGLiMiOuX commented 4 years ago

@DaGLiMiOuX I encountered the same problem.How did you solve it?

I've created my own recorder with canvas.

You need to create a canvas with your expected width and height output video. Take the WebRTC video streams and attach them into video tags and call play() (in background, do not attach them into DOM and do not forget to mute the videos in case you used streams into the video tags source object instead of video tracks). After that, take the audio streams and attach them into a single mixed AudioContext (more info about this element in MDN and maybe you will need to Google a bit to see how it works). After that, draw all the video tags into the canvas you've created in grid positioning system (calculated X and Y in a 2-video-per-row way)

With all this things you can now create the output stream. Create a new MediaStream object then attach the canvas as a stream (MDN again...) and the mixed AudioContext as a stream. Take that media stream instance and attach into a new MediaRecorder instance.

Its kinda a hard work... You need to code it all by yourself. Maybe you can take a look at MultiStreamRecorder.js lib from this repo to take an idea of how it works. I'm not sure, just Googled all the information and made my own recorder.

Hope it helps.

Best regards, D.

zhangzhx666 commented 4 years ago

@DaGLiMiOuX Thanks for your reply!I try it.