Javascript 水平翻转。getUserMedia'；s网络摄像头图像流

所以我一直在搞乱这一页：

基本上，它所做的是激活你的网络摄像头，让你直接从流中拍摄快照，我为我的网络借用了这个，但视频流被翻转，我想镜像视频流，这样感觉更好

注意：我是一个js新手，所以欢迎在depht解释

下面是代码，您可能必须使用Firefox而不是Chrome：

$（'.closecam'）。单击（函数（）{
$（'.webcam__overlay'）.hide（）；
});
$（'.camera'）。单击（函数（）{
$（'.webcam__覆盖'）.show（）；
});
document.addEventListener（'DOMContentLoaded'，函数（）{
//我们需要的所有元素的引用。
var video=document.querySelector（“#摄影机流”），
image=document.querySelector（“#snap”），
start#camera=document.querySelector（“#start camera”），
控件=document.querySelector（'.controls'），
take_photo_btn=document.querySelector（“#take photo”），
delete_photo_btn=document.querySelector（“#delete photo”），
download_photo_btn=document.querySelector（“#download photo”），
错误消息=document.querySelector（“#错误消息”）；
//getUserMedia接口用于处理相机输入。
//有些浏览器需要前缀，所以这里我们将介绍所有选项
navigator.getMedia=（
navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia
);
如果（！navigator.getMedia）{
displayErrorMessage（“您的浏览器不支持navigator.getUserMedia界面”）；
}
否则{
//请求摄像机。
navigator.getMedia(
{
视频：真的
},
//成功回调
功能（流）{
//为视频流创建一个对象URL，然后
//将其设置为HTLM视频元素的src。
video.src=window.URL.createObjectURL（流）；
//播放视频元素以启动流。
video.play（）；
video.onplay=函数（）{
showVideo（）；
};
},
//错误回调
功能（err）{
displayErrorMessage（“访问相机流时出错：“+err.name，err”）；
}
);
}
//没有用户输入，移动浏览器无法播放视频，
//这里我们用一个按钮手动启动它。
启动摄像头。添加EventListener（“单击”），功能（e）{
e、 预防默认值（）；
//手动启动视频播放。
video.play（）；
showVideo（）；
});
拍照。添加视频列表（“点击”，功能（e）{
//防止默认行为，在这种情况下，链路a不会触发
e、 预防默认值（）；
var snap=takeSnapshot（）；
//显示图像。
image.setAttribute（'src'，snap）；
image.classList.add（“可见”）；
//启用删除和保存按钮
删除照片类列表。删除（“禁用”）；
下载图片类列表。删除（“禁用”）；
//将下载按钮的href属性设置为快照url。
下载\u photo\u btn.href=snap；
//暂停流的视频播放。
video.pause（）；
});
删除照片添加列表（“单击”，功能（e）{
e、 预防默认值（）；
//隐藏图像。
setAttribute（'src'，“”）；
image.classList.remove（“可见”）；
//禁用删除和保存按钮
删除图片类列表。添加（“禁用”）；
下载图片类列表。添加（“禁用”）；
//恢复流的播放。
video.play（）；
});
函数takeSnapshot（）{
//这里我们使用了一个技巧，其中包含一个隐藏的canvas元素。
var hidden_canvas=document.querySelector（'canvas'），
context=hidden_canvas.getContext（'2d'）；
var width=video.videoWidth，
高度=video.videoHeight；
if（宽度和高度）{
//设置与视频尺寸相同的画布。
隐藏画布宽度=宽度；
隐藏的画布高度=高度；
//在画布上复制视频中的当前帧。
drawImage（视频，0，0，宽度，高度）；
//将画布图像转换为dataURL，可以用作照片的src。
返回hidden_canvas.toDataURL（'image/png'）；
}
}
函数showVideo（）{
秀美（）；
video.classList.add（“可见”）；
控件。类列表。添加（“可见”）；
}
函数显示错误消息（错误消息，错误）{
错误=错误| |“”；
如果（错误）{
控制台错误（error）；
}
error\u message.innerText=error\u msg；
秀美（）；
错误消息.classList.add（“可见”）；
}
函数hideUI（）{
//用于清除应用程序UI的帮助程序功能。
控件.classList.remove（“可见”）；
启动摄像头。类列表。删除（“可见”）；
video.classList.remove（“可见”）；
snap.classList.remove（“可见”）；
错误消息.classList.remove（“可见”）；
}
})

X

检查此链接

这是在画布上播放的水平翻转视频的功能示例

翻转视频
$（函数（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var video=document.getElementById（'video'）；
video.addEventListener（'loadedmetadata'，function（）{
ctx.translate（video.videoWidth，0）；
ctx.刻度（-1,1）；
video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}