javascript - 如何使用 webRTC 开始视频流?

标签 javascript node.js webrtc

我正在编写以下代码,用于启动相机并使用 webRTC 技术在 Google Chrome 浏览器上观看视频。我创建了两个文件index.html 和client.js。我已附上两者的代码。 Node.js 服务器安装在我的 PC 上。问题是我的相机已打开,但我无法看到视频流。

client.js

function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
} 

if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 

   //enabling video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector('video'); 

      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
} else { 
   alert("WebRTC is not supported"); 
}`

index.html

<!DOCTYPE html> 
<html lang = "en">

   <head> 
      <meta charset = "utf-8" /> 
       <link rel="stylesheet" href="css/main.css" />
   </head> 

   <body> 
      <video autoplay></video>
      <script src = "js/client.js"></script>     
   </body>
    </html>

最佳答案

看来您正在使用旧代码,现在 API 已更改,更好地开始使用最新的 API。

参见DemoSource

在你的 client.js 中尝试下面的代码片段

var constraints =  { audio: true,  video: true};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
   var video = document.querySelector('video');
   video.srcObject = stream;
}).catch(function(err) {
     console.log('Error in getting stream', err);
});

关于javascript - 如何使用 webRTC 开始视频流?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44288813/

相关文章:

android - 通过 socket.io-client 和 libjingle 从 Android 应用程序流式传输到浏览器客户端应用程序

node.js - 如何通过 Fitness REST API 从 Google 健身商店获取每日步数和活跃卡路里

node.js - Sails.js - 当我 exec() 时数据对象变为空白

javascript - var 不附加到全局

webrtc - 检测 MediaStreamTrack 是否为黑色/空白

swift - 扬声器问题 - WebRTC 和 iOS

javascript - CSS 颜色叠加 PNG

javascript - 简单小巧的纯 javascript 灯箱(对话框覆盖)?

javascript - 记住浏览器后退按钮上最后选择的单选按钮

javascript - 在部分标签中插入选项卡框导致另一个标签不对齐...如何修复?