Canvas流显示到Video元素黑屏问题排查（附JS代码）

核心问题原因 #

1. Canvas默认透明背景：canvas初始背景为透明，捕获的媒体流中透明区域会被渲染为黑色，这是视频黑屏的主要原因。
2. Canvas尺寸初始化时机错误：在constructor中调用resize时，localVideo可能还未完成布局，getBoundingClientRect()返回的宽高为0，导致canvas没有有效绘制区域。
3. 浏览器自动播放策略限制：现代浏览器禁止非静音视频自动播放，localVideo.play()可能被浏览器拦截。

修复后的代码 #

const localVideo = document.getElementById('localVideo')

class SignTool {
    constructor() {
        this.initVars()
        this.currentColor = "white";
        // 等待video布局完成后再初始化尺寸和事件
        setTimeout(() => {
            this.resize(this.ctx);
            // 初始化canvas背景
            this.initCanvasBackground();
            this.initEvents();
        }, 0);
    }
    
    initVars() {
        this.canvas = this.createCanvas()
        this.ctx = this.canvas.getContext("2d")
        this.isMouseClicked = false
        this.isMouseInCanvas = false
        this.prevX = 0
        this.currX = 0
        this.prevY = 0
        this.currY = 0
    }
    
    initEvents() {
        this.canvas.onmousemove = (e) => {this.onMouseMove(e)}
        this.canvas.onmousedown = (e) => this.onMouseDown(e)
        this.canvas.onmouseup = () => this.onMouseUp()
        this.canvas.onmouseout = () => this.onMouseOut()
        this.canvas.onmouseenter = (e) => this.onMouseEnter(e)
        
        let canvasStream = this.canvas.captureStream();
        localVideo.srcObject = canvasStream;
        // 设置视频静音以满足自动播放要求
        localVideo.muted = true;
        localVideo.onloadedmetadata = () => {
            localVideo.play().catch(err => console.log(err));
        }
        // 监听窗口resize，同步canvas尺寸
        window.addEventListener('resize', () => this.resize(this.ctx));
    }
    
    initCanvasBackground() {
        // 绘制黑色背景（可根据需求改为其他颜色）
        this.ctx.fillStyle = 'black';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }
    
    onMouseDown(e) {
        this.isMouseClicked = true
        this.updateCurrentPosition(e)
    }

    createCanvas() {
        const canvasDiv = document.querySelector('.canvas-holder')
        let canvas = document.createElement('canvas');
        canvas.id = "canvas"
        canvasDiv.appendChild(canvas);
        canvas.style.position = 'fixed';
        return canvas
    }
    
    onMouseUp() {
        this.isMouseClicked = false
    }
    
    onMouseEnter(e) {
        this.isMouseInCanvas = true
        this.updateCurrentPosition(e)
    }
    
    resize(ctx) {
        const rect = localVideo.getBoundingClientRect();
        ctx.canvas.width = rect.width;
        ctx.canvas.height = rect.height;
        // 每次resize后重新绘制背景
        this.initCanvasBackground();
    }
    
    onMouseOut() {
        this.isMouseInCanvas = false
    }
    
    onMouseMove(e) {
        if (this.isMouseClicked && this.isMouseInCanvas) {
            this.updateCurrentPosition(e)
            this.draw()
        }
    }
    
    updateCurrentPosition(e) {
        this.prevX = this.currX
        this.prevY = this.currY
        this.currX = e.clientX - this.canvas.offsetLeft
        this.currY = e.clientY - this.canvas.offsetTop
    }
    
    draw() {
        this.ctx.beginPath()
        this.ctx.moveTo(this.prevX, this.prevY)
        this.ctx.lineTo(this.currX, this.currY)
        this.ctx.strokeStyle = this.currentColor
        this.ctx.lineWidth = 2
        this.ctx.stroke()
        this.ctx.closePath()
    }
}

document.addEventListener('DOMContentLoaded', _ => {
    new SignTool()
})

关键修改说明 #

• 添加Canvas背景：新增initCanvasBackground()方法，初始化和resize时绘制非透明背景，避免流中出现透明区域导致黑屏。
• 调整初始化时机：通过setTimeout延迟初始化尺寸和事件，确保localVideo完成布局后再获取正确的宽高。
• 满足自动播放要求：给localVideo设置muted = true，并在play()后添加错误捕获，避免浏览器拦截自动播放。
• 监听窗口resize：同步调整canvas尺寸，保证流的画面始终匹配video容器大小。

内容的提问来源于stack exchange，提问作者mohamed naser