JS打开摄像头 上传截图示例

直奔主题，JS打开摄像头，将截图上传到后端，这是一个完整的步骤

1.getUserMedia方法主要用于打开摄像机，然后将获得的媒体流放入视频标签中

2.画布绘制主要用于捕捉图片，drawImage方法用于将视频的内容绘制到画布中

3.将截取的内容上传到服务器，将画布中的内容上传为base64格式，通过后端的file _ put _ contents(PHP)转换成图片

需要注意的是，在chrome以外的浏览器中，相机或多或少会出现一些问题，可能是老问题了，所以下面的代码主要基于chrome

比如最新版本的FireFox，不知道为什么

1.打开摄像机

GetUserMedia有两个版本：新版本和旧版本，建议使用新版本

旧版本位于navigator对象下，该对象因不同浏览器而异

//get media method(旧方法)navigator . getmedia=navigator . getuser media | | navigator . webkitgetuser media | | navigator . mozzgetusermedia | | navigator . msgetuser media；if(navigator . getmedia){ navigator . getmedia({ video : true }，function(stream){ mediaStreamTrack=stream . gettracks()[0]；video.src=(窗口。URL || window.webkitURL)。createObjectURL(流)；video.play()。}，函数(err){ console . log(err)；});}第一个参数指示是使用视频还是音频。

第二个参数表示成功调用后的回调，带有一个参数(MediaStream)。在旧版本中，可以通过调用MediaStream.stop()直接关闭摄像头，但在新版本中已被放弃。媒体流。getTracks()[索引]。需要stop()来关闭相应的轨道

第三个参数指示调用失败后的回调

新版本位于navigator.mediaDevices对象下

if(navigator . media devices navigator . media devices . getuser media){ navigator . media devices . getuser media({ video : true，audio: true })。然后(function(stream){ console . log(stream)；mediaStreamTrack=type of stream . stop==' function '？stream : stream . gettracks()[1]；video.src=(窗口。URL || window.webkitURL)。createObjectURL(流)；video.play()。}).catch(function(err)){ console . log(err)；})}与旧版本类似，但是这个方法返回一个Promise对象，可以使用then和catch来指示成功和失败的回调

需要注意的是，MediaStream.getTracks()返回的Tracks数组是根据第一个参数以相反的顺序排列的

例如，现在定义了它

{video: true，audio: true}要关闭摄像头，您需要调用mediastream.gettracks () [1]。stop()；

类似地，0对应于音频的轨道

使用createObjectURL将MediaStream写入视频标签，可以存储实时的媒体流数据(也方便实时查看图片)

不支持旧版本的webkitURL对象，需要使用URL对象

视频宽度=' 200 '高度=' 150'/视频画布宽度=' 200 '高度=' 150 '/画布pbutton id=' snap '捕捉图像/按钮按钮id='close '关闭相机/按钮按钮id='upload '上传图像/按钮/p img id=' uploaded '宽度=' 200 '高度=' 150'/2。捕获图像

只需将内容写入

//剪辑图像snap.addeventlistener ('click '，function(){ context . draw image(video，0，0，200，150)；}，false)；3.关掉摄像机

//关闭相机关闭。addeventlistener ('click '，function () {mediastreamtrack。stop()；}，false)；4.上传捕获的图像

canvas . todaytaul(' image/png ')

//上传捕获的图像upload.addeventlistener ('click '，function(){ jquery . post('/uploadsnap . PHP '，{ snapdata : canvas . todaytaul(' image/png ')})。done(function(RS){ RS=JSON . parse)console . log(RS)；uploaded . src=RS . path；}).fail(function(err)){ console . log(err)；});}，false)；后端(PHP)在这里将获取的内容转换成图像文件进行保存

需要注意的是，要将base64的头部信息字段去掉再保存，否则似乎图像是损坏无法打开滴

？PHP $ snapData=$ _ POST[' snapData ']；$ SnapDATa=str _ replace(' data : image/png；base64 '，'，'，$ Snapdata)；//$snapData=str_replace('，' '，$ snapData)；$ img=base64 _ decode($ SnapDATa)；$ uploadDir=' upload/'；$fileName=日期(' YmdHis '，time()).uniqid()；if(！(file_put_contents($uploadDir).$fileName，$ img)){ echo JSON _ encode(数组(“代码”=500，“消息”=)文件上传失败'));} else { echo json_encode(数组(“代码”=200，“消息”=)文件上传成功，' path'=$uploadDir .$ FIlename))；}?完整射流研究…代码

脚本类型=' text/JAVAScript ' src=' http : jquery。js /脚本脚本类型=' text/JavaScript '函数$(elem){返回文档。query selector(elem)；} //获取媒体方法（旧方法)航海家。getmedia=navigator。getusermedia | |导航器。webkitgetusermedia | |导航器。msgetusermediavar canvas=$('canvas ')、context=canvas.getContext('2d ')、video=$('video ')、snap=$('#snap ')、close=$('#close ')、upload=$(' upload ')、mediaStreamTrack//获取媒体方法（新方法) //使用新方法打开摄像头if(导航器。媒体设备导航器。媒体设备。getuser media){ navigator。媒体设备。getuser media({ video : true，audio: true }).然后(函数(流){控制台。日志(流)；mediaStreamTrack=流的类型。stop==' function '？流：流。gettracks()[1]；video.src=(窗口网址||窗口.网站网址).createObjectURL(流);video.play().}).catch(函数(err)){ console。日志(err)；}) } //使用旧方法打开摄像头else if(导航器。getmedia){ navigator。getmedia({ video : true }，function(stream){ mediaStreamTrack=stream。gettracks()[0]；video.src=(窗口网址||窗口.网站网址).createObjectURL(流);video.play().},函数(错误){控制台。日志(err)；});} //截取图像snap.addEventListener('click '，function(){ context . drawing(视频，0,0,200,150);}，false)；//关闭摄像头close.addEventListener('click ')，function(){ mediaStreamTrack mediaStreamTrack。stop()；}，false)；//上传截取的图像upload.addEventListener('click '，function(){ jquery。post('/uploadsnap。PHP '，{ snapdata :画布。todaytaul(' image/png ')}).完成(函数(RS){ RS=JSON。解析(RS)；控制台。日志；上传。src=RS。路径；}).失败(函数(错误)){控制台。日志(err)；});}，false)；/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。