渴望wlb的仰泳鲈鱼很郁闷 level
获赞
6
粉丝
9
关注
71
看过 TA
73
华南理工大学
2025
golang
IP属地:上海
111
私信
关注
2024-09-21 16:39
华南理工大学 golang
想在dplayer播放器中实现弹幕不遮挡人物的功能点。1.在vue文件中,div标签引入dplayer:<div ref="videoRef" :class="{ 'player': true, 'dplayer-comment-show': !userStore.userInfoData.token }"id="dplay"/>2.在ts文件中,初始化dplayer对象://初始化播放器const dp = new DPlayer({container: videoRef.value,loop: true, // 循环播放lang: "zh-cn", // 语言logo: "",autoplay: false,//todo:开发阶段先关闭自动播放danmaku: {id: videoID.value.toString(),//弹幕池id,需要唯一api: danmakuApi,token: userStore.userInfoData.token,//弹幕后端验证 tokenunlimited: true,},mutex: false, // 互斥,阻止多个播放器同时播放video: {quality: quality,defaultQuality: 0,url: "不填",pic: videoInfo.videoInfo.cover,},});dp.video.crossOrigin='anonymous'  //解决canvas跨域错误3.加载tf开源人物分割模型:const model=bodySegmentation.SupportedModels.MediaPipeSelfieSegmentationconst segmenterConfig:MediaPipeSelfieSegmentationMediaPipeModelConfig={runtime: 'mediapipe', // or 'tfjs'solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation',modelType: 'general'}const segmenter=await bodySegmentation.createSegmenter(model,segmenterConfig)4.检测每一帧,绘制出二进制mask文件:dp.on("timeupdate",async ()=>{//初始化canvas,设置width和heightconst canvas=document.createElement('canvas')canvas.width=dp.video.videoWidthcanvas.height=dp.video.videoHeight//1.绘制视频帧到canvas画布const ctx=canvas.getContext('2d')ctx.drawImage(dp.video,0,0,canvas.width,canvas.height)const imageData=ctx.getImageData(0,0,canvas.width,canvas.height)//2.人物分割const segmentation =await segmenter.segmentPeople(imageData)//3.生成二进制掩码const foregroundColor = { r: 0, g: 0, b: 0, a: 0 }const backgroundColor = { r: 0, g: 0, b: 0, a: 255 }const mask=await toBinaryMask(segmentation,foregroundColor,backgroundColor)//4.清除画布并绘制掩码ctx.clearRect(0,0,canvas.width,canvas.height)ctx.drawImage(await segmentation[0].mask.toCanvasImageSource(),0,0,canvas.width,canvas.height)//5.设置混合模式ctx.globalCompositeOperation="source-out";//6.反向填充黑色ctx.fillRect(0,0,canvas.width,canvas.height)//7.保存mask图片const dataUrl=canvas.toDataURL('image/png',0)//8.可以选择下载这些png图片const link=document.createElement('a')link.href=dataUrllink.download='mask_image.png'document.body.appendChild(link)link.click()document.body.removeChild(link)})不知道如何选中dplayer.danmaku的弹幕对象,然后对弹幕进行蒙版处理,求指点!附一张处理得到的mask图片:
0 点赞 评论 收藏
分享

创作者周榜

更多
关注他的用户也关注了:
牛客网
牛客网在线编程
牛客网题解
牛客企业服务