下面用H5的video實現了簡單的錄像功能,沒涉及到數據的傳輸,因爲沒有後端,只是一個簡單的demo,想做視屏的同學可以用來參考參考。
技術的關鍵點在就在navigator上,因爲navigator在不同瀏覽器對於打開攝像頭的屬性是不一樣的,詳情請看以下代碼:
- <!DOCTYPE html>
- <html>
- <head>
- <title>camera</title>
- </head>
- <body>
- <video id="video" autoplay>
- </video>
- </body>
- <script type="text/javascript">
- var video =document.getElementById('video');
- navigator.getMedia = ( navigator.getUserMedia ||
- navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia ||
- navigator.msGetUserMedia);
- navigator.getMedia({video:true},function(stream){
- video.src = window.webkitURL.createObjectURL(stream);
- },function(error){alert(error)})
- </script>
- </html>