所以我一直在弄乱这个页面:https://tutorialzine.github.io/pwa-photobooth/
基本上，它的作用是激活您的网络摄像头并让您直接从视频流中拍摄快照，我借用了它作为我的网络，但是视频流被翻转了，我想镜像该视频流，以便感觉更好。
注意:我有点像js新手，所以欢迎您使用inpht解释。
这是代码，您可能必须使用Firefox而不是Chrome:
$('.closecam').click(function(){
$('.webcam__overlay').hide();
});
$('.camera').click(function(){
$('.webcam__overlay').show();
});
document.addEventListener('DOMContentLoaded', function () {
// References to all the element we will need.
var video = document.querySelector('#camera-stream'),
image = document.querySelector('#snap'),
start_camera = document.querySelector('#start-camera'),
controls = document.querySelector('.controls'),
take_photo_btn = document.querySelector('#take-photo'),
delete_photo_btn = document.querySelector('#delete-photo'),
download_photo_btn = document.querySelector('#download-photo'),
error_message = document.querySelector('#error-message');
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
);
if(!navigator.getMedia){
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{
// Request the camera.
navigator.getMedia(
{
video: true
},
// Success Callback
function(stream) {
// Create an object URL for the video stream and
// set it as src of our HTLM video element.
video.src = window.URL.createObjectURL(stream);
// Play the video element to start the stream.
video.play();
video.onplay = function() {
showVideo();
};
},
// Error Callback
function(err) {
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
}
);
}
// Mobile browsers cannot play video without user input,
// so here we're using a button to start it manually.
start_camera.addEventListener("click", function(e) {
e.preventDefault();
// Start video playback manually.
video.play();
showVideo();
});
take_photo_btn.addEventListener("click", function(e) {
//prevents default behaviour, in this case the link a from firing
e.preventDefault();
var snap = takeSnapshot();
// Show image.
image.setAttribute('src', snap);
image.classList.add("visible");
// Enable delete and save buttons
delete_photo_btn.classList.remove("disabled");
download_photo_btn.classList.remove("disabled");
// Set the href attribute of the download button to the snap url.
download_photo_btn.href = snap;
// Pause video playback of stream.
video.pause();
});
delete_photo_btn.addEventListener("click", function(e) {
e.preventDefault();
// Hide image.
image.setAttribute('src', "");
image.classList.remove("visible");
// Disable delete and save buttons
delete_photo_btn.classList.add("disabled");
download_photo_btn.classList.add("disabled");
// Resume playback of stream.
video.play();
});
function takeSnapshot() {
// Here we're using a trick that involves a hidden canvas element.
var hidden_canvas = document.querySelector('canvas'),
context = hidden_canvas.getContext('2d');
var width = video.videoWidth,
height = video.videoHeight;
if (width && height) {
// Setup a canvas with the same dimensions as the video.
hidden_canvas.width = width;
hidden_canvas.height = height;
// Make a copy of the current frame in the video on the canvas.
context.drawImage(video, 0, 0, width, height);
// Turn the canvas image into a dataURL that can be used as a src for our photo.
return hidden_canvas.toDataURL('image/png');
}
}
function showVideo() {
hideUI();
video.classList.add("visible");
controls.classList.add("visible");
}
function displayErrorMessage(error_msg, error) {
error = error || "";
if(error){
console.error(error);
}
error_message.innerText = error_msg;
hideUI();
error_message.classList.add("visible");
}
function hideUI() {
// Helper function for clearing the app UI.
controls.classList.remove("visible");
start_camera.classList.remove("visible");
video.classList.remove("visible");
snap.classList.remove("visible");
error_message.classList.remove("visible");
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="webcam__overlay">
<div class="webcam__maincontainer" style="width:1300px; height:580px; ; flex:0 0 auto; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;">
<div class="videowebcam" style="flex:0 0 97%; ">
<div class="" style=" height:87%; width:100%; display:flex; justify-content:center; align-items:center;">
<a href="#" style="display:none;" id="start-camera" class="visible">Touch here to start the app.</a>
<video style="min-width:640px; max-width:640px; min-height:480px; max-height:480px;" muted id="camera-stream"></video>
<img style="position:absolute; top:0px; left:0px; z-index:-1; width:1px; height:1px;" id="snap">
<canvas style="position:absolute; top:0px; left:0px; z-index:-1; width:1px; height:1px;"></canvas>
<p style="display:none;" id="error-message"></p>
</div>
<div class="controls" style=" height:13%; width:100%; display:flex; justify-content:space-around; align-items:center;">
<a href="" class="tooltip3"><img id="delete-photo" class="disabled hoveref" src="images/backcam.png" style="transform: scale(0.8, 0.8); flex:0 0 auto; "><span data-en="Take Another" data-es="Tomar otra"class="tooltiptext3">Tomar Otra</span></a>
<a href="" class="tooltip3"><img id="take-photo" class="hoveref" src="images/takephoto.png" style=" width:65px; height:65px; flex:0 0 auto; "><span data-es="Tomar Foto" data-en="Take Snapshot" class="tooltiptext3">Tomar Foto</span></a>
<a href="" id="download-photo" download="selfie.png" class="disabled tooltip3"><img class="hoveref" src="images/download2.png" style="transform: scale(0.8, 0.8);" ><span data-es="Descargar Foto" data-en="Download Snapshot"class="tooltiptext3">Descargar Foto</span></a>
</div>
</div>
<span class="closecam" style="cursor:pointer; color:rgba(255, 255, 255, 0.7); font-family: 'Nunito', sans-serif; flex:0 0 3%; text-align:center; font-size:25px; font-weight:600; ">X</span>
</div>
</div>最佳答案
CSS技巧非常有效:
video {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}