视频上传到阿里云oss
发布于 2020-08-17 18:43:49
1807 次浏览
import OSS from 'ali-oss'
data() {
return {
name: '录视频',
mediaRecorder: '', // mediarecorder对象
recorderFile: '', // 视频blob文件
stopRecordCallback: '',
mediaStream: '', // 媒体流
aliyunConfig: {
region: '',
accessKeyId: '',
accessKeySecret: '',
bucket: ''
} // 阿里云参数
}
}
mounted: function() {
this.getMedia()
}
getMedia() {
const that = this
const videosContainer = this.$refs.videosContainer
const video = document.createElement('video') // 创建video标签
const videoWidth = 700 // 视频宽度
const videoHeight = 450 // 视频高度
let chunks = []
let startTime = 0
// controls自带控件 muted false不静音
video.controls = true
video.muted = false
video.width = videoWidth
video.height = videoHeight
that.getUserMedia(true, true, function(err, stream) {
if (err) {
alert('请检查设备后再试' + err)
that.$router.push('/')
console.log('录制失败', err)
} else {
console.log('录制开始')
// 通过 MediaRecorder 记录获取到的媒体流
that.mediaRecorder = new MediaRecorder(stream)
// 媒体流
that.mediaStream = stream
// 播放媒体流 添加到div里面
video.srcObject = stream
video.play()
videosContainer.appendChild(video)
// 定义blobs
that.mediaRecorder.blobs = []
// 当MediaRecorder将媒体数据传送到您的应用程序以供使用时,将触发该事件。
that.mediaRecorder.ondataavailable = function(e) {
console.log('你是e是什么1', e)
that.mediaRecorder.blobs.push(e.data)
chunks.push(e.data)
}
// 捕获的媒体流结束事件
that.mediaRecorder.onstop = function(e) {
console.log('你是e是什么2', e)
// 返回一个新创建的 Blob 对象
that.recorderFile = new Blob(chunks, {
type: that.mediaRecorder.mimeType
})
// 置空chunks
chunks = []
// sessionStorage.setItem('video_val', that.recorderFile)
// 关闭媒体流
// MediaUtils.closeStream(that.mediaStream)
}
}
})
}
start() {
let that = this
that.mediaRecorder.start()
},
stop() {
let that = this
that.mediaRecorder.stop()
},
get_video() {
let that = this
// 在这里实现上传操作 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
let reader = new FileReader()
// 用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件
reader.readAsArrayBuffer(that.recorderFile)
// 获得arraybuffer对象
reader.onload = function(VideoArrayBuffer) {
// 实例化阿里云oss
const client = new OSS(that.aliyunConfig)
let buffer = new OSS.Buffer(VideoArrayBuffer.target.result)
// 上传到阿里云
client
.put('a.mp4', buffer)
.then(result => {
if (result.url) {
// 获得图片地址
that.src = result.url
console.log('阿里云上传成功', result.url)
}
})
.catch(err => {
console.log('阿里云上传失败', err)
// alert('上传失败, 请重新上传')
})
}
getUserMedia(videoEnable, audioEnable, callback) {
/**
* 获取用户媒体设备(处理兼容的问题)
* @param videoEnable {boolean} - 是否启用摄像头
* @param audioEnable {boolean} - 是否启用麦克风
* @param callback {Function} - 处理回调
*/
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
window.getUserMedia
let callbacktype = false
var constraints = { video: videoEnable, audio: audioEnable }
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
callback(callbacktype, stream)
})
['catch'](function(err) {
callback(err)
})
} else if (navigator.getUserMedia) {
navigator.getUserMedia(
constraints,
function(stream) {
callback(callbacktype, stream)
},
function(err) {
callback(err)
}
)
} else {
callback(new Error('Not support userMedia'))
}
}
closeStream(stream) {
/**
* 关闭媒体流
* @param stream {that.MediaStream} - 需要关闭的流
*/
if (typeof stream.stop === 'function') {
stream.stop()
} else {
let trackList = [stream.getAudioTracks(), stream.getVideoTracks()]
for (let i = 0; i < trackList.length; i++) {
let tracks = trackList[i]
if (tracks && tracks.length > 0) {
for (let j = 0; j < tracks.length; j++) {
let track = tracks[j]
if (typeof track.stop === 'function') {
track.stop()
}
}
}
}
}
}