利用getDisplayMedia在WebRTC上實現螢幕捕獲

阿新 • • 發佈：2020-12-17

1. 用法

var promise = navigator.mediaDevices.getDisplayMedia(constraints);

2. 瀏覽器相容性

3. demo

<!--
    getDisplayMedia_demo
-->
<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" 
, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1em;
    }

    video {
       width: 40%;
       border-radius 
: 5px;
       border: 1px solid black;
   }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2020-12-14 螢幕捕獲getDisplayMedia demo</title>
</head>

<body 
>
    <div id="mainDiv">
        <h1><code>getDisplayMedia()</code> very simple demo</h1>

        <video controls autoplay playsinline muted="false" volume=0></video>
        <br><br>
        <button id="btn-test-getDisplayMedia">Test getDisplayMedia API</button>
        
        <script src="getDisplayMedia_demo.js"> </script> 
      </div>
</body>

var constraints = {video: true};
var video = document.querySelector('video');
var button = document.querySelector('#btn-test-getDisplayMedia');

button.onclick = function(){
    this.disabled = true;

    invokeGetDisplayMedia(function(screen){
        video.srcObject = screen;
    });
}

function invokeGetDisplayMedia(success){
    var constraints = {
        video : true
    };
    if(navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia(constraints).then(success);
    }
    else {
        navigator.getDisplayMedia(constraints).then(success);
    }
}

利用getDisplayMedia在WebRTC上實現螢幕捕獲

技術標籤：WebRTCwebrtc 1. 用法 var promise = navigator.mediaDevices.getDisplayMedia(constraints);

SpringMVC利用dropzone元件實現圖片上傳

操作步驟如下一、dropzone匯入 01.dropzone官網下載其外掛壓縮包並複製專案； 02.將CSS和JS檔案在HTML檔案中引入；

微信小程式清空輸入框資訊與實現螢幕往上滾動的示例程式碼

微信小程式，是屬於小程式的一種，英文名為Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或搜一下即可開啟應用。微信小程式也是基於H5，JS的開發。

Vue 利用Vant元件實現資料的上拉重新整理，下拉載入

html程式碼用到了vant元件 vant文件地址 <template> <div class="home"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

abap系列-如何在自定義螢幕上實現range選擇(二）

上一篇介紹了通過選擇螢幕來實現select-options的方法.本篇繼續介紹另一種方法。這種方法比前一種要麻煩，但是可以自由放置輸入欄位的位置，相對第一種要靈活一些。

利用JDBC在java上實現對SQL資料庫的新增刪除修改,連線資訊檔案,批處理等操作

技術標籤：JDBCsql資料庫jdbcsqljava 利用JDBC在java上實現對SQL資料庫的刪除修改新增,連線資訊檔案,批處理等操作

shell指令碼開啟檔案_利用shell指令碼實現將寶塔檔案上傳到百度雲網盤

技術標籤：shell指令碼開啟檔案演示環境：Ubuntu 18 + 寶塔面板文章內容：寶塔面板帶有定時計劃功能，就是可以定時備份網站，現在是想將寶塔上的檔案，通過shell指令碼形式定時上傳到百度網盤進行第二次備份，

手把手教你利用鴻蒙OS實現智慧家居·LOT上雲專案

手把手教你利用鴻蒙OS實現智慧家居·LOT上雲專案一、前言今天使用鴻蒙OS，做一個LOT上雲的智慧家居專案。我們想實現的場景是這樣的：雲端WEB有一個控制介面，能夠操控家房間裡的燈和風扇，同時將房間裡溫度、溼度

在STM32上利用PWM原理實現呼吸燈效果

在ST32專案中第一次接觸到PWM這個概念，PWM是Plus width modulation的英文縮寫，百度百科有詳細介紹。

搭載第二代 LTPO 材料，小米 12 Pro 螢幕智慧動態重新整理率技術官方詳解：率先在安卓手機上實現滑動變速

12 月 23 日訊息，今日上午，小米手機官方表示，小米自研智慧動態重新整理率，是第二代低功耗 2K 螢幕的創新體驗，第一次讓小米 12 Pro 擁有了滑動變速的新技能。小米手機稱，小米 12 Pro 螢幕堆好料，不是為了引數

Android利用碎片fragment實現底部標題欄(Github模板開源)

fragment特點 Fragment與Activity相似，有自己的生命週期，佈局。相當於一個迷你的Activity

如何利用C語言實現最簡單的HTTP伺服器詳解

此段程式碼的特點 <h1>Hello!</h1> 如何編譯執行？編譯:gcc -o hello_server hello_server.c

利用Redis如何實現自動補全功能

忘了redis從哪個版本開啟，能夠根據輸入的部分命令字首給出提示，即自動補全。接下來筆者介紹基於redis實現這個很酷的功能。

詳解如何利用amoeba(變形蟲)實現mysql資料庫讀寫分離

關於mysql的讀寫分離架構有很多，百度的話幾乎都是用mysql_proxy實現的。由於proxy是基於lua指令碼語言實現的，所以網上不少網友表示proxy效率不高，也不穩定，不建議在生產環境使用；

Nginx利用Lua+Redis實現動態封禁IP的方法

一、背景我們在日常維護網站中，經常會遇到這樣一個需求，為了封禁某些爬蟲或者惡意使用者對伺服器的請求，我們需要建立一個動態的 IP 黑名單。對於黑名單之內的 IP ，拒絕提供服務。

Pytorch 神經網路—自定義資料集上實現教程

第一步、匯入需要的包 import os import scipy.io as sio import numpy as np import torch import torch.nn as nn

利用Python程式碼實現一鍵摳背景功能

前言又是一個逛csdn發現的一個有趣的小專案，可以一鍵摳背景，需要用到removebg模組及其API，API可從其官網免費獲取，網址如下https://www.remove.bg/zh

python 實現螢幕錄製示例

PIL 即pollow 的安裝命令如下： pip install pillow 其中cv2的安裝是下面這條命令 pip install opencv-python

利用python Selenium實現自動登陸京東簽到領金幣功能

如何自動登陸京東？我們先來看一下京東的登陸頁面，如下圖所示：【插入圖片，登陸頁面】

python 利用pywifi模組實現連線網路破解wifi密碼實時監控網路

python 利用pywifi模組實現連線網路破解wifi密碼實時監控網路，具體內容如下：

利用getDisplayMedia在WebRTC上實現螢幕捕獲

1. 用法

2. 瀏覽器相容性

3. demo

相關推薦