Typically, the Agora Web SDK uses the default audio and video modules for capturing video in real-time communications.
However, the default modules may not meet your development requirements, such as in the following scenarios:
This article describes how to customize the video source with the Agora Web SDK.
Before proceeding, ensure that you have read the quickstart guides and implemented basic real-time audio and video functions in your project.
The SDK provides createCustomVideoTrack
to support creating a video track from a MediaStreamTrack
object. You can use this method to customize the video source.
For example, you can call getUserMedia
to get a MediaStreamTrack
object, and then pass this object to createCustomAudioTrack
to create an audio track to use in the SDK.
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then((mediaStream) => {
const videoMediaStreamTrack = mediaStream.getVideoTracks()[0];
// Create a custom video track
return AgoraRTC.createCustomVideoTrack({
mediaStreamTrack: videoMediaStreamTrack,
});
})
.then((localVideoTrack) => {
// ...
});
MediaStreamTrack
refers to theMediaStreamTrack
object supported by the browser. See MediaStreamTrack API for details. You can also call HTMLMediaElement.captureStream or HTMLCanvasElement.captureStream to get theMediaStreamTrack
object.