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

该博客介绍了如何在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>

以下是使用Vue调用摄像头录制视频的示例代码: ```html <template> <div> <video ref="video" autoplay></video> <button @click="startRecording">开始录制</button> <button @click="stopRecording">停止录制</button> </div> </template> <script> export default { data() { return { mediaRecorder: null, chunks: [], }; }, mounted() { navigator.mediaDevices.getUserMedia({ video: true }) .then((stream) => { this.$refs.video.srcObject = stream; this.mediaRecorder = new MediaRecorder(stream); this.mediaRecorder.ondataavailable = (e) => { this.chunks.push(e.data); }; this.mediaRecorder.onstop = () => { const blob = new Blob(this.chunks, { type: 'video/webm' }); const videoUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = videoUrl; a.download = 'recorded_video.webm'; a.click(); URL.revokeObjectURL(videoUrl); this.chunks = []; }; }) .catch((error) => { console.error('Error accessing camera:', error); }); }, methods: { startRecording() { this.mediaRecorder.start(); }, stopRecording() { this.mediaRecorder.stop(); }, }, }; </script> ``` 这段代码使用了Vue框架来调用摄像头录制视频。在模板中,我们使用`<video>`元素来显示摄像头视频流,并添加了两个按钮来控制录制的开始和停止。在脚本部分,我们使用`navigator.mediaDevices.getUserMedia()`方法来获取摄像头视频流,并将其赋值给`<video>`元素的`srcObject`属性。然后,我们创建了一个`MediaRecorder`对象来录制视频,并设置了`ondataavailable`事件来处理录制的数据块。当点击停止录制按钮时,我们将录制的数据块合并为一个`Blob`对象,并通过创建一个下载链接来保存录制视频文件。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值