WebRTC
Media Recording in browser
May 01, 2020
1 min

now day browser has capability record the webcam or screen or audio. it has been so much easy with came up with webrtc

can get audio or video or screen stream using getusermedia webapi

const accessMediaDevices = async constraints => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    console.error('navigator.getUserMedia error:', e);
    //errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  }
};

can record the stream using MediaRecorder api

const initialMediaRecorder = async (stream,options) => {
  try {
    mediaRecorder = new MediaRecorder(stream, options);
    mediaRecorder.onstop = onStopMediaRecorder;
    mediaRecorder.ondataavailable = handleDataAvailable;
  } catch (e) {
    console.log(`Exception while creating MediaRecorder: ${JSON.stringify(e)}`);
    return;
  }
};

tips

lets talk about some challenges

record in ios safari

  1. ios safari does not yet support MediaRecorder api. it can do using HTML Media Capture
<input
      id="ios-recorder"
      type="file"
      accept="video/*"
      capture="user"
      style={{ display: 'none' }}
    />
  1. safari does not support webm you have to convert it to the mp4

Tags

webrtc

Related Posts

WebRTC
Debug your WebRTC app with webrtc-internals API trace
June 29, 2021
2 min