vue 实现录制视频后上传到php后台借鉴代码

最新推荐文章于 2024-08-23 16:39:15 发布

qq_39070698

最新推荐文章于 2024-08-23 16:39:15 发布

阅读量3.8k

点赞数

分类专栏：技术文档文章标签：前端录像录视频 js录视频

本文链接：https://blog.csdn.net/qq_39070698/article/details/81224804

版权

技术文档专栏收录该内容

9 篇文章 0 订阅

订阅专栏

demo下载地址https://download.csdn.net/download/qq_39070698/10566294

<body>
    <article style="border:1px solid white;width:400px;height:400px;margin:0 auto;background-color:white;">

        <section class="experiment" style="width:320px; height:240px;border:1px solid green; margin:50px auto;">
            <div id="videos-container" style="width:320px; height:240px;">
            </div>
        </section>
        <section class="experiment" style="text-align:center;border:none; margin-top:20px;">
            <button id="openCamera">打开摄像头</button>
            <button id="start-recording" disabled>开始录制</button>
            <button id="save-recording" disabled>保存</button>
            <!--<a href="javascript:void(0)" onclick="send()">发送</a>-->
        </section>
      </article>


</script>

该demo可以通过录像生成MP4格式的文件流方便操作下面是我在vue中使用上传视频流时的代码

function saver(){
    var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
        type: 'video/mp4'
    });
    console.log(file)
    var data = new FormData();
    data.append("userfile", file);
	var req = new XMLHttpRequest();
    req.open("POST", "url");
    req.send(data);
    req.onreadystatechange = function() {
    			var res = req.responseText;
		    	if(req.readyState == XMLHttpRequest.DONE && req.status == 200) {
		    		var jsonObj =  JSON.parse(res)
			       // console.log(jsonObj)
			       // console.log(jsonObj.status)
			       // console.log(jsonObj.data)
			        that.videolist = [{url:jsonObj.data,introduce:''}]
			        console.log(that.videolist)
			    }
	}
}

该demo代码较多不能一一贴出来,demo下载后直接可以在浏览器运行,详细情况可以根据业务需求自己倒腾

后台是PHP顺便也给贴出来希望对大家有帮助

 public function upload($name="video",$path='video'){
        $file   = $this->request->file('userfile');
        $result = $file->move('.' . DS .'upload'. DS . $path . DS);
        if ($result) {
            $avatarSaveName = str_replace('//', '/', str_replace('\\', '/', $result->getSaveName()));
            $savepath = "./upload/".$path.'/'.$avatarSaveName;
            $this->ajaxReturn(array('status'=>'0','data'=>$savepath));
        }else{
            $this->ajaxReturn(array('status'=>'1','data'=>$file->getError()));
        }
        
    }