<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>web RTC 測試</title>
<style>
.booth {
width:400px;
background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<article>
<section>
<video id="video"></video>
</section>
<section>
<audio id="audio"></audio>
</section>
<button id="btn">拍照</button>
<section>
<canvas id="canvas"></canvas>
</section>
<section><img src="" alt="" id="img"></section>
</article>
<article>
<header>相關知識</header>
<h2>獲取用戶媒體:</h2>
<p>
<code>navigator.mediaDevices.getUserMedia({video: true, audio: true}) // 異步操作</code>
</p>
<h2>枚舉媒體數:video,audio輸入輸出設備</h2>
<p><code>navigator.mediaDevices.enumerateDevices() // 異步操作</code></p>
</article>
<script>
let convas = document.querySelector("#canvas"); //
let video = document.querySelector("#video");
let audio = document.querySelector("audio");
let img = document.querySelector("#img");
let btn = document.querySelector("button");
let context = canvas.getContext('2d');
let width = 320; //視頻和canvas的寬度
let height = 0; //
let streaming = false; // 是否開始捕獲媒體
// 獲取用戶媒體,包含視頻和音頻
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(stream => {
video.srcObject = stream; // 將捕獲的視頻流傳遞給video 放棄window.URL.createObjectURL(stream)的使用
video.play(); // 播放視頻
audio.srcObject = stream;
audio.play();
});
function tackcapture() {
// 需要判斷媒體流是否就緒
if(streaming){
context.drawImage(video, 0, 0, 350, 200);// 將視頻畫面捕捉後繪製到canvas裏面
img.src = canvas.toDataURL('image/png');// 將canvas的數據傳送到img裏
}
}
btn.addEventListener('click',tackcapture,false); // 按鈕點擊事件
// 監聽視頻流就位事件,即視頻可以播放了
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
</script>
</body>
</html>
