lipku / LiveTalking

Real time interactive streaming digital human
https://livetalking-doc.readthedocs.io/
Apache License 2.0
4k stars 576 forks source link

webrtc 如何设置vp9 设置支持透明通道 #150

Open ShelikeSnow opened 4 months ago

ShelikeSnow commented 4 months ago

webrtc 如何设置vp9 设置支持透明通道 ,目前发现修改编码格式能保持透明的 但是webrtc不支持 走webscoket能实现。 在webrtc的情况下是否有解决方案

ShelikeSnow commented 4 months ago

可以通过数据通道实现 需要修改图片格式为bgra

innocentlzx commented 4 months ago

webrtc使用数据通道吗,大概在哪里改能请教一下吗?

ShelikeSnow commented 4 months ago

webrtc使用数据通道吗,大概在哪里改能请教一下吗?

将图片base64在通过数据通道发送 前端在组装就可以了

innocentlzx commented 4 months ago

webrtc使用数据通道吗,大概在哪里改能请教一下吗?

将图片base64在通过数据通道发送 前端在组装就可以了

谢谢!我尝试一下。

innocentlzx commented 4 months ago

webrtc使用数据通道吗,大概在哪里改能请教一下吗?

将图片base64在通过数据通道发送 前端在组装就可以了

大佬,有具体代码吗,这块我不太懂,谢谢你

rade-f commented 3 months ago

可以通过数据通道实现 需要修改图片格式为bgra

不好意思,读了3小时代码并且借助ai分析,仍是没找到关键点。可否告知下如何更改支持透明背景的vp9,或者看代码感觉像是直接推的image,只在合成背景的时候将背景都改为了png 透明。但是这边还需要改色彩空间为rgba吗?期望您的回复

ShelikeSnow commented 3 months ago

可以通过数据通道实现 需要修改图片格式为bgra

不好意思,读了3小时代码并且借助ai分析,仍是没找到关键点。可否告知下如何更改支持透明背景的vp9,或者看代码感觉像是直接推的image,只在合成背景的时候将背景都改为了png 透明。但是这边还需要改色彩空间为rgba吗?期望您的回复

需要的 而且只能是走数据通道处理 直接通过video通道的我也没搞出来 始终会丢失透明通道

rade-f commented 3 months ago

可以通过数据通道实现 需要修改图片格式为bgra

不好意思,读了3小时代码并且借助ai分析,仍是没找到关键点。可否告知下如何更改支持透明背景的vp9,或者看代码感觉像是直接推的image,只在合成背景的时候将背景都改为了png 透明。但是这边还需要改色彩空间为rgba吗?期望您的回复

需要的 而且只能是走数据通道处理 直接通过video通道的我也没搞出来 始终会丢失透明通道

感谢回复,谢谢。刚开始接触python。可以简单的给出要改哪个文件和哪个方法吗?给出路径的话相信可以确定一些。 实在不好意思

KelvinHuang66 commented 3 months ago

webrtc 如何设置vp9 设置支持透明通道 ,目前发现修改编码格式能保持透明的 但是webrtc不支持 走webscoket能实现。 在webrtc的情况下是否有解决方案

我读取png透明背景图,read_imgs也读取到rgba四通道,猜你改的是musereal.py new_frame = VideoFrame.from_ndarray(image, format="bgr24") asyncio.run_coroutine_threadsafe(video_track._queue.put(new_frame), loop) 可以大概说一下怎么传怎么解嘛,我尝试了没有成功

lipku commented 3 months ago

用绿幕可以解决吗,在合成端抠绿

KelvinHuang66 commented 3 months ago

这是否会过于复杂了? 我的想法是webrtc推base64的序列化图片(事先做好透明背景的rgba格式的png图片),显示的时候再反序列化还原回来

用绿幕可以解决吗,在合成端抠绿

rade-f commented 3 months ago

用绿幕可以解决吗,在合成端抠绿

目前在前端用canvas简单的扣掉了背景,效果还不错,但这个事还是启用其它的推流方式由服务端做更为合适,这个办法可应急展示用。这个的效果主要取决于服务端的输出流,如果可以保证除人物外其它背景的颜色都为绿/红/蓝等不会在人物身上出现的纯色,可以很简单的扣掉,前端的性能消耗也很少。我们的做法是保证输入的素材模特身上的衣物等颜色和背景幕布颜色有较大色差,然后扣掉背景,重新附上了纯绿色。

KelvinHuang66 commented 3 months ago

或者参考这个做法试试https://www.rtcdeveloper.cn/cn/community/blog/24079

KelvinHuang66 commented 3 months ago

用绿幕可以解决吗,在合成端抠绿

目前在前端用canvas简单的扣掉了背景,效果还不错,但这个事还是启用其它的推流方式由服务端做更为合适,这个办法可应急展示用。这个的效果主要取决于服务端的输出流,如果可以保证除人物外其它背景的颜色都为绿/红/蓝等不会在人物身上出现的纯色,可以很简单的扣掉,前端的性能消耗也很少。我们的做法是保证输入的素材模特身上的衣物等颜色和背景幕布颜色有较大色差,然后扣掉背景,重新附上了纯绿色。

能分享一下代码吗,前端不是很熟,目前推流是黑色背景,应该就是没有了a通道,感谢

rade-f commented 3 months ago

用绿幕可以解决吗,在合成端抠绿

目前在前端用canvas简单的扣掉了背景,效果还不错,但这个事还是启用其它的推流方式由服务端做更为合适,这个办法可应急展示用。这个的效果主要取决于服务端的输出流,如果可以保证除人物外其它背景的颜色都为绿/红/蓝等不会在人物身上出现的纯色,可以很简单的扣掉,前端的性能消耗也很少。我们的做法是保证输入的素材模特身上的衣物等颜色和背景幕布颜色有较大色差,然后扣掉背景,重新附上了纯绿色。

能分享一下代码吗,前端不是很熟,目前推流是黑色背景,应该就是没有了a通道,感谢

下面是简单的实现,建议不要用黑色背景,因为拍摄时的眼睛,头发 都是偏黑色,容易过滤掉。最好的办法是填充一个不会出现在模特身上的颜色。 const video = document.getElementById('your-video-element'); // 获取 video 元素 const canvas = document.getElementById('your-canvas-element'); // 获取 canvas 元素 const ctx = canvas.getContext('2d');

// 设置 canvas 的尺寸与 video 相同 canvas.width = video.videoWidth; canvas.height = video.videoHeight;

function processVideoFrame() { // 将当前 video 帧绘制到 canvas 上 ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

// 获取 canvas 的像素数据 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data;

// 过滤掉指定的颜色 (例如,红色) for (let i = 0; i < data.length; i += 4) { const red = data[i]; const green = data[i + 1]; const blue = data[i + 2];

// 如果是红色,则将其设置为透明
if (red > 200 && green < 50 && blue < 50) {
  data[i + 3] = 0; // 设置 alpha 值为 0,使其透明
}

}

// 将修改后的像素数据写回 canvas ctx.putImageData(imageData, 0, 0);

// 循环调用 processVideoFrame() 以处理每一帧 requestAnimationFrame(processVideoFrame); }

const fps = 25; // 开始处理视频帧 video.addEventListener('play', function() { setInterval(processVideoFrame, 1000/fps) });

KelvinHuang66 commented 3 months ago

document.getElementById

我用的musetalk跟webrtc,是在webrtcapi.html进行修改?

rade-f commented 3 months ago

document.getElementById

我用的musetalk跟webrtc,是在webrtcapi.html进行修改?

..我是重新写了一遍,没有用例子,大体看下怎么实现的再移植过去吧。

KelvinHuang66 commented 3 months ago

document.getElementById

我用的musetalk跟webrtc,是在webrtcapi.html进行修改?

..我是重新写了一遍,没有用例子,大体看下怎么实现的再移植过去吧。

感谢感谢,respect