摆脱客户端?网页发起直播势在必行!

2019-06-13 admin

背景

近几年直播行业飞速发展,但是由于Web端这方面功能的长时间缺失,使得直播端以客户端为主;WebRTC 的出现使得网页也可以成为直播端。那么究竟WebRTC是什么呢?

WebRTC,即Web Real-Time Communication,web实时通信技术。简单地说就是在web浏览器里面引入实时通信,包括音视频通话等,它使得实时通信变成一种标准功能,任何Web应用都无需借助第三方插件和专有软件,而是通过JavaScript API即可完成;而且WebRTC提供了视频会议的核心技术,包括音视频的采集、编解码、网络传输、展示等功能,还支持跨平台,包括主流的PC和移动端设备。

下面介绍下需要用到的几个API:

getUserMedia

我们可以通过调用navigator.mediaDevices.getUserMedia(constraints)去初始化一个本地的音视频流,然后把直播流通过video标签播放。代码如下:

html:

<div id="container">
    <video id="gum-local" autoplay playsinline></video>
    <button id="showVideo">Open camera</button>
    <button id="switchVideo">switch camera</button>
</div>

js:

const constraints = {
  audio: false,
  video: true
};

async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const video  = document.querySelector('video');
    video.srcObject = stream;
  } catch (e) {
    console.log(e, 'stream init error');
  }
}
document.querySelector('#showVideo').addEventListener('click', (e) => init(e));

示例效果: 图片描述

当然,如果有多个设备,就需要考虑设备选择和设备切换的问题。那就需要用到下面的这个API。

设备

我们看看如何用原生的Web API去获取设备(以下示例代码可适用于Chrome,其他浏览器暂未测试;具体浏览器兼容性可参考官方文档,本文档底部有链接)。

navigator.mediaDevices.enumerateDevices()

如果枚举成功将会返回一个包含MediaDeviceInfo实例的数组,它包含了可用的多媒体输入输出设备的信息。

下面是调用代码示例。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  console.log(devices, '-----enumerateDevices------');
});

设备参数说明:

  1. deviceId:设备id,具有唯一性
  2. groupId:设备组id,不具有唯一性
  3. kind:设备类别(audioinput:音频输入设备,audiooutput:音频输出设备,videoinput:视频输入设备)
  4. label:设备名称(未经过授权允许的设备,label值为空,授权允许后可拿到label的值,如下两图所示)

获取的所有设备截图(未授权): 图片描述

videoinput已授权截图: 图片描述

获取到设备列表后,可设置navigator.mediaDevices.getUserMedia(constraints)的constraints参数选择所用设备。

    const { audioList, videoList } = await getDevices();
    const constraints = {
      audio: {
        deviceId: audioList[0].deviceId
      },
      video: {
        deviceId: videoList[0].deviceId
      }
    };
    navigator.mediaDevices.getUserMedia(constraints);

...

然而,我们在更换deviceId切换设备的时候发现一些异常情况。在某些deviceId之间切换时,摄像头画面或者是麦克风采集处并没有发生变化。进一步调试发现,这些切换后没有发生变化的deviceId都具有相同的groupId。因此,相同groupId下的设备,选择一个用于切换即可。

筛选麦克风、摄像头设备示例:

function getDevices() {
  return new Promise((resolve) => {
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      const audioGroup = {};
      const videoGroup = {};
      const cameraList = [];
      const micList = [];
      devices.forEach((device, index) => {
        if ((!device.groupId || !audioGroup[device.groupId]) && device.kind === 'audioinput') {
          micList.push(device);
          audioGroup[device.groupId] = true;
        }

        if ((!device.groupId || !videoGroup[device.groupId]) && device.kind === 'videoinput') {
          cameraList.push(device);
          videoGroup[device.groupId] = true;
        }
      });
      resolve({ cameraList, micList });
    });
  });
}

注意:在Chrome下,电脑外接摄像头后拔出设备,此时还有可能获取到拔出的设备信息,在进行切换的时候会有问题,可以采用在页面进行友好提示处理这种情况。

屏幕共享

MediaDevices.getDisplayMedia

Chrome 72+、Firefox 66+版本已经实现了WebRTC规范中的MediaDevices.getDisplayMedia,具备屏幕共享功能。

navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: false
}).then(stream => {
  video.srcObject = stream;
}).catch(err => {
  console.error(err);
});

示例效果: 图片描述

对于Chrome 72以下的版本,想要实现屏幕共享的功能需要借助Chrome插件去获取screen(显示器屏幕)、application windows(应用窗口)和browser tabs(浏览器标签页)。 Chrome插件:由manifest.json和script.js组成。

manifest.json 填入一些基本数据。

background中scripts传入需执行的js文件。

添加permissions: ['desktopCapture'],用来开启屏幕共享的权限。

externally_connectable用来声明哪些应用和网页可以通过`runtime.connect`和`runtime.sendMessage`连接到插件。
{
   "manifest_version": 2,
   "name": "Polyv Web Screensharing",
   "permissions": [ "desktopCapture" ],
   "version": "0.0.1",
   "background": {
      "persistent": false,
      "scripts": [ "script.js" ]
   },
   "externally_connectable": {
      "matches": ["*://localhost:*/*"]
   }
}

script.js

// script.js
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (request.getStream) {
      // Gets chrome media stream token and returns it in the response.
      chrome.desktopCapture.chooseDesktopMedia(
        ['screen', 'window', 'tab'], sender.tab,
        function(streamId) {
          sendResponse({ streamId: streamId });
        });
      return true; // Preserve sendResponse for future use
    }
  }
);

在页面中开始屏幕共享。通过chrome.runtime.sendMessage发送消息到Chrome插件调起屏幕共享。获取到streamId后,通过mediaDevices.getUserMedia得到stream。

const EXTENSION_ID = '<EXTENSION_ID>';
const video = $('#videoId');
chrome.runtime.sendMessage(EXTENSION_ID, { getStream: true }, res => {
  console.log('res: ', res);
  if (res.streamId) {
    navigator.mediaDevices.getUserMedia({
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: res.streamId
        }
      }
    }).then((stream) => {
      video.srcObject = stream;
      video.onloadedmetadata = function(e) {
        video.play();
      };
    })
  } else {
    // 取消选择
  }
});

而Firefox 66版本以下,不需要像Chrome借助插件才能实现屏幕共享。Firefox 33之后可以直接通过使用mediaDevices.getUserMedia,指定约束对象mediaSource为screen、window、application来实现屏幕共享。不过在Firefox中,一次只能指定一种mediaSource。

navigator.mediaDevices.getUserMedia({
  video: {
    mediaSource: 'window' 
  }
}).then(stream => {
    video.srcObject = stream;
});

传输

WebRTC的RTCPeerConnection可以建立点对点连接通信,RTCDataChannel提供了数据通信的能力。

WebRTC的点对点连接的过程为:

  1. 呼叫端给接收端发送一个offer信息。在发送给接收端之前先调用setLocalDescription存储本地offer描述。
  2. 接收端收到offer消息后,先调用setRemoteDescription存储远端offer,再创建一个answer信息给呼叫端。

RTCDataChannel提供了send方法和message事件。使用起来与WebSocket类似。

由于没有服务器,以下代码为呼叫端和接收端在同一页面上,RTCPeerConnection对象之间是如何进行数据交互。

// 创建数据通道
sendChannel = localConnection.createDataChannel('通道名称', options);
sendChannel.binaryType = 'arraybuffer';
  sendChannel.onopen = function() {
  sendChannel.send('Hi there!');
};
sendChannel.onmessage = function(evt) {
  console.log('send channel onmessage: ', evt.data);
};

// 远端接收实例
remoteConnection = new RTCPeerConnection(servers);
remoteConnection.onicecandidate = function(evt) {
  if (evt.candidate) {
    localConnection.addIceCandidate(new RTCIceCandidate(evt.candidate));
  }
};
// 当一个RTC数据通道已被远端调用createDataChannel()添加到连接中时触发
remoteConnection.ondatachannel = function() {
  const receiveChannel = event.channel;
  receiveChannel.binaryType = 'arraybuffer';
  //接收到数据时触发
  receiveChannel.onmessage = function(evt) {
    console.log('onmessage', evt.data); // log: Hi there!
  };
  receiveChannel.send('Nice!');
};

// 监听是否有媒体流
remoteConnection.onaddstream = function(e) {
  peerVideo.srcObject = e.stream;
};

localConnection.addStream(stream);

// 创建呼叫实例
localConnection.createOffer().then(offer => {
  localConnection.setLocalDescription(offer);
  remoteConnection.setRemoteDescription(offer);
  remoteConnection.createAnswer().then(answer => {
    remoteConnection.setLocalDescription(answer);
    // 接收到answer
    localConnection.setRemoteDescription(answer);
  })
});

至此我们已经介绍完毕浏览器设备检测采集和屏幕分享的基本流程,但是光有这些可还远远不够,一套完整的直播体系包括音视频采集、处理、编码和封装、推流到服务器、服务器流分发、播放器流播放等等。如果想节省开发成本,可以使用第三方SDK。下面简单介绍下使用声网SDK发起直播的流程。

浏览器要求:

  1. Chrome 58+
  2. Firefox 56+
  3. Safari 11+(屏幕共享不可用)
  4. Opera 45+(屏幕共享不可用)
  5. QQ 10+(屏幕共享不可用)
  6. 360 安全浏览器 9.1+(屏幕共享不可用)

设备检测

调用AgoraRTC.getDevices获取当前浏览器检测到的所有可枚举设备,kind为’videoinput’是摄像头设备,kind为’audioinput’是麦克风设备,然后通过createStream初始化一个本地的流。 获取设备:

AgoraRTC.getDevices((devices) => {
    const audioGroup = {};
    const videoGroup = {};
    const cameraList = [];
    const micList = [];
    devices.forEach((device, index) => {
        if ((!device.groupId || !audioGroup[device.groupId]) && device.kind === 'audioinput') {
            micList.push(device);
            audioGroup[device.groupId] = true;
        }

        if ((!device.groupId || !videoGroup[device.groupId]) && device.kind === 'videoinput') {
            cameraList.push(device);
            videoGroup[device.groupId] = true;
        }
    });
    return { cameraList, micList };
});

初始化本地流:

// uid:自定义频道号,cameraId设备Id
const stream = AgoraRTC.createStream({
    streamID: uid,
    audio: false,
    video: true,
    cameraId: cameraId,
    microphoneId: microphoneId
});
stream.init(() => {
    // clientCamera <div id="clientCamera" ></div>
    stream.play('clientCamera', { muted: true });
}, err => {
     console.error('AgoraRTC client init failed', err);
});

stream.init()初始化直播流;如果当前浏览器摄像头权限为禁止,则调用失败,可捕获报错Media access NotAllowedError: Permission denied; 若摄像头权限为询问,浏览器默认弹窗是否允许使用摄像头,允许后调用play()可看到摄像头捕获的画面。 如果不传入cameraId,SDK会默认获取到设备的deviceId,如果权限是允许,同样会显示摄像头画面。

采集

摄像头

顺利拿到cameraId和microphoneId后就可以进行直播。通过SDK提供的createStream创建一个音视频流对象。执行init方法初始化成功之后,播放音视频(见上文)。最后通过client发布流以及推流到CDN(见下文)。

屏幕共享

Web 端屏幕共享,通过创建一个屏幕共享的流来实现的。Chrome屏幕共享需要下载插件,在创建的流的时候还需要传入插件的extensionId。

const screenStream = AgoraRTC.createStream({
    streamID: <uid>,
    audio: false,
    video: false,
    screen: true,
    extensionId: <extensionId>, // Chrome 插件id
    mediaSource: 'screen' // Firefox
});

传输

通过AgoraRTC.createStream创建的音视频流,通过publish发送到第三方服务商的SD-RTN(软件定义实时传输网络)。

client.publish(screenStream, err => {
  console.error(err);
});

别的浏览器可以通过监听到stream-added事件,通过subscribe订阅远端音视频流。

client.on('stream-added', evt => {
  const stream = evt.stream;
  client.subscribe(stream, err => {
    console.error(err);
  });
});

再通过startLiveStreaming推流到CDN。

// 编码
client.setLiveTranscoding(<coding>);
client.startLiveStreaming(<url>, true)

在推摄像头流的时候,关闭摄像头,需要推一张占位图。这个时候先用canvas画图,然后用WebRTC提供的captureStream捕获静态帧。再调用getVideoTracks,制定AgoraRTC.createStream的videoSource为该值。视频源如来自 canvas,需要在 canvas 内容不变时,每隔 1 秒重新绘制 canvas 内容,以保持视频流的正常发布。

const canvas = document.createElement('canvas');
renderCanvas(canvas);
setInterval(() => {
  renderCanvas(canvas);
}, 1000);
canvasStream = canvas.captureStream();

const picStream = AgoraRTC.createStream({
  streamID: <uid>,
  video: true,
  audio: false,
  videoSource: canvasStream.getVideoTracks()[0]
});

// 画图
function renderCanvas(canvas) {
  ...
}

一个client只能推一个流,所以在进行屏幕共享的时候,需要创建两个client,一个发送屏幕共享流,一个发送视频流。屏幕共享流的video字段设为false。视频流的video字段设为true。然后先通过setLiveTranscoding合图再推流。

const users = [
  {
    x: 0, // 视频帧左上角的横轴位置,默认为0
    y: 0, // 视频帧左上角的纵轴位置,默认为0
    width: 1280, // 视频帧宽度,默认为640
    height: 720, // 视频帧高度,默认为360
    zOrder: 0, // 视频帧所处层数;取值范围为 [0,100];默认值为 0,表示该区域图像位于最下层
    alpha: 1.0, // 视频帧的透明度,默认值为 1.0
    uid: 888888, // 旁路推流的用户 ID
  },
  {
    x: 0,
    y: 0,
    width: 1280,
    height: 720,
    zOrder: 1,
    alpha: 1.0,
    uid: 999999
  }
];

var liveTranscoding = {
  width: 640,
  height: 360,
  videoBitrate: 400,
  videoFramerate: 15,
  lowLatency: false,
  audioSampleRate: AgoraRTC.AUDIO_SAMPLE_RATE_48000,
  audioBitrate: 48,
  audioChannels: 1,
  videoGop: 30,
  videoCodecProfile: AgoraRTC.VIDEO_CODEC_PROFILE_HIGH,
  userCount: user.length,
  backgroundColor: 0x000000,
  transcodingUsers: users,
};
client.setLiveTranscoding(liveTranscoding);

因为业务需求是摄像头和屏幕共享可以切换,摄像头和屏幕共享的分辨率和码率均不相同,屏幕共享需要更高的分辨率和码率。但是开发中发现切换时设置码率无效。SDK那边给的答复是:因为缓存问题,会以第一次推流设置的参数为准,将会在下个版本中修复。

参考文献: MediaDevices.getUserMedia() MedaiDevices.enumerateDevices() HTMLMediaElement MediaDevices/getDisplayMedia

[转载]原文链接:https://segmentfault.com/a/1190000019471730

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67232.html

文章标题:摆脱客户端?网页发起直播势在必行!

相关文章
JS实现从网页顶部掉下弹出层效果的方法
本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法。分享给大家供大家参考。具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,...
2017-03-27
nodejs通过phantomjs实现下载网页
功能其实很见简单,通过 phantomjs.exe 采集 url 加载的资源,通过子进程的方式,启动nodejs 加载所有的资源,对于css的资源,匹配css内容,下载里面的url资源 当然功能还是很简单的,在响应式设计和异步加载的情况下,...
2017-03-23
JavaScript中计算网页中某个元素的位置
由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题。先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置即可。 那段代码一直都工作得很...
2017-03-24
原生js实现的贪吃蛇网页版游戏完整实例
本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; conte...
2017-03-23
js通过iframe加载外部网页的实现代码
今天从别的网站看到的,不需要跳转到别的页面直接本域名下调用外部网页。里面用js控制iframe的大小,确实不错。 &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD ...
2017-03-22
用javascript实现自动输出网页文本
用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家。 做出的效果就像是有一个打字员在打字. &lt;!doctype html...
2017-03-27
使用JavaScript刷新网页的方法
可以使用JavaScript location.reload方法刷新网页。当用户点击一个链接此代码可以自动在一个事件调用。 如果想使用鼠标点击刷新网页,可以用下面的代码: &lt;a href=&quot;javascript:locati...
2017-03-24
JavaScript调用客户端Java程序的方法
本文实例讲述了JavaScript调用客户端Java程序的方法。分享给大家供大家参考。具体如下: 一般说来,JavaScript是没有权限调用客户端可执行程序的。但有时有些特殊需要,又不得不调用。例如有时涉及客户端文件的操作此时,当然我们可...
2017-03-27
假如在App和网页之间只能选一个?
App和网页到底有什么差别? 日前,印度最大电商Flipkart宣布将在一年之内舍弃网页版,只在App端开展业务。其收购的Myntra也将从今年5月1日开始放弃网站,专注于App运营。而在此前18个月内,Flipcart的手机端流量增长了1...
2015-12-25
JavaScript获取网页中第一个链接ID的方法
本文实例讲述了JavaScript获取网页中第一个链接ID的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 &lt;!DOCTYPE html...
2017-03-22
回到顶部