1. 下面例子演示了录屏和截图功能：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webRTCtitle>
head>
<body>
<video id="localVideo" autoplay playsinline muted>video>
<div id="imgContainer">div>
<button id="screenshotBtn" style="position: fixed;right: 0;top: 50%;">截图button>
<script>
const constraints = {
audio: true,
video: { width: 1280, height: 720 }
}
getLocalStream(constraints)
async function getLocalStream(constraints) {
const stream = await navigator.mediaDevices.getUserMedia(constraints)
playLocalStream(stream)
}
function playLocalStream(stream) {
const videoEl = document.getElementById('localVideo')
videoEl.srcObject = stream
}
script>
<script>
var imgList = []
var screenshotBtn = document.getElementById('screenshotBtn')
screenshotBtn.addEventListener('click', generatePhotos)
function generatePhotos () {
var filterList = [
'blur(5px)',
'brightness(0.5)',
'contrast(200%)',
'grayscale(100%)',
'hue-rotate(90deg)',
'invert(100%)',
'opacity(90%)',
'saturate(200%)',
'saturate(20%)',
'sepia(100%)',
'drop-shadow(4px 4px 8px blue)',
]
var videoEl = document.getElementById('localVideo')
var canvas = document.createElement('canvas')
canvas.width = videoEl.videoWidth
canvas.height = videoEl.videoHeight
var ctx = canvas.getContext('2d')
ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height)
imgList.push(canvas.toDataURL('image/png'))
for (let i = 0; i < filterList.length; i++) {
ctx.filter = filterList[i]
ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height)
imgList.push(canvas.toDataURL('image/png'))
}
insertImgs(imgList)
}
function insertImgs(list) {
const container = document.createDocumentFragment
var imgContainer = document.getElementById('imgContainer');
var fragment = document.createDocumentFragment();
list.forEach((img) => {
var imgEl = document.createElement('img');
imgEl.src = img;
fragment.appendChild(imgEl);
});
imgContainer.appendChild(fragment)
}
script>
body>
html>
2. 下面的例子演示了录屏的功能
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webRTCtitle>
head>
<body>
<h2>录屏h2>
<video id="screenVideo" autoplay playsinline>video>
<button id="recorderStartBtn" style="position: fixed;right: 0;top: 46%;">开始录制button>
<button id="recorderStopBtn" style="position: fixed;right: 0;top: 48%;">停止录制button>
<button id="recorderPauseBtn" style="position: fixed;right: 0;top: 52%;">暂停录制button>
<button id="recorderResumeBtn" style="position: fixed;right: 0;top: 54%;">继续录制button>
<script>
var localStream
shareScreen()
async function shareScreen() {
localStream = await navigator.mediaDevices.getDisplayMedia({
audio: true,
video: true,
})
playStream(localStream)
}
function playStream(stream) {
const video = document.querySelector('#screenVideo')
video.srcObject = stream
}
script>
<script>
function getSupportedMimeTypes() {
const media = 'video'
const types = [
'webm',
'mp4',
'ogg',
'mov',
'avi',
'wmv',
'flv',
'mkv',
'ts',
'x-matroska',
]
const codecs = ['vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h264']
const supported = []
const isSupported = MediaRecorder.isTypeSupported
types.forEach((type) => {
const mimeType = `${media}/${type}`
codecs.forEach((codec) =>
[
`${mimeType};codecs=${codec}`,
`${mimeType};codecs=${codec.toUpperCase()}`,
].forEach((variation) => {
if (isSupported(variation)) supported.push(variation)
}),
)
if (isSupported(mimeType)) supported.push(mimeType)
})
return supported
}
console.log(getSupportedMimeTypes())
function getRecorder () {
const kbps = 1024
const Mbps = kbps * kbps
const options = {
audioBitsPerSecond: 128000,
videoBitsPerSecond: 2500000,
mimeType: 'video/webm; codecs="vp8,opus"',
}
return new MediaRecorder(localStream, options)
}
var mediaRecorder = getRecorder()
var recorderStartBtn = document.getElementById('recorderStartBtn')
recorderStartBtn.addEventListener('click', handleRecorderStart)
var recorderPauseBtn = document.getElementById('recorderPauseBtn')
recorderPauseBtn.addEventListener('click', handleRecorderPause)
var recorderResumeBtn = document.getElementById('recorderResumeBtn')
recorderResumeBtn.addEventListener('click', handleRecorderResume)
var recorderStopBtn = document.getElementById('recorderStopBtn')
recorderStopBtn.addEventListener('click', handleRecorderStop)
function handleRecorderStart() {
mediaRecorder.start()
mediaRecorder.ondataavailable = (e) => {
const blob = new Blob([e.data], { type: 'video/mp4' })
downloadBlob(blob)
}
mediaRecorder.onstart = (e) => {
console.log("开始录制", e)
}
mediaRecorder.onstop = (e) => {
console.log("停止录制", e)
}
mediaRecorder.onpause = (e) => {
console.log("暂停录制", e)
}
mediaRecorder.onresume = (e) => {
console.log("继续录制", e)
}
}
function handleRecorderPause() {
mediaRecorder.pause()
}
function handleRecorderResume() {
mediaRecorder.resume()
}
function handleRecorderStop() {
mediaRecorder.stop()
}
function downloadBlob(blob) {
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
a.click()
URL.revokeObjectURL(url)
}
script>
body>
html>
3. 下面的例子演示了保存（下载）录像流（录屏流也可）到本地
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webRTCtitle>
head>
<body>
<h1>录像h1>
<video id="cameraVideo" autoplay playsinline muted>video>
<button id="recorderStartBtn" style="position: fixed;right: 0;top: 52%;">开始录制button>
<button id="recorderPauseBtn" style="position: fixed;right: 0;top: 54%;">暂停录制button>
<button id="recorderResumeBtn" style="position: fixed;right: 0;top: 56%;">继续录制button>
<button id="recorderStopBtn" style="position: fixed;right: 0;top: 58%;">停止录制button>
<script>
const constraints = {
audio: true,
video: { width: 1280, height: 720 }
}
var cameraStream
getLocalStream(constraints)
async function getLocalStream(constraints) {
cameraStream = await navigator.mediaDevices.getUserMedia(constraints)
playLocalStream(cameraStream)
}
function playLocalStream(stream) {
const videoEl = document.getElementById('cameraVideo')
videoEl.srcObject = stream
}
script>
<script>
function getSupportedMimeTypes() {
const media = 'video'
const types = [
'webm',
'mp4',
'ogg',
'mov',
'avi',
'wmv',
'flv',
'mkv',
'ts',
'x-matroska',
]
const codecs = ['vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h264']
const supported = []
const isSupported = MediaRecorder.isTypeSupported
types.forEach((type) => {
const mimeType = `${media}/${type}`
codecs.forEach((codec) =>
[
`${mimeType};codecs=${codec}`,
`${mimeType};codecs=${codec.toUpperCase()}`,
].forEach((variation) => {
if (isSupported(variation)) supported.push(variation)
}),
)
if (isSupported(mimeType)) supported.push(mimeType)
})
return supported
}
console.log(getSupportedMimeTypes())
var mediaRecorder
function getRecorder () {
const kbps = 1024
const Mbps = kbps * kbps
const options = {
audioBitsPerSecond: 128000,
videoBitsPerSecond: 2500000,
mimeType: 'video/webm; codecs="vp8,opus"',
}
return new MediaRecorder(cameraStream, options)
}
var recorderStartBtn = document.getElementById('recorderStartBtn')
recorderStartBtn.addEventListener('click', handleRecorderStart)
var recorderPauseBtn = document.getElementById('recorderPauseBtn')
recorderPauseBtn.addEventListener('click', handleRecorderPause)
var recorderResumeBtn = document.getElementById('recorderResumeBtn')
recorderResumeBtn.addEventListener('click', handleRecorderResume)
var recorderStopBtn = document.getElementById('recorderStopBtn')
recorderStopBtn.addEventListener('click', handleRecorderStop)
function handleRecorderStart() {
mediaRecorder = getRecorder()
mediaRecorder.start()
mediaRecorder.ondataavailable = (e) => {
const blob = new Blob([e.data], { type: 'video/mp4' })
downloadBlob(blob)
}
mediaRecorder.onstart = (e) => {
console.log("开始录制", e)
}
mediaRecorder.onstop = (e) => {
console.log("停止录制", e)
}
mediaRecorder.onpause = (e) => {
console.log("暂停录制", e)
}
mediaRecorder.onresume = (e) => {
console.log("继续录制", e)
}
}
function handleRecorderPause() {
mediaRecorder.pause()
}
function handleRecorderResume() {
mediaRecorder.resume()
}
function handleRecorderStop() {
mediaRecorder.stop()
}
function downloadBlob(blob) {
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
a.click()
URL.revokeObjectURL(url)
}
script>
body>
html>
