340 lines
9.1 KiB
HTML
340 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>WebRTC 前后视角 + PIP + 虚化背景（Apple TV 风格）</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
background: #000;
|
||
overflow: hidden;
|
||
}
|
||
canvas {
|
||
display: block;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
touch-action: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<canvas id="canvas"></canvas>
|
||
|
||
<script src="jswebrtc.min.js"></script>
|
||
<script>
|
||
/* ================= 基础 ================= */
|
||
const canvas = document.getElementById('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
let video = null;
|
||
let player = null;
|
||
let drawing = false;
|
||
|
||
let streamUrl = 'webrtc://1.95.137.212/live/livestream/111';
|
||
|
||
/* ================= 配置 ================= */
|
||
const PIP_WIDTH_RATIO = 0.25;
|
||
const PIP_RADIUS_RATIO = 0.04;
|
||
|
||
/* ===== 虚化背景配置 ===== */
|
||
const BLUR_BG_ENABLED = true;
|
||
const BLUR_RADIUS_PX = 28;
|
||
const BLUR_DARK_ALPHA = 0.12; // 降低暗色强度，让过渡更自然
|
||
|
||
/* ================= PIP 状态 ================= */
|
||
function createPip(x, y) {
|
||
return { x, y, dragging:false, offsetX:0, offsetY:0, visible:true };
|
||
}
|
||
|
||
const pipState = {
|
||
left: createPip(10, 10),
|
||
right: createPip(0, 10),
|
||
active: null
|
||
};
|
||
|
||
/* ================= 主画面状态 ================= */
|
||
let mainView = 'front'; // front / back
|
||
|
||
/* ================= 工具函数 ================= */
|
||
function calcContain16by9(region) {
|
||
const r = 16 / 9;
|
||
let w = region.dw, h = region.dh;
|
||
if (w / h > r) w = h * r;
|
||
else h = w / r;
|
||
return { dx:(region.dw-w)/2, dy:(region.dh-h)/2, dw:w, dh:h };
|
||
}
|
||
|
||
function getPipSize() {
|
||
const w = canvas.width * PIP_WIDTH_RATIO;
|
||
return { w, h: w * 9 / 16 };
|
||
}
|
||
|
||
function hitTest(x, y, pip) {
|
||
const s = getPipSize();
|
||
return x >= pip.x && x <= pip.x + s.w &&
|
||
y >= pip.y && y <= pip.y + s.h;
|
||
}
|
||
|
||
function clamp(pip) {
|
||
const s = getPipSize();
|
||
pip.x = Math.max(0, Math.min(canvas.width - s.w, pip.x));
|
||
pip.y = Math.max(0, Math.min(canvas.height - s.h, pip.y));
|
||
}
|
||
|
||
/* ================= Canvas ================= */
|
||
function resizeCanvas() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
const s = getPipSize();
|
||
pipState.right.x = canvas.width - s.w - 10;
|
||
}
|
||
window.addEventListener('resize', resizeCanvas);
|
||
|
||
/* ================= 拖动 ================= */
|
||
canvas.addEventListener('pointerdown', e => {
|
||
const r = canvas.getBoundingClientRect();
|
||
const x = e.clientX - r.left;
|
||
const y = e.clientY - r.top;
|
||
|
||
for (const k of ['left','right']) {
|
||
const pip = pipState[k];
|
||
if (pip.visible && hitTest(x, y, pip)) {
|
||
pipState.active = pip;
|
||
pip.dragging = true;
|
||
pip.offsetX = x - pip.x;
|
||
pip.offsetY = y - pip.y;
|
||
canvas.setPointerCapture(e.pointerId);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
|
||
canvas.addEventListener('pointermove', e => {
|
||
const pip = pipState.active;
|
||
if (!pip || !pip.dragging) return;
|
||
const r = canvas.getBoundingClientRect();
|
||
pip.x = e.clientX - r.left - pip.offsetX;
|
||
pip.y = e.clientY - r.top - pip.offsetY;
|
||
clamp(pip);
|
||
});
|
||
|
||
canvas.addEventListener('pointerup', resetDrag);
|
||
canvas.addEventListener('pointercancel', resetDrag);
|
||
|
||
function resetDrag() {
|
||
if (pipState.active) pipState.active.dragging = false;
|
||
pipState.active = null;
|
||
}
|
||
|
||
/* ================= WebRTC ================= */
|
||
function createVideoElement() {
|
||
const v = document.createElement('video');
|
||
v.style.display = 'none';
|
||
v.playsInline = true;
|
||
v.muted = true;
|
||
document.body.appendChild(v);
|
||
return v;
|
||
}
|
||
|
||
function destroyPlayer() {
|
||
drawing = false;
|
||
|
||
if (player) {
|
||
try { player.destroy(); } catch(e) {}
|
||
player = null;
|
||
}
|
||
|
||
if (video) {
|
||
video.pause();
|
||
video.srcObject = null;
|
||
video.remove();
|
||
video = null;
|
||
}
|
||
}
|
||
|
||
function initPlayer() {
|
||
destroyPlayer();
|
||
|
||
video = createVideoElement();
|
||
|
||
console.log('[WebRTC] init:', streamUrl);
|
||
|
||
player = new JSWebrtc.Player(streamUrl, {
|
||
video,
|
||
autoplay: true,
|
||
onPlay: () => {
|
||
resizeCanvas();
|
||
drawing = true;
|
||
requestAnimationFrame(draw);
|
||
},
|
||
onError: err => {
|
||
console.error('[WebRTC] error', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
/* ================= 圆角 ================= */
|
||
function roundRectPath(x, y, w, h, r) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(x+r, y);
|
||
ctx.arcTo(x+w, y, x+w, y+h, r);
|
||
ctx.arcTo(x+w, y+h, x, y+h, r);
|
||
ctx.arcTo(x, y+h, x, y, r);
|
||
ctx.arcTo(x, y, x+w, y, r);
|
||
ctx.closePath();
|
||
}
|
||
|
||
function drawBlurBackground(video) {
|
||
if (!BLUR_BG_ENABLED) return;
|
||
|
||
const vw = video.videoWidth;
|
||
const vh = video.videoHeight;
|
||
|
||
let sx = 0, sy = 0, sw = vw / 2, sh = vh / 2;
|
||
if (mainView === 'back') sx = vw / 2;
|
||
|
||
const main = calcContain16by9({ dw: canvas.width, dh: canvas.height });
|
||
|
||
/* ========= 1. 整屏强模糊背景 ========= */
|
||
ctx.save();
|
||
ctx.filter = `blur(${BLUR_RADIUS_PX}px)`;
|
||
ctx.drawImage(
|
||
video,
|
||
sx, sy, sw, sh,
|
||
0, 0, canvas.width, canvas.height
|
||
);
|
||
ctx.restore();
|
||
|
||
ctx.fillStyle = `rgba(0,0,0,${BLUR_DARK_ALPHA})`;
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
/* ========= 2. 盖回清晰画面（关键） ========= */
|
||
ctx.save();
|
||
|
||
const cx = main.dx + main.dw / 2;
|
||
const cy = main.dy + main.dh / 2;
|
||
|
||
const base = Math.min(main.dw, main.dh);
|
||
|
||
// ✅ 完全清晰的“安全区”
|
||
const clearRadius = base * 0.42;
|
||
|
||
// ✅ 开始渐变的边界
|
||
const fadeRadius = base * 0.62;
|
||
|
||
const mask = ctx.createRadialGradient(
|
||
cx, cy, clearRadius,
|
||
cx, cy, fadeRadius
|
||
);
|
||
|
||
/*
|
||
0.0 ~ 1.0 的意义：
|
||
0 = 不透明（画清晰）
|
||
1 = 完全透明（露出模糊）
|
||
*/
|
||
|
||
// ★ 重点：前段完全没有任何渐变
|
||
mask.addColorStop(0.0, 'rgba(0,0,0,1)');
|
||
mask.addColorStop(0.65, 'rgba(0,0,0,1)');
|
||
|
||
// ★ 从这里才“开始虚”
|
||
mask.addColorStop(0.82, 'rgba(0,0,0,0.4)');
|
||
mask.addColorStop(1.0, 'rgba(0,0,0,0)');
|
||
|
||
ctx.globalCompositeOperation = 'destination-over';
|
||
ctx.fillStyle = mask;
|
||
ctx.fillRect(
|
||
main.dx - base,
|
||
main.dy - base,
|
||
main.dw + base * 2,
|
||
main.dh + base * 2
|
||
);
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ================= PIP ================= */
|
||
function drawPip(pip, sx, sy, sw, sh) {
|
||
if (!pip.visible) return;
|
||
|
||
const s = getPipSize();
|
||
const r = s.w * PIP_RADIUS_RATIO;
|
||
|
||
ctx.save();
|
||
roundRectPath(pip.x, pip.y, s.w, s.h, r);
|
||
ctx.clip();
|
||
ctx.drawImage(video, sx, sy, sw, sh, pip.x, pip.y, s.w, s.h);
|
||
ctx.restore();
|
||
}
|
||
|
||
/* ================= 绘制 ================= */
|
||
function draw() {
|
||
if (!drawing || !video || video.readyState < video.HAVE_ENOUGH_DATA) {
|
||
requestAnimationFrame(draw);
|
||
return;
|
||
}
|
||
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
const vw = video.videoWidth;
|
||
const vh = video.videoHeight;
|
||
|
||
/* ① 虚化背景：仅基于当前主视角内容 */
|
||
drawBlurBackground(video);
|
||
|
||
/* ② 主画面（清晰） */
|
||
const main = calcContain16by9({ dw: canvas.width, dh: canvas.height });
|
||
|
||
let sx = 0, sy = 0, sw = vw / 2, sh = vh / 2;
|
||
if (mainView === 'back') sx = vw / 2;
|
||
|
||
ctx.drawImage(
|
||
video,
|
||
sx, sy, sw, sh,
|
||
main.dx, main.dy, main.dw, main.dh
|
||
);
|
||
|
||
/* ③ PIP（小窗） */
|
||
drawPip(pipState.left, 0, vh/2, vw/2, vh/2);
|
||
drawPip(pipState.right, vw/2, vh/2, vw/2, vh/2);
|
||
|
||
requestAnimationFrame(draw);
|
||
}
|
||
|
||
/* ================= JS 接口 ================= */
|
||
window.setPipVisible = function({location, flag}) {
|
||
if (location === 'left') pipState.left.visible = !!flag;
|
||
if (location === 'right') pipState.right.visible = !!flag;
|
||
};
|
||
|
||
window.setMainView = function({view}) {
|
||
if (view === 'front' || view === 'back') mainView = view;
|
||
};
|
||
|
||
window.toggleMainView = function() {
|
||
mainView = (mainView === 'front') ? 'back' : 'front';
|
||
};
|
||
|
||
window.setStreamUrl = function({url}) {
|
||
if (!url) return;
|
||
streamUrl = url;
|
||
setTimeout(initPlayer, 80);
|
||
};
|
||
|
||
window.refreshSelf = function() {
|
||
location.reload();
|
||
};
|
||
|
||
/* ================= 启动 ================= */
|
||
resizeCanvas();
|
||
initPlayer();
|
||
|
||
</script>
|
||
</body>
|
||
</html> |