H5 pc录视频和拍照并能预览照片和视频

视频和拍照并能预览照片和视频"/>

H5 pc录视频和拍照并能预览照片和视频

最近做了一个项目关于：用H5做pc端录视频和拍照并能预览照片和视频。遇到的一个问题和解决办法这边记录一下，有需要的可以看下：
录视频后得预览一下，网上找了很多例子，比如用video或者video的source进行兼容什么的，还有将file文件进行转码

function getObjectURL(file) {var url = null ;if (window.createObjectURL!=undefined) { // basicurl = window.createObjectURL(file) ;} else if (window.URL!=undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file) ;} else if (window.webkitURL!=undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file) ;}return url ;
}

window.URL.createObjectURL(mediaStream) 出现 typeError 错误；原来浏览器已经取消对 mediaStream 类型的支持。有一个解决办法是：
video.srcObject = mediaStream；但是这个解决不了我的问题，还是显示不出来。
我这边有个比较简单的办法：

<video width="225" height="160" poster="" id="video" controls></video> 

poster是作为带有预览图的视频

var file = new File([recorder], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {type: 'video/mp4'
}); // 将blob转成file文件
var reader = new FileReader();
reader.readAsDataURL(file); // 开始读取文件
var fileType = file.type.split('/')[0];var video = document.getElementById("video");
reader.onload = function(e) { // 读取结束并且读取成功触发  在这里可以拿到resultif (fileType === 'video') {video.src = this.result;video.style.display = 'block' // 显示视频} else if (fileType === 'image') {img.src = this.result;img.style.display = 'block' // 显示图片}
};

注：recorder是我的视频的blob文件变量

以上就是我的走坑记录。