external/srs
1
0
Fork 0
mirror of https://github.com/ossrs/srs.git synced 2025-03-09 15:49:59 +00:00
Code Issues Releases Wiki Activity

RTC: Refine demo H5 page

Browse source
This commit is contained in:
winlin 2021-05-21 17:26:52 +08:00
parent 37c9066636
commit 9ed388523f
2 changed files with 83 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

84
trunk/research/players/rtc_player.html
View file

@ -64,51 +64,51 @@
</footer> </footer>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function(){
var sdk = null; // Global handler to do cleanup when replaying. var sdk = null; // Global handler to do cleanup when replaying.
var startPlay = function() { var startPlay = function() {
$('#rtc_media_player').show(); $('#rtc_media_player').show();
// Close PC when user replay. // Close PC when user replay.
if (sdk) { if (sdk) {
sdk.close(); sdk.close();
}
sdk = new SrsRtcPlayerAsync();
// https://webrtc.org/getting-started/remote-streams
$('#rtc_media_player').prop('srcObject', sdk.stream);
// Optional callback, SDK will add track to stream.
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
// For example: webrtc://r.ossrs.net/live/livestream
var url = $("#txt_url").val();
sdk.play(url).then(function(session){
$('#sessionid').html(session.sessionid);
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
}).catch(function (reason) {
sdk.close();
$('#rtc_media_player').hide();
console.error(reason);
});
};
$('#rtc_media_player').hide();
var query = parse_query_string();
srs_init_rtc("#txt_url", query);
$("#btn_play").click(function() {
$('#rtc_media_player').prop('muted', false);
startPlay();
});
if (query.autostart === 'true') {
$('#rtc_media_player').prop('muted', true);
console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
startPlay();
} }
sdk = new SrsRtcPlayerAsync();
// https://webrtc.org/getting-started/remote-streams
$('#rtc_media_player').prop('srcObject', sdk.stream);
// Optional callback, SDK will add track to stream.
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
// For example: webrtc://r.ossrs.net/live/livestream
var url = $("#txt_url").val();
sdk.play(url).then(function(session){
$('#sessionid').html(session.sessionid);
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
}).catch(function (reason) {
sdk.close();
$('#rtc_media_player').hide();
console.error(reason);
});
};
$('#rtc_media_player').hide();
var query = parse_query_string();
srs_init_rtc("#txt_url", query);
$("#btn_play").click(function() {
$('#rtc_media_player').prop('muted', false);
startPlay();
}); });
if (query.autostart === 'true') {
$('#rtc_media_player').prop('muted', true);
console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
startPlay();
}
});
</script> </script>
</body> </body>
</html> </html>

83
trunk/research/players/rtc_publisher.html
View file

@ -68,53 +68,52 @@
</footer> </footer>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var pc = null; // Global handler to do cleanup when replaying. $(function(){
$(function(){ var sdk = null; // Global handler to do cleanup when republishing.
var sdk = null; // Global handler to do cleanup when republishing. var startPublish = function() {
var startPublish = function() { $('#rtc_media_player').show();
$('#rtc_media_player').show();
// Close PC when user replay. // Close PC when user replay.
if (sdk) { if (sdk) {
sdk.close(); sdk.close();
}
sdk = new SrsRtcPublisherAsync();
// User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
// However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
$('#rtc_media_player').prop('srcObject', sdk.stream);
// Optional callback, SDK will add track to stream.
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
sdk.pc.onicegatheringstatechange = function (event) {
if (sdk.pc.iceGatheringState === "complete") {
$('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
$('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
} }
sdk = new SrsRtcPublisherAsync();
// User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
// However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
$('#rtc_media_player').prop('srcObject', sdk.stream);
// Optional callback, SDK will add track to stream.
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
sdk.pc.onicegatheringstatechange = function (event) {
if (sdk.pc.iceGatheringState === "complete") {
$('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
$('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
}
};
// For example: webrtc://r.ossrs.net/live/livestream
var url = $("#txt_url").val();
sdk.publish(url).then(function(session){
$('#sessionid').html(session.sessionid);
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
}).catch(function (reason) {
sdk.close();
$('#rtc_media_player').hide();
console.error(reason);
});
}; };
$('#rtc_media_player').hide(); // For example: webrtc://r.ossrs.net/live/livestream
var query = parse_query_string(); var url = $("#txt_url").val();
srs_init_rtc("#txt_url", query); sdk.publish(url).then(function(session){
$('#sessionid').html(session.sessionid);
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
}).catch(function (reason) {
sdk.close();
$('#rtc_media_player').hide();
console.error(reason);
});
};
$("#btn_publish").click(startPublish); $('#rtc_media_player').hide();
if (query.autostart === 'true') { var query = parse_query_string();
startPublish(); srs_init_rtc("#txt_url", query);
}
}); $("#btn_publish").click(startPublish);
if (query.autostart === 'true') {
startPublish();
}
});
</script> </script>
</body> </body>
</html> </html>