使用html5 javascript 共享屏幕与录屏

使用html5 javascript 共享屏幕: json

<!DOCTYPE html>

<html>

<head>

<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>

<br>

<br>

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 = "";

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>
    <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>

<head>

<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;

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>

<br>

</body>

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

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>

<!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

Recommend

重庆地铁限电关灯车厢内泛红光宛如密室游戏

华为Mate 50配色曝光！至少5种配色方案 - 手机中国

Spring MVC组件之HandlerAdapter - yaoxtao

Are GPUs Worth it for ML?

定制属于你的潮流 | 轻链竞品分析

Creating a perfect trap for light

Top Crypto PR Agencies In UK

《推进家居产业高质量发展行动方案》发布，推动适老化产品研发应用

Wealthiest People in Canada (August 28, 2022)

活人身上长出第二个肝脏？供体短缺或获革命性突破

About Joyk