Recording examples?🙏 #1514

Jarrodsz · 2024-01-31T10:01:47Z

Jarrodsz
Jan 31, 2024

How can I implement video recording with React, leveraging OpenVidu for server-side functionality, while addressing the following requirements:

Authentication: Ensure user authentication to control access to recording features.
Time-limited Recording: Allow users to specify a duration for their recordings.
Optional Pause and Continue Recording: Implement functionality for users to pause and resume recordings.
Storage Options: Provide users with the choice to store recordings locally or on S3.

What would be the recommended approach and code structure for achieving this, considering the integration of React components, OpenVidu services, authentication mechanisms, and storage solutions like local disk or S3?

bchah · 2024-01-31T16:33:39Z

bchah
Jan 31, 2024
Collaborator Sponsor

I don't know how OpenVidu would integrate with OvenMediaEngine, but assuming you can push a stream to OME from your backend, here are some answers in the context of OME:

Authentication: Ensure user authentication to control access to recording features.

Put your own API in front of OvenMediaEngine and authenticate requests before passing them through to the OME API. This is how I approach recording in my own app.

Time-limited Recording: Allow users to specify a duration for their recordings.

There are various scheduling capabilities in OME but again you'll do best handling this with your own agent. i.e. whatever mechanism you use to send the 'startRecord' call to OME, schedule a followup 'stopRecord' call at the appropriate time.

Optional Pause and Continue Recording: Implement functionality for users to pause and resume recordings.

Use .TS for recordings which can be muxed together into a final output file using something like FFmpeg. You may need some logic in your application to determine which segments belong to which recording session.

Storage Options: Provide users with the choice to store recordings locally or on S3.

This is a separate integration piece. OME saves recordings to a specified location on the server, but how that storage is mapped is up to the developer / implementer.

2 replies

voorjordanp Jan 31, 2024

Great thank you very much.

Im currently in the approach of trying to modify the OvenLiveKit-Web to test and stream a laptop webcam to the application defined in server.

I have this currently:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OvenLiveKit for Web Quick Start</title>
</head>

<style>
    select {
        display: block;
        width: 200px;
        height: 30px;
    }
</style>

<body>
<p>Your user device Stream (local)</p>
<video id="localVideo" controls src="" style="width: 480px; height: 270px;"></video>
<p>Sending Stream to OvenMediaEngine running at AirenSoft(South Korea)</p>

<button id="startButton">Start Recording</button>
<button id="stopButton">Stop Recording</button>

<select id="videoInputSelect"></select>
<select id="audioInputSelect"></select>

<script src="https://cdn.jsdelivr.net/npm/ovenlivekit@latest/dist/OvenLiveKit.min.js"></script>

<script>
    let ovenLivekit = OvenLiveKit.create();

    // Attach the video element to the OvenLiveKit instance
    ovenLivekit.attachMedia(document.getElementById('localVideo'));

    const videoInputSelect = document.getElementById('videoInputSelect');
    const audioInputSelect = document.getElementById('audioInputSelect');

    // Populate the select elements with the available webcams and microphones
    navigator.mediaDevices.enumerateDevices().then(devices => {
        devices.forEach(device => {
            const option = document.createElement('option');
            option.value = device.deviceId;
            option.text = device.label || 'Unknown Device'; // Use device label or 'Unknown Device' if label is not available
            if (device.kind === 'videoinput') {
                videoInputSelect.appendChild(option);
            } else if (device.kind === 'audioinput') {
                audioInputSelect.appendChild(option);
            }
        });
    });

    // Get the media stream from the selected webcam and microphone
    function getMedia() {
        const videoSource = videoInputSelect.value;
        const audioSource = audioInputSelect.value;
        const constraints = {
            audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
            video: {deviceId: videoSource ? {exact: videoSource} : undefined}
        };
        return ovenLivekit.getUserMedia(constraints);
    }

    // Start streaming to the OvenMediaEngine server and start recording
    function startRecording() {
        getMedia().then(function (stream) {
            ovenLivekit.startStreaming('wss://localhost:3333/app/stream?direction=send&transport=tcp');

            // Replace these with your actual values
            const vhost = 'localhost';
            const app = 'app';
            const streamId = 'your_stream_id'; // replace with your actual stream id

            // Start recording
            fetch(`http://localhost:8081/v1/vhosts/${vhost}/apps/${app}/streams/${streamId}:startRecording`, {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(error => console.error(error));
        });
    }

    // Stop recording
    function stopRecording() {
        // Replace these with your actual values
        const vhost = '127.0.0.1';
        const app = 'app';
        const streamId = 'your_stream_id'; // replace with your actual stream id

        fetch(`http://localhost:8081/v1/vhosts/${vhost}/apps/${app}/streams/${streamId}:stopRecording`, {
            method: 'POST'
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error(error));
    }

    document.getElementById('startButton').addEventListener('click', startRecording);
    document.getElementById('stopButton').addEventListener('click', stopRecording);
    videoInputSelect.addEventListener('change', getMedia);
    audioInputSelect.addEventListener('change', getMedia);
</script>
</body>

</html>

On the server I have:

<?xml version="1.0" encoding="UTF-8" ?>

<Server version="8">
    <Name>OvenMediaEngine</Name>
    <!-- Host type (origin/edge) -->
    <Type>origin</Type>
    <!-- Specify IP address to bind (* means all IPs) -->
    <IP>*</IP>
    <PrivacyProtection>false</PrivacyProtection>
    <!--
    To get the public IP address(mapped address of stun) of the local server.
    This is useful when OME cannot obtain a public IP from an interface, such as AWS or docker environment.
    If this is successful, you can use ${PublicIP} in your settings.
    -->
    <StunServer>stun.ovenmediaengine.com:13478</StunServer>

    <Modules>
        <!--
        Currently OME only supports h2 like all browsers do. Therefore, HTTP/2 only works on TLS ports.
        -->
        <HTTP2>
            <Enable>true</Enable>
        </HTTP2>

        <LLHLS>
            <Enable>true</Enable>
        </LLHLS>

        <!-- P2P works only in WebRTC and is experiment feature -->
        <P2P>
            <!-- disabled by default -->
            <Enable>false</Enable>
            <MaxClientPeersPerHostPeer>2</MaxClientPeersPerHostPeer>
        </P2P>
    </Modules>

    <!-- Settings for the ports to bind -->
    <Bind>
        <Managers>
			<API>
				<Port>${env:OME_API_PORT:8081}</Port>
				<TLSPort>8082</TLSPort>
				<WorkerCount>1</WorkerCount>
			</API>
        </Managers>
        <Providers>
            <!-- Pull providers -->
            <RTSPC>
                <WorkerCount>1</WorkerCount>
            </RTSPC>
            <OVT>
                <WorkerCount>1</WorkerCount>
            </OVT>
            <!-- Push providers -->
            <RTMP>
                <Port>${env:OME_RTMP_PROV_PORT:1935}</Port>
                <WorkerCount>1</WorkerCount>
            </RTMP>
            <SRT>
                <Port>${env:OME_SRT_PROV_PORT:9999}</Port>
                <WorkerCount>1</WorkerCount>
            </SRT>
            <!--
            <MPEGTS>
                    <- Listen on port 4000
                    This is just a demonstration to show that you can configure the port in several ways ->
                    <Port>${env:OME_MPEGTS_PROV_PORT:4000-4001,4004,4005/udp}</Port>
                <Port>${env:OME_MPEGTS_PROV_PORT:4000-4005/udp}</Port>
            </MPEGTS>
            -->
            <WebRTC>
                <Signalling>
                    <Port>${env:OME_WEBRTC_SIGNALLING_PORT:3333}</Port>
                    <TLSPort>${env:OME_WEBRTC_SIGNALLING_TLS_PORT:3334}</TLSPort>
                    <WorkerCount>1</WorkerCount>
                </Signalling>
                <IceCandidates>
                    <IceCandidate>${env:OME_HOST_IP:*}:${env:OME_WEBRTC_CANDIDATE_PORT:10000-10004/udp}</IceCandidate>
                    <TcpRelay>${env:OME_HOST_IP:*}:${env:OME_WEBRTC_TCP_RELAY_PORT:3478}</TcpRelay>
                    <TcpForce>true</TcpForce>
                    <TcpRelayWorkerCount>1</TcpRelayWorkerCount>
                </IceCandidates>
            </WebRTC>
        </Providers>

        <Publishers>
            <!-- The OVT is protocol for ORIGIN-EDGE -->
            <OVT>
                <Port>${env:OME_ORIGIN_PORT:9000}</Port>
                <WorkerCount>1</WorkerCount>
            </OVT>
            <LLHLS>
                <!--
                OME only supports h2, so LLHLS works over HTTP/1.1 on non-TLS port.
                Note that LLHLS runs higher performance over HTTP/2.
                Therefore, it is recommended to use TLS Port.
                -->
                <Port>${env:OME_LLHLS_STREAM_PORT:3333}</Port>
                <TLSPort>${env:OME_LLHLS_STREAM_TLS_PORT:3334}</TLSPort>
                <WorkerCount>1</WorkerCount>
            </LLHLS>
            <WebRTC>
                <Signalling>
                    <Port>${env:OME_WEBRTC_SIGNALLING_PORT:3333}</Port>
                    <TLSPort>${env:OME_WEBRTC_SIGNALLING_TLS_PORT:3334}</TLSPort>
                    <WorkerCount>1</WorkerCount>
                </Signalling>
                <IceCandidates>
                    <IceCandidate>${env:OME_WEBRTC_CANDIDATE_IP:*}:${env:OME_WEBRTC_CANDIDATE_PORT:10000-10004/udp}
                    </IceCandidate>
                    <TcpRelay>${env:OME_WEBRTC_CANDIDATE_IP:*}:${env:OME_WEBRTC_TCP_RELAY_PORT:3478}</TcpRelay>
                    <TcpForce>true</TcpForce>
                    <TcpRelayWorkerCount>1</TcpRelayWorkerCount>
                </IceCandidates>
            </WebRTC>
        </Publishers>
    </Bind>

    <VirtualHosts>
        <!--
            You can include multiple XML files by doing the following:
            <VirtualHost include="sites-enabled/*.xml" />
        -->
        <VirtualHost include="VHost*.xml"/>
        <VirtualHost>
            <Name>default</Name>
            <!--Distribution is a value that can be used when grouping the same vhost distributed across multiple servers. This value is output to the events log, so you can use it to aggregate statistics. -->
            <Distribution>ovenmediaengine.com</Distribution>

            <!-- Settings for multi ip/domain and TLS -->
            <Host>
                <Names>
                    <!-- Host names
                        <Name>stream1.airensoft.com</Name>
                        <Name>stream2.airensoft.com</Name>
                        <Name>*.sub.airensoft.com</Name>
                        <Name>192.168.0.1</Name>
                    -->
                    <Name>*</Name>
                </Names>
                <!--				<TLS>-->
                <!--					<CertPath>/opt/ovenmediaengine/conf/cert.crt</CertPath>-->
                <!--					<KeyPath>/opt/ovenmediaengine/conf/cert.key</KeyPath>-->
                <!--					<ChainCertPath>/opt/ovenmediaengine/conf/cert.ca-bundle</ChainCertPath>-->
                <!--				</TLS>-->
            </Host>

            <!-- Refer https://airensoft.gitbook.io/ovenmediaengine/signedpolicy
            <SignedPolicy>
                <PolicyQueryKeyName>policy</PolicyQueryKeyName>
                <SignatureQueryKeyName>signature</SignatureQueryKeyName>
                <SecretKey>aKq#1kj</SecretKey>

                <Enables>
                    <Providers>rtmp,webrtc,srt</Providers>
                    <Publishers>webrtc,hls,llhls,dash,lldash</Publishers>
                </Enables>
            </SignedPolicy>
            -->

            <!--
            <OriginMapStore>
                In order to use OriginMap, you must enable OVT Publisher in Origin and OVT Provider in Edge.
                <RedisServer>
                    <Host>192.168.0.160:6379</Host>
                    <Auth>!@#ovenmediaengine</Auth>
                </RedisServer>

                This is only needed for the origin server and used to register the ovt address of the stream.
                <OriginHostName>${env:OME_HOST_IP:192.168.0.160}</OriginHostName>
            </OriginMapStore>
            -->

            <!-- Default CORS Settings -->
			<CrossDomains>
				<Url>*</Url>
				<Url>http://localhost:8080</Url>
				<Url>http://site1.localhost:8080</Url>
			</CrossDomains>

            <!-- Settings for applications -->
            <Applications>
                <Application>
					<Name>app</Name>
					<!-- Application type (live/vod) -->
					<Type>live</Type>
					<!-- ... other settings ... -->
					<Publishers>
						<FILE>
							<!-- The directory where the recorded files will be stored -->
							<RootPath>/opt/ovenmediaengine/recordings</RootPath>
							<!-- The path and filename format for the recorded files -->
							<FilePath>/${VirtualHost}/${Application}/${Stream}/${StartTime:YYYYMMDDhhmmss}_${EndTime:YYYYMMDDhhmmss}.ts</FilePath>
							<!-- The path and filename format for the recording information files -->
							<InfoPath>/${VirtualHost}/${Application}/${Stream}.xml</InfoPath>
						</FILE>
					</Publishers>
                    <OutputProfiles>
                        <!--  This option is deprecated. Please use the 'HWAccels' option. -->
                        <!--
                            <HardwareAcceleration>false</HardwareAcceleration>
                        -->

                        <!-- Enable this configuration if you want to hardware acceleration using GPU -->
                        <HWAccels>
                            <Decoder>
                                <Enable>false</Enable>
                                <!--
                                    Setting for Hardware Modules.
                                     - xma :Xilinx Media Accelerator
                                     - qsv :Intel Quick Sync Video
                                     - nv : Nvidia Video Codec SDK
                                     - nilogan: Netint VPU

                                    You can use multiple modules by separating them with commas.
                                    For example, if you want to use xma and nv, you can set it as follows.

                                    <Modules>[ModuleName]:[DeviceId],[ModuleName]:[DeviceId],...</Modules>
                                    <Modules>xma:0,nv:0</Modules>
                                -->
                                <!-- <Modules>nv</Modules> -->
                            </Decoder>
                            <Encoder>
                                <Enable>false</Enable>
                                <!-- <Modules>nv:0</Modules> -->
                            </Encoder>
                        </HWAccels>

                        <OutputProfile>
                            <Name>bypass_stream</Name>
                            <OutputStreamName>${OriginStreamName}</OutputStreamName>

                            <!--
                            You can provide ABR with Playlist. Currently, ABR is supported in LLHLS and WebRTC.

                            <Playlist>
                                <Name>Paid</Name>
                                You can play this playlist with
                                LLHLS : http[s]://<domain>[:port]/<app>/<stream>/<FileName>.m3u8
                                WebRTC : ws[s]://<domain>[:port]/<app>/<stream>/<FileName>
                                Note that the keywords "playlist" and "chunklist" MUST NOT be included in FileName.
                                <FileName>premium</FileName>

                                Options is optional.
                                <Options>
                                    WebRtcAutoAbr : Default value is true
                                    <WebRtcAutoAbr>true</WebRtcAutoAbr>
                                </Options>

                                <Rendition>
                                    <Name>bypass</Name>
                                    <Video>bypass_video</Video>
                                    <Audio>bypass_audio</Audio>
                                </Rendition>
                                <Rendition>
                                    <Name>480p</Name>
                                    <Video>480p</Video>
                                    <Audio>bypass_audio</Audio>
                                </Rendition>
                                <Rendition>
                                    <Name>720p</Name>
                                    <Video>720p</Video>
                                    <Audio>bypass_audio</Audio>
                                </Rendition>
                            </Playlist>
                            <Playlist>
                                <Name>free</Name>
                                <FileName>free</FileName>
                                <Rendition>
                                    <Name>720p</Name>
                                    <Video>720p</Video>
                                    <Audio>bypass_audio</Audio>
                                </Rendition>
                            </Playlist>
                            -->

                            <Encodes>
                                <Video>
                                    <Name>bypass_video</Name>
                                    <Bypass>true</Bypass>
                                </Video>
                                <Audio>
                                    <Name>aac_audio</Name>
                                    <Codec>aac</Codec>
                                    <Bitrate>128000</Bitrate>
                                    <Samplerate>48000</Samplerate>
                                    <Channel>2</Channel>
                                    <BypassIfMatch>
                                        <Codec>eq</Codec>
                                    </BypassIfMatch>
                                </Audio>
                                <Audio>
                                    <Name>opus_audio</Name>
                                    <Codec>opus</Codec>
                                    <Bitrate>128000</Bitrate>
                                    <Samplerate>48000</Samplerate>
                                    <Channel>2</Channel>
                                    <BypassIfMatch>
                                        <Codec>eq</Codec>
                                    </BypassIfMatch>
                                </Audio>
                                <!--
                                <Video>
                                    <Name>video_1280</Name>
                                    <Codec>h264</Codec>
                                    <Bitrate>5024000</Bitrate>
                                    <Framerate>30</Framerate>
                                    <Width>1920</Width>
                                    <Height>1280</Height>
                                    <Preset>faster</Preset>
                                </Video>
                                <Video>
                                    <Name>video_720</Name>
                                    <Codec>h264</Codec>
                                    <Bitrate>2024000</Bitrate>
                                    <Framerate>30</Framerate>
                                    <Width>1280</Width>
                                    <Height>720</Height>
                                    <Preset>faster</Preset>
                                </Video>
                                -->
                            </Encodes>
                        </OutputProfile>
                    </OutputProfiles>
                    <Providers>
                        <OVT/>
                        <WebRTC>
                            <Timeout>30000</Timeout>
                            <CrossDomains>
								<Url>*</Url>
								<Url>http://localhost:8080</Url>
								<Url>http://site1.localhost:8080</Url>
                            </CrossDomains>
                        </WebRTC>
                        <RTMP/>
                        <SRT/>
                        <RTSPPull/>
                        <Schedule>
                            <MediaRootDir>/opt/ovenmediaengine/media</MediaRootDir>
                            <ScheduleFilesDir>/opt/ovenmediaengine/media</ScheduleFilesDir>
                        </Schedule>
                        <!-- <MPEGTS>
                            <StreamMap>
                                    <- Set the stream name of the client connected to the port to "stream_${Port}"
                                    For example, if a client connets to port 4000, OME creates a "stream_4000" stream ->
                                    <Stream>
                                        <Name>stream_${Port}</Name>
                                        <Port>4000,4001-4004</Port>
                                    </Stream>
                                    <Stream>
                                        <Name>stream_4005</Name>
                                        <Port>4005</Port>
                                    </Stream>
                                <Stream>
                                    <Name>stream_${Port}</Name>
                                    <Port>${env:OME_MPEGTS_PROV_PORT:4000-4005/udp}</Port>
                                </Stream>
                            </StreamMap>
                        </MPEGTS> -->
                    </Providers>
                    <Publishers>
                        <AppWorkerCount>1</AppWorkerCount>
                        <StreamWorkerCount>8</StreamWorkerCount>
                        <OVT/>
                        <WebRTC>
                            <Timeout>30000</Timeout>
                            <Rtx>false</Rtx>
                            <Ulpfec>false</Ulpfec>
                            <JitterBuffer>false</JitterBuffer>
                        </WebRTC>
                        <LLHLS>
                            <OriginMode>true</OriginMode>
                            <!--
                            <CacheControl>
                              <MasterPlaylistMaxAge>0</MasterPlaylistMaxAge>
                              <ChunklistMaxAge>0</ChunklistMaxAge>
                              <ChunklistWithDirectivesMaxAge>60</ChunklistWithDirectivesMaxAge>
                              <SegmentMaxAge>-1</SegmentMaxAge>
                              <PartialSegmentMaxAge>-1</PartialSegmentMaxAge>
                            </CacheControl>
                            -->
                            <ChunkDuration>0.5</ChunkDuration>
                            <!-- PartHoldBack SHOULD be at least three times the Part Target Duration -->
                            <PartHoldBack>1.5</PartHoldBack>
                            <SegmentDuration>6</SegmentDuration>
                            <SegmentCount>10</SegmentCount>
                            <CrossDomains>
                                <Url>*</Url>
                            </CrossDomains>
                        </LLHLS>
                        <FILE>
                            <RootPath>/opt/ovenmediaengine/shared_volumes</RootPath>
                            <RootPath>/mnt/shared_volumes</RootPath>
                            <FilePath>
                                /${VirtualHost}/${Application}/${Stream}/${StartTime:YYYYMMDDhhmmss}_${EndTime:YYYYMMDDhhmmss}.ts
                            </FilePath>
                            <InfoPath>/${VirtualHost}/${Application}/${Stream}.xml</InfoPath>
                        </FILE>
                    </Publishers>
                </Application>
            </Applications>
        </VirtualHost>
    </VirtualHosts>
</Server>

I have:

defined an server app that sets location to record streams
Based on the API docs i see I can call the methods start and stopRecord which I implemented in the client.

Some issues with this:

the dropdowns for video and mic have an "unknown device"
I added 2 buttons to trigger start and record but they fail with.

Some more guidance and example code would be very much appreciated.

I did not get to setup the server because of TLS issues with self signed certificate so that might be the problem.

Additional im interested if I could use react / typescript with this library and use some react components to render my ui.
Do some of these exists or would I have to create them from scratch?

I guess this would give some example code for ui etc.:
https://github.com/AirenSoft/OvenSpace

bchah Feb 2, 2024
Collaborator Sponsor

Read the code and you will better understand the dropdown label naming. As for the connection issue, I believe this method will only work over TLS so give that a try. They have a webrtc input demo on the ovenplayer site for your reference.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Recording examples?🙏 #1514

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Recording examples?🙏 #1514

Jarrodsz Jan 31, 2024

Replies: 1 comment · 2 replies

bchah Jan 31, 2024 Collaborator Sponsor

voorjordanp Jan 31, 2024

bchah Feb 2, 2024 Collaborator Sponsor

Jarrodsz
Jan 31, 2024

Replies: 1 comment 2 replies

bchah
Jan 31, 2024
Collaborator Sponsor

bchah Feb 2, 2024
Collaborator Sponsor