使用html5 javascript 共享屏幕: json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
<style>
#video {
border: 1px solid #999;
width: 98%;
max-width: 860px;
}
.error {
color: red;
}
.warn {
color: orange;
}
.info {
color: darkgreen;
}
</style>
<title>Using the Screen Capture API - simple_screen_capture - code sample</title>
</head>
<body>
<p>This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.</p>
<p><button id="start">Start Capture</button> <button id="stop">Stop Capture</button></p>
<video id="video" autoplay></video>
<br>
<strong>Log:</strong>
<br>
<pre id="log"></pre>
<script>
const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
const displayMediaOptions = {
video: {
cursor: "always"
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", (evt) => {
startCapture();
}, false);
stopElem.addEventListener("click", (evt) => {
stopCapture();
}, false);
console.log = (msg) => logElem.innerHTML += `${msg}<br>`;
console.error = (msg) => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
console.warn = (msg) => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
console.info = (msg) => logElem.innerHTML += `<span class="info">${msg}</span><br>`;
async function startCapture() {
logElem.innerHTML = "";
try {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
dumpOptionsInfo();
} catch (err) {
console.error(`Error: ${err}`);
}
}
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach((track) => track.stop());
videoElem.srcObject = null;
}
function dumpOptionsInfo() {
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
console.info("Track settings:");
console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
console.info("Track constraints:");
console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}
</script>
</body>
</html>
录制屏幂:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>在线屏幕录制</title>
<style>
body{
font-family: Arial;
margin: 4vh auto;
width: 90vw;
max-width: 600px;
text-align: center;
}
#controls{
text-align: center;
}
.btn{
margin: 10px 5px;
padding: 15px;
background-color: #2bcbba;
border: none;
color: white;
font-weight: bold;
border-radius: 6px;
outline: none;
font-size: 1.2em;
width: 120px;
height: 50px;
}
.btn:hover{
background-color: #26de81;
cursor: hand;
}
.btn:disabled{
background-color: #2bcbba80;
}
#stop{
background-color: #fc5c65;
}
#video{
margin-top: 10px;
margin-bottom: 20px;
border: 12px solid #a5adb0 ;
border-radius: 15px;
outline: none;
width: 100%;
height: 400px;
background-color: black;
}
h1{
color: #2bcbba;
letter-spacing:-2.5px;
line-height: 30px;
}
.created{
color: lightgrey;
letter-spacing: -0.7px;
font-size: 1em;
margin-top: 40px;
}
.created > a{
color: #4b7bec;
text-decoration: none;
}
</style>
</head>
<body>
<h1><u style='color:#fc5c65'>在线屏幕录制</u><br>支持 :新版本 Chrome,Edge,Firefox 桌面浏览器 <br></h1>
<video autoplay='true' id='video' controls='true' controlsList='nodownload'></video>
<button class='btn' id='record' onclick='record()'>录制</button>
<button style='display: none' class='btn' id='stop' onclick='stop()'>停止</button>
<button disabled='true' class='btn' id='download' onclick='download()'>下载</button>
<div class='created'> </div>
<br>
</body>
<script>
const video = document.getElementById('video')
const downloadBtn = document.getElementById('download')
const recordBtn = document.getElementById('record')
const stopBtn = document.getElementById('stop')
let recorder
async function record() {
let captureStream
try{
captureStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// audio: true, not support
cursor: 'always'
})
}catch(e){
alert("Could not get stream")
return
}
downloadBtn.disabled = true
recordBtn.style = 'display: none'
stopBtn.style = 'display: inline'
window.URL.revokeObjectURL(video.src)
video.autoplay = true
video.srcObject = captureStream
recorder = new MediaRecorder(captureStream)
recorder.start()
captureStream.getVideoTracks()[0].onended = () => {
recorder.stop()
}
recorder.addEventListener("dataavailable", event => {
let videoUrl = URL.createObjectURL(event.data, {type: 'video/ogg'})
video.srcObject = null
video.src = videoUrl
video.autoplay = false
downloadBtn.disabled = false
recordBtn.style = 'display: inline'
stopBtn.style = 'display: none'
})
}
function download(){
const url = video.src
const name = new Date().toISOString().slice(0, 19).replace('T',' ').replace(" ","_").replace(/:/g,"-")
const a = document.createElement('a')
a.style = 'display: none'
a.download = `${name}.ogg`
a.href = url
document.body.appendChild(a)
a.click()
}
function stop(){
let tracks = video.srcObject.getTracks()
tracks.forEach(track => track.stop())
recorder.stop()
}
</script>
</html>
参考 https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
使用html5 javascript 共享屏幕与录屏