ShockUCCU | Web Design

MediaDevices 提供像是照相機、麥克風和螢幕分享等功能，可取得這些多媒體的串流資料，這篇主要透過 MediaDevices.getDisplayMedia() 進行實作: 使用HTML的<video>可將影像顯示在Web page上， 新增兩個按鈕一個是開始截圖、一個結束截圖。 <video id="video" autoplay> Your browser does not support HTML5 video. </video> <button type="button" onclick="startCapture()">開始截圖</button> <button type="button" onclick="stopCapture()">停止截圖</button> var video = document.getElementById("video"); var startCapture = function() { if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) { navigator.mediaDevices.getDisplayMedia({ video: { cursor: "always" }, audio: false }).then(function(stream) { video.srcObject = stream; video.play(); }); } } var stopCapture = function(evt) { var tracks = video.srcObject.getTracks(); tracks.forEach(track => tra...

近期剛完成一項專案需求是要製作生產履歷報告，當中報表需要加入檢驗數據圖及本體照片，因此開始研究如何在網頁上開啟鏡頭拍照? MediaDevices 提供像是照相機、麥克風和螢幕分享等功能，可取得這些多媒體的串流資料，這篇主要透過 MediaDevices.getUserMedia() 進行實作: 使用HTML的<video>可將影像顯示在Web page上。 <video id="video" autoplay> Your browser does not support HTML5 video. </video> 使用getUserMedia取得影像。 // 檢查相機是否存在 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // 設定影像width, height var constraints = { video: { width: { ideal: 400 }, height: { ideal: 300 } } }; navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { var video = document.getElementById('video'); video.srcObject = mediaStream; video.play(); }).catch(function(e) { console.log(e.name + ": " + e.message); }); } 開啟測試網頁就可以看到測試畫面。 補充說明，使用Chrome實作發現一個問題，使用http協定無法開啟相機功能可能跟安全政策有關，我找到一篇 文章 的解決方式在開啟Chrom...