Aurelia中如何将摄像头输出绑定到video元素的srcObject属性？

问题核心在于：Aurelia默认的.bind绑定是针对HTML属性（attribute）的，而srcObject是video DOM元素的原生属性（property），HTML中并没有对应的srcObject属性，直接用srcObject.bind无法正确将流赋值给video元素。

解决方案1：使用ref获取元素并手动赋值（推荐） #

修改你的HTML，给video元素添加ref属性以便在ViewModel中引用：

<video id="video" ref="videoElement" if.bind="cameraStream">Video stream not available.</video>

然后在ViewModel中获取到流后，直接赋值给video元素的srcObject，并调用play()启动播放：

activate() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
        .then((stream) => {
            this.cameraStream = stream;
            // 直接操作DOM元素的srcObject属性
            this.videoElement.srcObject = stream;
            // 显式启动播放，部分浏览器需要这一步
            this.videoElement.play().catch(err => {
                console.error("视频播放失败:", err);
            });
            console.log('this.cameraStream', this.cameraStream);
        })
        .catch((err) => {
            console.error(`An error occurred:`, err);
        });
}

解决方案2：自定义Aurelia属性绑定（进阶） #

如果你希望复用类似srcObject.bind的语法，可以创建一个自定义属性来处理property绑定：

1. 创建自定义属性类：

import {inject} from 'aurelia-framework';

@inject(Element)
export class SrcObjectCustomAttribute {
    constructor(element) {
        this.element = element;
    }

    valueChanged(newValue) {
        this.element.srcObject = newValue;
        if (newValue) {
            this.element.play().catch(err => console.error("Play failed:", err));
        }
    }
}

2. 在Aurelia中注册这个自定义属性（比如在main.js里）：

import {Aurelia} from 'aurelia-framework';
import {SrcObjectCustomAttribute} from './src-object-custom-attribute';

export function configure(aurelia: Aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging();
    
    aurelia.globalResources('./src-object-custom-attribute');

    aurelia.start().then(() => aurelia.setRoot());
}

3. 然后就可以在HTML中直接使用src-object.bind：

<video id="video" src-object.bind="cameraStream" if.bind="cameraStream">Video stream not available.</video>

额外注意点 #

• 确保页面已经获得摄像头权限（你已经确认这一点）
• 部分浏览器要求视频播放必须由用户交互触发，但通过getUserMedia获取流后调用play()一般可以绕过这个限制
• 测试时注意HTTPS环境（除了localhost外，浏览器要求getUserMedia必须在安全上下文下运行）

内容的提问来源于stack exchange，提问作者SGT Grumpy Pants