Custom input
In addition to input sources like the camera, microphone, and screen sharing, the ApsaraVideo Real-time Communication (ARTC) Web SDK supports custom input. For example, you can get video and audio tracks from a video file or capture an image from a canvas to send to a remote user. This topic describes how to implement custom input.
Get tracks from a video file
You can use the captureStream method of HTMLMediaElement to get video and audio tracks from a video file in JavaScript.
const videoElement = document.createElement('video');
videoElement.width = 320; // Specify the width of the video element.
videoElement.height = 180; // Specify the height of the video element.
videoElement.loop = true; // Set to true to loop the video playback.
videoElement.src = 'https://example-domain.com/example-video.mp4'; // URL of the video file to ingest.
videoElement.crossOrigin = 'anonymous'; // Allow cross-origin resource sharing (CORS).
videoElement.play(); // The video must be playing.
const videoStream = videoElement.captureStream(); // Call the captureStream() method.
const [videoTrack] = videoStream.getVideoTracks(); // Get the first video track from the stream.
const [audioTrack] = videoStream.getAudioTracks(); // Get the first audio track from the stream.(Optional) Improve compatibility
Note the browser compatibility of the captureStream() method for HTMLMediaElement. In Firefox, you must use the moz prefix to call this method. Safari does not currently support this method.
Desktop browser support for this method starts with Chrome 62, Edge 79, and Opera 49. Mobile browser support starts with Chrome for Android 62, Opera for Android 46, Samsung Internet 8.0, and WebView for Android 62.
To support ingesting video files on a wider range of browsers, use the more compatible captureStream method of HTMLCanvasElement. Note that this approach may introduce additional performance overhead.
Ingest the audio and video tracks
Call the startScreenShare method of the AliRtcEngine instance to ingest the video and audio tracks.
instance.startScreenShare({
videoTrack,
audioTrack,
}).then(() => {
console.log('Custom stream ingest successful.');
}).catch(() => {
console.error('Custom stream ingest failed.');
});Remote users receive the custom stream
Remote users receive the custom stream in the same way they receive a screen-sharing stream. For more information, see Screen Sharing.
You cannot use the same AliRtcEngine instance to ingest a screen-sharing stream and a custom stream simultaneously.