vue打开摄像头,vue怎么不能录像

　　本文主要介绍了某视频剪辑软件调用摄像头进行拍照并能保存到本地的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1. 使用Vue.js

　　把网页内容Ctrl+s保存到本地然后添加到项目中

　　https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2. 创建目录

3.实现：

　　1.index.html

　　代码：

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　标题/标题

　　脚本src= vue。js /脚本

　　/头

　　身体

　　div id=vueapp

　　video ref=video 自动播放宽度=400 高度= 300 /视频

　　button @ click= btnTakePhotoClicked()拍照/按钮

　　画布ref= canvas 宽度= 400 高度= 300 /canvas

　　a href= download= canvas。JPEG id= save _ herf

　　 img src= id=save_img alt=

　　/div

　　脚本src=app.js/script

　　/body

　　/html

　　app.js

　　代码：

　　新Vue({

　　埃尔： #vueapp ，

　　已安装(){

　　这个. initVueApp()；

　　这个。btntakephotoclicked()；

　　方法：{

　　async _initVueApp(){

　　这个参考文献。视频。src对象=等待导航器。媒体设备。getuser media({ video:true，audio:false })；

　　这个. context2d=this .$参考文献。画布。获取上下文(“2d”)；

　　这个. this.canvas=这个.$ refs.canvas

　　btnTakePhotoClicked(){

　　这个. context2d.drawImage(this .$refs.video

　　var img=文档。createelement(“img”)；//创建图片元素

　　img。src=这个。画布。toda taurl( image/png )；//截取视频第一帧

　　var svaeHref=document。getelementbyid( save _ herf )；

　　控制台。日志(img.src)

　　var SD=文档。getelementbyid( save _ img )；

　　svaehref。href=img。src

　　sd.src=img.src

　　}

　　});

4.效果

　　到此这篇关于某视频剪辑软件调用摄像头进行拍照并能保存到本地的方法的文章就介绍到这了，更多相关某视频剪辑软件调用摄像头拍照并保存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

1. 使用Vue.js

2. 创建目录

3.实现：

4.效果

相关文章阅读