记录h5使用navigator.mediaDevices.getUserMedia录制音视频

!!!要在https环境下才行!!!

<video class="video" id="video" ref="recordRef" muted autoplay playsinline></video>

let stream

let mediaRecorder

let startTime

let recordSize = 0

let recordedChunks = []

mounted() {

this.init();

},

beforeDestroy() {

recordedChunks = []

if (stream) {

stream.getTracks().forEach(function (track) {

track.stop()

})

}

this.$refs.recordRef.srcObject = null

},

async init(){

this.$nextTick(async () => {

stream = await navigator.mediaDevices.getUserMedia({

video: {

// width:720,

// height:1280,

facingMode: 'user',

},

// video:true,

audio: true,

})

this.$refs.recordRef.srcObject = stream

mediaRecorder = new MediaRecorder(stream)

mediaRecorder.onstart = () => {

recordedChunks = []

recordSize = 0

startTime = new Date().getTime()

}

mediaRecorder.ondataavailable = (event) => {

recordSize += event.data.size

this.time = Math.round((new Date().getTime() - startTime) / 1000)

this.size = recordSize

if (event.data.size > 0) {

recordedChunks.push(event.data)

}

}

mediaRecorder.onstop = async () => {

if (stream) {

stream.getTracks().forEach(function (track) {

track.stop()

})

}

this.$refs.recordRef.srcObject = null

//上传到阿里云oss

getOss({}).then((ress)=>{

let resp = ress.data;

const formData = new FormData()

formData.append('key', resp.filename)

formData.append('OSSAccessKeyId', resp.accessid)

formData.append('policy', resp.policy)

formData.append('signature', resp.signature)

formData.append('file', new File(recordedChunks, 'file.webm', { type: mediaRecorder.mimeType }))

const video_url = resp.host + '/' + resp.mp4

this.percent = '0%'

const uploadRequestXHR = new XMLHttpRequest()

uploadRequestXHR.open('POST', resp.host, true)

uploadRequestXHR.onerror = (rejj) => {

Toast('上传失败')

}

uploadRequestXHR.upload.onprogress = (e) => {

let per = Math.floor((e.loaded / e.total) * 100)

// 控制进度条最大显示99%,最后请求结束后才变为100%

if (per > 99) {

per = 99

}

this.percent = per + '%'

}

uploadRequestXHR.onload = (rejj2) => {

if (uploadRequestXHR.status != 204) {

Toast('上传失败')

return

}

activationServiceRecording({family_member_id: this.family_member_id,family_service_id:this.family_service_id,recording:video_url}).then((res)=>{

if(res.code!==200){

return Toast(res.error);

}

this.percent = '100%'

Toast('录制已完成');

setTimeout(()=>{

this.$router.go(-1)

},800)

})

}

uploadRequestXHR.send(formData)

})

//上传到服务器

// const blob = new Blob(recordedChunks, {

// type: 'video/webm'

// });

// const formData = new FormData();

// formData.append('file[]', blob, 'recorded-video.webm');

// upFile(formData).then(ress => {

// console.log('数据:',ress)

// activationServiceRecording({family_member_id: this.family_member_id,family_service_id:this.family_service_id,recording:ress.data[0].path}).then((res)=>{

// console.log('数据:',res)

// if(res.code!==200){

// return Toast(res.error);

// }

// this.percent = '100%'

// Toast('录制已完成');

// setTimeout(()=>{

// this.$router.go(-1)

// },800)

// })

// })

// .catch((rej) => {

// console.log('上传错误:',rej)

// })

}

})

},

changeState(){

if (this.state == 'ready') {

this.state = 'recording'

// 开始录制

mediaRecorder.start(1000)

} else if (this.state == 'recording') {

this.state = 'uploading'

// 结束录制

mediaRecorder.stop()

}

},

附:

formatBytes(time){

return formatBytes(time)

},

formatSeconds(size){

return formatSeconds(size)

},

utils:

//录制的视频size

export function formatBytes(bytes, decimals = 2) {

if (bytes === 0) return '0 Bytes'

const k = 1024

const dm = decimals < 0 ? 0 : decimals

const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

const i = Math.floor(Math.log(bytes) / Math.log(k))

return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + '' + sizes[i]

}

//录制时间

export function formatSeconds(seconds) {

const hours = Math.floor(seconds / 3600)

const minutes = Math.floor((seconds % 3600) / 60)

const secs = seconds % 60

const hoursStr = hours.toString().padStart(2, '0')

const minutesStr = minutes.toString().padStart(2, '0')

const secsStr = secs.toString().padStart(2, '0')

return `{hoursStr}:{minutesStr}:${secsStr}`

}

相关推荐
西哥写代码1 小时前
基于cornerstone3D的dicom影像浏览器 第二十四章 显示方位、坐标系、vr轮廓线
javascript·3d·vue3·vr·dicom·cornerstonejs
北京地铁1号线1 小时前
MMdetection推理验证输出详解(单张图片demo)
前端·算法
听闻风很好吃1 小时前
DAY07:Vue Router深度解析与多页面博客系统实战
前端·javascript·vue.js
沙滩小岛小木屋1 小时前
多个vue2工程共享node_modules
开发语言·前端·javascript
linux开发之路2 小时前
【备战秋招】C++音视频开发经典面试题整理
c++·ffmpeg·音视频·rtmp·音视频编解码
亦世凡华、2 小时前
React--》掌握react组件库设计与架构规划
前端·经验分享·react.js·前端框架
菥菥爱嘻嘻2 小时前
JS手写代码篇---手写promise.all
开发语言·前端·javascript
Magnum Lehar2 小时前
vulkan游戏引擎的vulkan/shaders下的image实现
java·前端·游戏引擎
^Rocky2 小时前
vue + ant-design + xlsx 实现表格导出进度提示功能
前端·javascript·vue.js
宝拉不想努力了2 小时前
vue2使用element中多选组件el-checkbox-group,数据与UI更新不同步
javascript·vue.js·elementui