js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼
更新時間：2023年11月06日 10:18:06 作者：Postkarte不想說話
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
添加下一個樣式即可
#left {
transform: rotateY(180deg);
}
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js通過瀏覽器調(diào)用攝像頭</title>
<style>
#left {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="banner">
<video id="left" width="500px" height="500px" autoPlay="autoplay" controls="controls"></video>
<video id="right" width="500px" height="500px" autoPlay="autoplay" controls="controls"></video>
</div>
</body>
<script>
let leftVideo = document.getElementById('left');
let rightVideo = document.getElementById('right');
function getMedia() {
let constraints = {
video: { width: 400, height: 500 },
audio: false
};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.mediaDevices.getUserMedia(
constraints,
function(stream) {
leftVideo.src = stream;
leftVideo.play();
},
function(error) {
console.log(error);
}
).then(function(MediaStream) {
leftVideo.srcObject = MediaStream;
leftVideo.play();
});
}
getMedia();
// 當(dāng)開始播放的時候哦從一個video標(biāo)簽中獲取流并將流傳給其他的video標(biāo)簽
leftVideo.onplay = function () {
rightVideo.srcObject = leftVideo.captureStream()
}
</script>
</html>
效果圖
到此這篇關(guān)于js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼的文章就介紹到這了,更多相關(guān)js視頻鏡面反轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js與jquery獲取父級元素,子級元素,兄弟元素的實(shí)現(xiàn)方法
本篇文章主要是對js與jquery獲取父級元素,子級元素,兄弟元素的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
js中bool值的轉(zhuǎn)換及“&&”、“||”、 “!!”詳解
這篇文章主要給大家介紹了關(guān)于js中bool值的轉(zhuǎn)換方法以及"&&" 、"||"、 "!!"的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友下面來一起看看吧。2017-12-12
這篇文章主要介紹了在 JavaScript 中生成不可修改屬性對象的方法,包括相關(guān)函數(shù)及原理,并列舉了在狀態(tài)管理、數(shù)據(jù)緩存、函數(shù)式編程等場景中的實(shí)際應(yīng)用,還通過代碼示例進(jìn)行了詳細(xì)說明,需要的朋友可以參考下2024-12-12
這篇文章詳細(xì)介紹了JavaScript定時器及實(shí)例，有需要要的朋友可以參考一下2013-08-08
基于勻速運(yùn)動的實(shí)例講解(側(cè)邊欄,淡入淡出)
下面小編就為大家?guī)硪黄趧蛩龠\(yùn)動的實(shí)例講解(側(cè)邊欄,淡入淡出)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理方法
這篇文章主要介紹了JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
詳解微信小程序（Taro）手動埋點(diǎn)和自動埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序（Taro）手動埋點(diǎn)和自動埋點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了微信小程序文章詳情頁跳轉(zhuǎn)案例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
在javascript中，帶小數(shù)的數(shù)據(jù)運(yùn)算時總會出現(xiàn)好多位小數(shù).這是因?yàn)樵趈avascript中浮點(diǎn)數(shù)的計算是以2進(jìn)制計算的2014-05-05
原生js+canvas實(shí)現(xiàn)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了原生js+canvas實(shí)現(xiàn)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11