1

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 ?

yarek
  • 11,278
  • 30
  • 120
  • 219

2 Answers2

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.

Winlin
  • 1,136
  • 6
  • 25
  • How to send Browser's video stream from webcam to SRS? ( Browser --WebRTC --> SRS --HLS/HTTP-FLV--> Viewer ) Above document mentioned only ( SRS --HLS/HTTP-FLV--> Viewer ) using ffmpeg. How to implement ( Browser --WebRTC --> SRS )? Furthermore if client want to share his screen( not webcam ) to viewers via SRS, how to do it? – persec10000 Dec 20 '22 at 09:51
  • (Browser --WebRTC--> SRS --HLS/HTTP-FLV--> Viewer) would you like to provide detailed source code for above step? Furthermore I need rtc_publisher.html, too. Thanks. – persec10000 Dec 20 '22 at 22:14
  • 1
    All code is open source, please see [srs_publisher.html](https://github.com/ossrs/srs/blob/develop/trunk/research/players/rtc_publisher.html). Please contact us by discord if need more discussion. – Winlin Dec 22 '22 at 13:44
0

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.

user190245
  • 1,027
  • 1
  • 15
  • 31
Naju Bhadarka
  • 49
  • 5