vue用input调起手机摄像头录制视频

原创已于 2023-08-02 12:02:47 修改 · 5.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #音视频 #前端

于 2021-11-12 16:38:48 首次发布

Vue 专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了如何在Vue应用中实现视频录制和播放功能。通过HTML的input元素结合JavaScript事件监听，当用户点击录制按钮时调起摄像头进行视频录制，录制完成后，视频文件路径会被赋值给video标签进行播放。

<input 
 ref="inputVideo" 
 type="file" 
 name="video"  
 id="video-input" 
 accept="video/*" 
 capture="camcorder" //只是调起摄像头，不选择文件
 @change="videoChange" 
 @click="starVideotape"
/>

<--video用于播放拍摄后的内容-->
<video id="video" width='300' height="300" controls autoplay></video>

<--button用于点击开始录制视频-->
<button @click="onVideo">点击录制视频</button>

<script>
	export default {
		name: 'skippingRopeIndex',
		data() {
			return {
				time:null,
			}
		},
		methods: {
            //视频录制结束后将视频路径赋值给video标签进行播放
			videoChange() {
				var file = document.getElementById('video-input').files[0];
				var url = URL.createObjectURL(file);
				document.getElementById("video").src = url;
			},
			
            //点击button实现调起录制摄像头
			onVideo(){
				const that = this;
				that.$refs.inputVideo.click();
			}
		}
	}
</script>