Vue 媒体处理（摄像头，截图，播放本地视频）

最新推荐文章于 2024-08-12 21:08:43 发布

Darren i

最新推荐文章于 2024-08-12 21:08:43 发布

阅读量1.6k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43966635/article/details/108979601

版权

本文介绍了如何在Vue应用中处理媒体，包括打开摄像头进行实时预览，实现截图功能利用canvas和图片转换，以及播放本地视频通过FileReader获取Base64编码在video元素中展示。

摘要由CSDN通过智能技术生成

Vue 媒体处理（摄像头，截图，播放本地视频）

一. 打开摄像头

```javascript
    this.constraint = {
   
        // video属性设置
            video: {
   
              width: 300,
              height: 300,
            },
            // audio属性设置
            audio: true,
    }
    navigator.mediaDevices
            .getUserMedia(this.constraints)
            .then((mediaStream) => {
   
              // 成功返回promise对象，接收一个mediaStream参数与video标签进行对接