input调起摄像头，使用video播放摄像头里的内容

Question

        <input type="file" accept="video/" capture="camcorder">
        <div class="camera-wrapper">
            <span class="loading">正在加载摄像头，请稍等</span>
            <video id="video" class="video" width="320" height="240" preload autoplay loop muted></video>
            <canvas id="canvas" class="video" width="320" height="240"></canvas>
            <input type="hidden" name="thumb" id="thumb" value="">
        </div>
        <div class="padding-l-r-20">
            <button class="btn primary-btn large" @click="retry">重试</button>
            <span class="message">{{message}}</span>
        </div>          

input调起摄像头之后，想使用video直接播放摄像头里面的内容。
比如摄像头这时候正在对着自己，那么video里播放的内容应该是自己（相当于是同步的）
查了一波，都是video播放本地视频的，也就是说需要录制好后在播放，那么有没有什么方法可以不录制就同步播放的？求指教

Answer 1

1.必须要有录制的过程。所谓实时，录一短时间，播一段时间而已。
2.浏览器自身没有调用硬件层的权限，如果是放入 APP，有APP硬件权限的支持是可能的。
3.即使APP提供录制的数据，但是HTML流媒体播放依赖于流媒体网络协议，录制的数据也不可能直接转给HTML，需要个网络服务服务做协议中转。

总结：不可以。

Answer 2

参见 MDN 文档：MediaDevices/getUserMedia。
向下兼容的话还要考虑有些浏览器只支持 Navigator.getUserMedia，用法应该是一样的。
MediaDevices下的所有接口有使用限制，只能由 HTTPS 网页使用，当然，这不是什么难题，没有服务器的话托管到 github 或者gitee就可以了。调起摄像头必须经过用户授权。