绑定到你要放置的对应video元素上
import Danmaku from 'danmaku';
let danmaku
danmaku = new Danmaku({
container: document.getElementById('localdiv'),
media: document.getElementById(`localVideo`),
speed: 100
});
danmaku.emit({text: '直播间已开启，请踊跃发言', style: {fontSize: '20px',color: '#ff5500'}})
danmaku.show();
创建 RTCPeerConnection
let dataChannelMap//全局声明
const conn = new RTCPeerConnection({iceServers});
conn.createDataChannel("Channel", {//建立管道
ordered: true,
protocol: "json",
});
dataChannelMap.set(peerId,localChannel) // 存储到对应 peerId 的通道
setupChannelEvents(peerId);//通道事件绑定函数（消息接收等）
// ✅ 通道事件绑定函数（消息接收等）
function setupChannelEvents(peerId) {
const channel= dataChannelMap.get(peerId)
console.log("dataChannelMap",dataChannelMap)
console.log("setupChannelEvents",peerId)
channel.onmessage = (e) => {
...
displayMessage(peerId, content.content, false); // 显示接收的消息
}
channel.onopen = () => {
console.log(`与 ${peerId} 的通道已打开`);
};
}
在你监听管道信息时将管道信息传到Danmaku
channel.onmessage = (e) => {
const content = JSON.parse(e.data)
console.log(`来自 ${peerId}: ${e.data}`);
let comment = {//可以定义样式
text: content.content,
style: {
fontSize: '20px',
color: 'red'
},
};
danmaku.emit(comment);
可以自定义文字滑过速度等等，当然也可以自己创建元素来实现弹幕组件。
