渴望wlb的仰泳鲈鱼很郁闷 level
获赞
3
粉丝
6
关注
46
看过 TA
32
华南理工大学
2025
golang
IP属地:广东
111
私信
关注
2024-09-21 16:39
华南理工大学 golang
想在dplayer播放器中实现弹幕不遮挡人物的功能点。1.在vue文件中,div标签引入dplayer: 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,//弹幕后端验证 token                unlimited: true,            },            mutex: false, // 互斥,阻止多个播放器同时播放            video: {                quality: quality,                defaultQuality: 0,                url: "不填",                 pic: videoInfo.videoInfo.cover,            },        });        dp.video.crossOrigin='anonymous'  //解决canvas跨域错误3.加载tf开源人物分割模型:const model=bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation        const 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和height            const canvas=document.createElement('canvas')            canvas.width=dp.video.videoWidth            canvas.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=dataUrl            link.download='mask_image.png'            document.body.appendChild(link)            link.click()            document.body.removeChild(link)})不知道如何选中dplayer.danmaku的弹幕对象,然后对弹幕进行蒙版处理,求指点!附一张处理得到的mask图片:
0 点赞 评论 收藏
分享
关注他的用户也关注了:
牛客网
牛客企业服务