求助贴-前端
想在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,//弹幕后端验证 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图片:
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,//弹幕后端验证 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图片:
全部评论
相关推荐
10-22 20:35
深圳大学 商务经理 点赞 评论 收藏
分享