webrtc getUserMedia : how to get a stream from getUserMedia and publish it to SRS?

Question

How to get a stream using html5 getUserMedia and publish that to SRS?

I want to get a stream directly from browser and not using OBS or ffmpeg.

Any sample available?

Answer 1

Well, it dpends on your use scenario.

If you want to do live streaming, please see this post , the media flow:

Browser --WebRTC--> SRS --HLS/HTTP-FLV--> Viewer

If you want to do video meeting, please see this post , the media flow:

Browser <--WebRTC--> SRS <--WebRTC--> Viewer

Note that for video meeting, there should be NxN streams in a room.

Answer 2

I have a Solution. Check the below Code...

HTML CODE: Here you need only Video tag.

Index.html

    <video id="remoteScreen"  autoplay="true"></video>

Screenshare.js file

    const getLocalScreenCaptureStream = async () => {try {
    const constraints = { video: { cursor: 'always' }, audio: false };
    const screenCaptureStream = await navigator.mediaDevices.getDisplayMedia(constraints); return screenCaptureStream; } catch (error) {
    console.error('failed to get local screen', error)}}

main.js

    var localStreamScreen = null;
    async function shareScreen() {localStreamScreen = await getLocalScreenCaptureStream(); console.log("localStreamScreen: ", localStreamScreen)}

screenshare.js

    function handleRemoteStreamAddedScreen(event) {
    console.log('Remote stream added.');
    alert('Remote stream added.');
     if ('srcObject' in remoteScreen) {
    remoteScreen.srcObject = event.streams[0];
     } else {
    // deprecated
    remoteScreen.src = window.URL.createObjectURL(event.stream);
    }
     remoteScreenStream = event.stream};

Hope, it will work for you.