[Shanda conference] software performance optimization and bug repair

preface

This article is mainly used to record the client code in several projects performance optimization as well as Malignant bug Repair of .

modify WebRTC Encoder

2022 year 5 month 30 Japan

It was found in the test that , When the software makes a video call ,CPU High load , After testing, it was found that it was due to WebRTC By default VP8 The encoder 、 decoder . In order to reduce CPU load , I allow users to choose to use CPU or GPU Rendering . When using GPU When video rendering , Will use H264 The encoder of .

// NOTE:  Supported encoders 
const senderCodecs = RTCRtpSender.getCapabilities('video')?.codecs as RTCRtpCodecCapability[];
const receiverCodecs = RTCRtpReceiver.getCapabilities('video')?.codecs as RTCRtpCodecCapability[];
(() => {
    
	const senderH264Index = senderCodecs?.findIndex(
		(c) =>
			c.mimeType === 'video/H264' &&
			c.sdpFmtpLine ===
				'level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
	);
	const senderH264 = (senderCodecs as Array<RTCRtpCodecCapability>)[
		senderH264Index ? senderH264Index : 0
	];
	senderCodecs?.splice(senderH264Index ? senderH264Index : 0, 1);
	senderCodecs?.unshift(senderH264);

	const receiverH264Index = receiverCodecs?.findIndex(
		(c) =>
			c.mimeType === 'video/H264' &&
			c.sdpFmtpLine ===
				'level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f'
	);
	const receiverH264 = (receiverCodecs as Array<RTCRtpCodecCapability>)[
		receiverH264Index ? receiverH264Index : 0
	];
	receiverCodecs?.splice(receiverH264Index ? receiverH264Index : 0, 1);
	receiverCodecs?.unshift(receiverH264);
})();
export {
     senderCodecs, receiverCodecs };

Save the encoder , Use if necessary H264 The encoder / decoder .

The user is missing some multimedia devices

2022 year 6 month 2 Japan

Because of our WebRTC The default user transmits audio and video on two tracks , Once the user does not have certain equipment, the whole process may not go on . In order to alleviate this situation , I will get the media stream failure try...catch operation , And will return a default media stream .

let defaultVideoWidget: HTMLVideoElement | undefined;
function getDefaultStream(): Promise<MediaStream> {
    
	return new Promise((resolve) => {
    
		if (defaultVideoWidget) {
    
			resolve((defaultVideoWidget as any).captureStream(1) as MediaStream);
		} else {
    
			defaultVideoWidget = document.createElement('video');
			defaultVideoWidget.autoplay = true;
			defaultVideoWidget.src = '../electronAssets/null.mp4';
			defaultVideoWidget.loop = true;
			defaultVideoWidget.onloadedmetadata = () => {
    
				resolve((defaultVideoWidget as any).captureStream(1) as MediaStream);
			};
		}
	});
}

Message tone Bug Repair

2022 year 6 month 4 Japan

Because our message tone uses AudioContext Realization , Which has a large number of Asynchronous operations . In the initial development, I didn't realize the problems caused by such asynchronous operations , In subsequent tests, it was found that the asynchronous operation led to Stop playing It's hard to work properly . therefore , For asynchronous operations , I will modify the code of the message tone to the following version ：

// Prompt.ts
export const AUDIO_TYPE = {
    
	MESSAGE_RECEIVED: 'info',
	WEBRTC_CALLING: 'call',
	WEBRTC_ANSWERING: 'answer',
};

export const buildPropmt = function (audioType: string, loop = false) {
    
	const audioContext = new AudioContext();
	let source = audioContext.createBufferSource();
	const audio = require(`./audios/${
      audioType}.aac`);

	let abortController = new AbortController();
	let abortSignal = abortController.signal;

	const startAudioPropmt = () => {
    
		if (source.buffer) {
    
			source.stop();
			source = audioContext.createBufferSource();
		}
		fetch(audio.default, {
    
			signal: abortSignal,
		})
			.then((res) => {
    
				return res.arrayBuffer();
			})
			.then((arrayBuffer) => {
    
				return audioContext.decodeAudioData(arrayBuffer, (decodeData) => {
    
					return decodeData;
				});
			})
			.then((audioBuffer) => {
    
				stopAudioPropmt();
				source.buffer = audioBuffer;
				source.loop = loop;
				source.connect(audioContext.destination);
				source.start(0);
			})
			.catch((message) => {
    
				console.log(message);
			});
	};

	const stopAudioPropmt = () => {
    
		if (source.buffer) {
    
			source.stop();
			source = audioContext.createBufferSource();
		} else {
    
			abortController.abort();
			abortController = new AbortController();
			abortSignal = abortController.signal;
		}
	};
	return [startAudioPropmt, stopAudioPropmt];
};

The asynchronous operation will now be terminated first , Prevent operation failure from causing irreparable problems in the subsequent use of the program bug .