WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。
视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video = document.getElementById('video');
//访问摄像头
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({video: {width: 330, height: 212}}, success, error);
} else {
alert('不支持访问用户媒体');
}
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//成功回调
function success(stream) {
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
// console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
//失败回调
function error(error) {
console.log("访问用户媒体设备失败");
}
</script>
打开网页，会提示是否允许视屏设备接入，选择允许。此时，video 标签内将显示动态的摄像视频流。
拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
//获取图片流
//动态创建画布对象
var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');
//将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制
context.drawImage(video, 0, 0, 330, 212, 0, 0, 120, 80);
//将Canvas的数据转换为base64位编码的PNG图像
var imageData = canvas..toDataURL("image/png");
//截取22位以后的字符串作为图像数据
var imgStr = imageData.substr(22);
//canvas显示图片(canvas显示上传后的图片用)
drawCanvasImage(id, src, width, height) {
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
var img = new Image();
img.src = src;
mg.onload = function () {
context.drawImage(img, 0, 0, width, height);
};
}
图片上传
前端使用Ajax将图片上传到服务端。
前端代码
function uploadImg() {
//抓取图片并上传图片,返回图片url
var canvas = document.getElementById("canvas1");
var canvas1_1 = document.getElementById("canvas1-1");
var context = canvas.getContext('2d');
var content1_1 = canvas1_1.getContext('2d');
context.drawImage(video, 0, 0, 330, 212, 0, 0, 120, 80);
content1_1.drawImage(video, 0, 0, 330, 212, 0, 0, 720, 480);
//将Canvas的数据转换为base64位编码的PNG图像
var imageData = canvas1_1.toDataURL("image/png");
//截取22位以后的字符串作为图像数据
var imgStr = imageData.substr(22);
//Ajax上传图片
$.ajax({
type: 'post',
url: '/file/uploadBase64Img',
data: {
imgStr: imgStr,
poundLogNo: poundLogNoStr,
uploadType: 1 //上传图片类型 1：称毛重图片 2：称皮重图片
},
cache: false,
dataType: 'json',
success: function (result) {
// console.log("uploadBase64Img", result);
if (result.code == 0) {
//图片上传成功
} else {
layer.alert(result.msg, {icon: 5}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
}
},
error: function (error) {
layer.alert("数据请求异常", {icon: 5}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
}
});
}
后台接口
/**
* Base64字符串转图片 上传
*
* @param imgStr base64字符串
* @param poundLogNo 过磅单号
* @param uploadType 上传图片类型 1：称毛重图片 2：称皮重图片
* @return imgUrl
*/
@RequestMapping(value = "/uploadBase64Img", method = {RequestMethod.POST})
@ResponseBody
public Result uploadBase64Img(String imgStr, String poundLogNo, Integer uploadType) {
if (StringUtils.isEmpty(imgStr)) {
return ResultUtil.error("图像数据为空");
}
if (StringUtil.isEmpty(poundLogNo)) {
return ResultUtil.error("过磅单号不能为空");
}
PoundLog logInDB = poundLogService.findByPoundLogNo(poundLogNo);
if (logInDB == null) {
return ResultUtil.error("找不到您要更新的过磅记录");
}
//构建图片存储路径
StringBuilder filePath = new StringBuilder();
String basePath = DateUtil.getFilePathByDate(systemProperties.getFileLocation() + "/images/upload/");
filePath.append(basePath).append(poundLogNo).append("/");
//生成上传图片名
String fileName = System.currentTimeMillis() + ".jpg";
//base64字符串转图片并保存
String imgLocalPath = ImageUtil.saveBase64Img(imgStr, filePath.toString(), fileName);
if (StringUtils.isEmpty(imgLocalPath)) {
return ResultUtil.error("文件上传失败");
}
//转换成http图片地址
String imgUrl = systemProperties.getLocalhostUrl() + systemProperties.getServerPort() + imgLocalPath.substring(systemProperties.getFileLocation().length());
if (uploadType == null) {
return ResultUtil.error("上传图片类型为空");
}
if (uploadType == UPLOAD_TYPE_GROSS_IMG) {
logInDB.setGrossImgUrl(imgUrl);
} else if (uploadType == UPLOAD_TYPE_TARE_IMG) {
logInDB.setTareImgUrl(imgUrl);
} else {
return ResultUtil.error("未知上传图片类型");
}
int result = poundLogService.update(logInDB);
if (result < 1) {
return ResultUtil.error("图片保存失败");
}
return ResultUtil.success(imgUrl);
}
效果展示
image.png
注：以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
