当前位置：首页 > news >正文

音视频开发远端未发布视频占位图

news 2025/10/22 12:15:43

音视频开发时候，如果对方未发布视频，或者后面才发布视频，或停止发送流时，占位图的优势就有了；
总结一句话就是：比黑屏好；

效果图

请添加图片描述

调用API

/* 先new一个@params: parentEle: HTMLElement; 说明：父元素;@params: useName: String;   说明：用户姓名;
*/
const  avatarSpace = new AvatarCanvasSpace(parentEle, useName);
// 单独更新名字
avatarSpace.updateUserName(useName);
// 占位方式1：绘制Canvas占位
avatarSpace.createCavas();
// 占位方式2：绘制Video占位
avatarSpace.createVideo();// 清理掉之前父元素插入的占位
avatarSpace.clearRepeatCreate();
// 销毁
avatarSpace.destroy();

核心方法

// 头像占位
class AvatarCameraSpace {video: HTMLVideoElement | any;myCanvas: HTMLCanvasElement | any;ctx: CanvasRenderingContext2D | any ;streamCanvas: MediaStream | any;parentDiv: HTMLElement | any;useName: string | any;constructor(parentDiv: HTMLElement, useName: string) {this.initCanvasAndVideo();this.parentDiv = parentDiv;this.useName = useName;}initCanvasAndVideo() {this.video = document.createElement('video');this.myCanvas = document.createElement('canvas');this.ctx = this.myCanvas.getContext('2d');// 考虑占位1秒捕获1帧也足够用了this.streamCanvas = this.myCanvas.captureStream(1);this.addVideoAttributes();}// 添加属性的方法addVideoAttributes() {// 需要添加的属性列表（键值对形式）const attributes = {// 自动播放autoplay: '',// 控制视频在inline（内嵌）模式下播放，而非默认的全屏播放（尤其针对 iOS 设备）playsinline: '','webkit-playsinline': 'true',// 这是腾讯 X5 内核（微信、QQ、部分手机浏览器采用的内核）的私有属性，强制视频使用 H5 播放器，而非 X5 内核默认的全屏播放器。'x5-video-player-type': 'h5',// 腾讯 X5 内核的私有属性，进一步强化内嵌播放行为，确保视频在 X5 内核中不会自动全屏，与标准 playsinline 功能一致，但仅针对 X5 环境生效'x5-playsinline': 'true',};// 循环添加属性Object.entries(attributes).forEach(([key, value]) => {this.video.setAttribute(key, value);});// 补充：现代浏览器自动播放通常需要静音（可选，根据需求添加）this.video.muted = true; // 直接赋值（muted 是布尔属性，true 表示启用）}updateUserName(useName: string) {this.useName = useName;}// 创建canvas占位createCavas() {// 防止重复创建this.clearRepeatCreate();const canvas = this.myCanvas;const ctx = this.ctx;if (!canvas || !ctx) {return;};this.parentDiv.innerHTML = '';this.parentDiv.appendChild(canvas);this.drawCanvas();}// 绘制用户头像占位drawCanvas() {const canvas = this.myCanvas;const ctx = this.ctx;if (!canvas || !ctx) {return;};const useName = this.useName;canvas.width = 1280;canvas.height = 720;// 设置样式让canvas自适应父容器canvas.style.width = '100%';canvas.style.height = '100%';canvas.style.display = 'block';// 绘制黑色背景this.ctx.fillStyle = '#000000';ctx.fillRect(0, 0, canvas.width, canvas.height);// 计算蓝色方框的位置（居中）const boxSize = 120;const boxX = (canvas.width - boxSize) / 2;const boxY = (canvas.height - boxSize) / 2 - 50; // 稍微向上移动一点，给下方名字留出空间// 圆角半径（可根据需要调整，建议10-20之间）const borderRadius = 15;// 绘制蓝色方框ctx.fillStyle = '#1689F4';// 开始绘制路径ctx.beginPath();// 左上角圆角ctx.moveTo(boxX + borderRadius, boxY);// 上边缘ctx.lineTo(boxX + boxSize - borderRadius, boxY);// 右上角圆角ctx.arcTo(boxX + boxSize, boxY, boxX + boxSize, boxY + borderRadius, borderRadius);// 右边缘ctx.lineTo(boxX + boxSize, boxY + boxSize - borderRadius);// 右下角圆角ctx.arcTo(boxX + boxSize, boxY + boxSize, boxX + boxSize - borderRadius, boxY + boxSize, borderRadius);// 下边缘ctx.lineTo(boxX + borderRadius, boxY + boxSize);// 左下角圆角ctx.arcTo(boxX, boxY + boxSize, boxX, boxY + boxSize - borderRadius, borderRadius);// 左边缘ctx.lineTo(boxX, boxY + borderRadius);// 左上角收尾圆角ctx.arcTo(boxX, boxY, boxX + borderRadius, boxY, borderRadius);// 闭合路径ctx.closePath();// 填充路径（绘制出圆角矩形）ctx.fill();// 获取名字的第一个字const firstChar = useName.charAt(0);// 在蓝色方框中绘制第一个字（居中）ctx.fillStyle = '#FFFFFF'; // 白色文字ctx.font = '80px Arial';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText(firstChar, boxX + boxSize / 2, boxY + boxSize / 2);// 在蓝色方框下方绘制全名ctx.font = '40px Arial';ctx.fillText(`${useName.length > 12 ? (useName.substring(0, 12) + '...') : useName}`, canvas.width / 2, boxY + boxSize + 60);console.log('drawCanvas', useName);}// 创建video占位createVideo() {// 防止重复创建this.clearRepeatCreate();const canvas = this.myCanvas;const ctx = this.ctx;const video = this.video;if (!canvas || !ctx) {return;};this.parentDiv.innerHTML = '';this.parentDiv.appendChild(video);// 设置样式让video自适应父容器video.style.width = '100%';video.style.height = '100%';video.style.display = 'block';/*直接给流就行; canvas重绘后captureStream会自己捕捉更新video 元素会显示 canvas 的当前状态; 如果 canvas 的内容不再更新，video 元素就会停留在最后一帧;如果是WebRTC则会持续读取流，实时显示视频; 我们的需求是占位所以足够了*/video.srcObject = this.streamCanvas;video.play();/* 绘制用户头像占位因为video会显示canvas的当前状态，所以我们需要在canvas上绘制用户头像占位; 否则video会显示一个黑色的方框;*/this.drawCanvas();}// 父元素是否还存在parentDivIsExists()  {// this.parentDiv.isConnected();  这个方法在ie11下不支持return document.body.contains(this.parentDiv);}myCanvasIsExists() {if (!this.myCanvas) { return false; }return document.body.contains(this.myCanvas);}myVideoIsExists() {if (!this.video) { return false; }return document.body.contains(this.video);}clearRepeatCreate() {try {// 如果当前canvas还存在,则移除if (this.parentDiv.contains(this.myCanvas)) {this.parentDiv.removeChild(this.myCanvas);}// 如果当前video还存在,则移除if (this.parentDiv.contains(this.video)) {this.parentDiv.removeChild(this.video);}} catch(err) {console.log('销毁重复创建失败', err);}}// 销毁destroy() {if (!this.video) { return; }this.clearRepeatCreate();this.video = null;this.myCanvas = null;this.ctx = null;this.streamCanvas = null;this.useName = null;}
}
export default AvatarCameraSpace;