文档中写H5端的rts没有提供视频控制栏,需要自己实现,请问常用的控制功能都能实现吗?

例如暂停与播放、音量调节、静音、全屏等是否都可以控制。
有相关的实现示例可以参考吗?

1、通过 stop 方法停止播放音视频流:
https://docs.agora.io/cn/Video/API%20Reference/web/interfaces/agorartc.stream.html#stop
通过 play 方法播放音视频流:
https://docs.agora.io/cn/Video/API%20Reference/web/interfaces/agorartc.stream.html#play

2、通过 setAudioVolume 方法调节订阅流的音量大小:
https://docs.agora.io/cn/Video/API%20Reference/web/interfaces/agorartc.stream.html#setaudiovolume

3、通过 muteAudio 禁用音频轨道:
https://docs.agora.io/cn/Video/API%20Reference/web/interfaces/agorartc.stream.html#muteaudio

4、全屏切换需要你们自己在业务逻辑层实现,一般是通过切换视窗大小来实现。

目前 H5 支持的方法如下:


相关 API 文档:https://docs.agora.io/cn/Video/API%20Reference/web/index.html

暂时没有示例代码,但是 Web 端的集成比较简单,一般而言应该不会有太大问题。

谢谢~
全屏的话试了一下可以用transfrom:rotate(90deg)把视窗旋转过来

1赞

:+1::+1::+1:

你好,这边遇到一点问题,rtsStream的play方法和rtc的不同吗,这里按照rtc文档中的写法,视频有播放,但是没有静音,后面的回调函数也没有调用。

     stream.play('videoWrap',{fit:'cover',muted:true},function(err){
      console.log(err)
    })

还有个问题是有没有办法获取当前的音量,视频播放的初识音量又是多少呢,getAudioLevel这个方法好像获取到的是当前时刻的声音大小,也不是0-100的音量。

如果播放成功, function 参数为 null

这里的 mute 参数不是用来控制静音的,主要是用于规避浏览器的自动播放策略的, 将 muted 设为 true,是绕过自动播放策略,不是说静音播放。

如果你想静音,请调用 muteAudio 方法。

getAudioLevel 的取值范围是 0-1,需要你们自己乘以 100 哈。由于受限于浏览器策略,所以这个值可能会不是太精确。

function参数等于null的时候就不会进这个回调了吗?我这样写也没有进这个回调函数。

  stream.play('videoWrap',{fit:'cover',muted:false},function(err){
      debugger
      if(err==null){
        console.log('play success')
      }
    })

代码有问题呗,这里文档可能说的也不是太清楚

你播放的是远端流吧?id 传了吗?看下demo的示例代码:

function playRemoteStream(stream) {
  var id = stream.getId();
  window["stream-"+id] = stream;
  if ($(`#streamid-${id}`).length > 0) {
    $(`#streamid-${id} .btn`).text("取消订阅");
  } else {
    var remotePlayerElement = $(`
      <div class="remote-player-container" id="streamid-${id}">
        <div class="remote-player__stats">
          <p>StreamId: ${id}</p>
          <p class="remote-decode-frame-rate"></p>
          <p class="remote-frame-rate"></p>
          <p class="remote-video-resolution"></p>
          <p class="remote-audio-volume"></p>
          <p class="remote-audio-first-decoded"></p>
          <p class="remote-video-first-decoded"></p>
          <p class="remote-video-first-rendered"></p>
          <p class="access-delay"></p>
          <p class="e2e-delay"></p>
          <p class="audio-delay"></p>
          <p class="video-delay"></p>
          <p class="remote-video-mute">video mute: false </p>
          <p class="remote-audio-mute">audio mute: false </p>
          <input class="remote-set-volume" type="range" min="0" max="100"></input>
        </div>
        <div class="remote-player" id="player-${id}"></div>
        <button class="btn btn-primary" type="button">取消订阅</button>
      </div>
    `);

    var btn = remotePlayerElement.find("button");
    btn.on("click", function() {
      var stream = subscribedStreams[id];
      if (!stream) {
        console.log("resubscribe", id, remoteStreams[id]);
        client.subscribe(remoteStreams[id], { video: true, audio: true }, function(err) {
          console.log("subscribe faild!", err);
        });
      }
      unsubscribe(id, false);
    });

    var input = remotePlayerElement.find(`input`);
    input.on('change', function(e) {
      console.log(`set stream ${id} volume ${e.target.value}`);
      stream.setAudioVolume(Number(e.target.value));
    });

    $("#remote-streams__slot").append(remotePlayerElement);
  }
  stream.play("player-" + id);
}