1 完成html代碼
<html>
<head>
<title>WebRTC capture video and audio</title>
<style>
//============== 切換視頻效果 ==================
.none{
-webkit-filter:none;
}
.blur{
-webkit-filter:blur(3px);
}
.grayscale{
-webkit-filter:grayscale(1);
}
.invert{
-webkit-filter:invert(1);
}
.sepia {
-webkit-filter:sepia(1);
}
</style>
</head>
<body>
============== 用於顯示和選擇設備 ==================
<div>
<label>audio input device:</label>
<select id = "audioSource"></select>
</div>
<div>
<label>audio output device:</label>
<select id = "audioOutput"></select>
</div>
<div>
<label>video input device:</label>
<select id = "videoSource"></select>
</div>
============== 視頻效果選擇 ==================
<div>
<label>Filter:</label>
<select id = "filter">
<option value = "none">None</option>
<option value = "blur">模糊</option>
<option value = "grayscale">灰度</option>
<option value = "invert">反色</option>
<option value = "sepia">褐色</option>
</select>
</div>
============== 顯示視頻圖像 ==================
<selection>
<!--autoplay 表示一進來就播放 controls表示顯示播放的按鈕-->
<!--<audio autoplay controls id = 'audioplayer'></audio>-->
<table>
<tr>
<td><video autoplay playsinline id = "player"></video></td>
<td><video playsinline id = "recplayer"></video></td>
<td> <div id = 'constraints' class = 'output'></div></td>
</tr>
<tr>
<td> <button id = "record">Start Record</button></td>
<td> <button id = "recplay" disabled>Play</button></td>
<td> <button id = "download" disabled>Download</button></td>
</tr>
</table>
</selection>
<div>
<button id = "snapshort">截取快照</button>
</div>
<div>
<canvas id = "picture">截取快照</canvas>
</div>
============== js ==================
<script src = "./client.js"></script>
<script src = "https://webrtc.github.io/adapter/adapter-latest.js"></script>
</body>
</html>
切換視頻效果是對視頻進行一些模糊或者濾鏡處理例如褐色處理：
2 完整JS代碼
'use strict'
var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');
//視頻效果標籤
var filtersSelect = document.querySelector('select#filter');
//用於拍照的btn和顯示截取快照的圖片
var snapshort = document.querySelector('button#snapshort');
var picture = document.querySelector('canvas#picture');
picture.width = 320;
picture.height = 240;
//用於顯示視頻流參數信息
var divConstraints = document.querySelector('div#constraints');
//獲取到video標籤
var videoplay = document.querySelector('video#player');
//var audioplay = document.querySelector('audio#audioplayer');
//錄製相關
var recvideo = document.querySelector('video#recplayer');
var btnRecord = document.querySelector('button#record');
var btnPlay = document.querySelector('button#recplay');
var btnDownload = document.querySelector('button#download');
var buffer;
var mediaRecorder;
//將流賦值給video標籤
function gotMediaStream(stream){
videoplay.srcObject = stream;
//audioplay.srcObject = stream;
//視頻的所有軌
var videoTrack = stream.getVideoTracks()[0];
var videoConstraints = videoTrack.getSettings();
divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);
window.stream = stream;
return navigator.mediaDevices.enumerateDevices();
}
//打印錯誤日誌
function handleError(err){
console.log('getUserMedia error : ', err);
}
//設備信息數組
function gotDevices(deviceInfos){
deviceInfos.forEach(function(deviceinfo){
var option = document.createElement('option');
option.text = deviceinfo.label;
option.value = deviceinfo.deviceId;
if(deviceinfo.kind == 'audioinput'){
audioSource.appendChild(option);
}else if(deviceinfo.kind === 'audiooutput'){
audioOutput.appendChild(option);
}else if(deviceinfo.kind === 'videoinput'){
videoSource.appendChild(option);
}
})
}
function start(){
if(!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia){
console.log('getUserMedia is not supported');
return;
}else{
var deviceId = videoSource.value;
var constraints = {
video : {
//修改視頻寬高
width : 320,
height : 240,
//設置幀率
frameRate : 15,
facingMode : 'enviroment',
deviceId : deviceId ? {exact:deviceId} : undefined
},
audio : false
}
navigator.mediaDevices.getDisplayMedia(constraints)
.then(gotMediaStream)
.then(gotDevices)
.catch(handleError)
}
}
start();
//每次選擇時，都會觸發start函數
videoSource.onchange = start
filtersSelect.onchange = function(){
//獲取css名字
videoplay.className = filtersSelect.value;
}
//截取快照事件
snapshort.onclick = function(){
picture.className = filtersSelect.value;
picture.getContext('2d').drawImage(videoplay, 0,0, picture.width,picture.height);
}
function handleDataAvailable(e){
if(e && e.data && e.data.size > 0){
buffer.push(e.data);
}
}
function startRecord(){
buffer = [];
var options = {
mimeType : 'video/webm; codecs = vp8'
}
if(!MediaRecorder.isTypeSupported(options.mimeType)){
console.error('${options.mimeType} is not supported!');
return;
}
try{
mediaRecorder = new MediaRecorder(window.stream, options);
}catch(e){
console.error('Failed to create MediaRecorder:',e);
return
}
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);
}
function stopRecord(){
mediaRecorder.stop();
}
//錄製按鈕監聽
btnRecord.onclick = ()=>{
if(btnRecord.textContent === 'Start Record'){
startRecord();
btnRecord.textContent = 'Stop Record';
btnPlay.disabled = true;
btnDownload.disabled = true;
}else{
stopRecord();
btnRecord.textContent = 'Start Record';
btnPlay.disabled = false;
btnDownload.disabled = false;
}
}
//播放按鈕監聽
btnPlay.onclick = ()=>{
var blob = new Blob(buffer, {type : 'video/webm'});
recvideo.src = window.URL.createObjectURL(blob);
recvideo.srcObject = null;
recvideo.controls = true;
recvideo.play();
}
//下載按鈕監聽
btnDownload.onclick = ()=>{
var blob = new Blob(buffer, {type: 'video/webm'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.style.display = 'none';
a.download = 'aaa.webm';
a.click();
}
3 效果預覽
